/* Fonts from @fontsource-variable, served from /site/fonts; written by apps/site/landing.mjs. */
@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/alexandria-latin-wght-normal.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: 'Alexandria'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/alexandria-latin-ext-wght-normal.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: 'Alexandria'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/alexandria-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/readex-pro-latin-wght-normal.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: 'Readex Pro'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/readex-pro-latin-ext-wght-normal.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: 'Readex Pro'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/readex-pro-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/montserrat-latin-wght-normal.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: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/montserrat-latin-ext-wght-normal.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: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/montserrat-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/montserrat-cyrillic-ext-wght-normal.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: 'Golos Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/golos-text-latin-wght-normal.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: 'Golos Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/golos-text-latin-ext-wght-normal.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: 'Golos Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/golos-text-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/golos-text-cyrillic-ext-wght-normal.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: 'Anek Devanagari'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-devanagari-latin-wght-normal.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: 'Anek Devanagari'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-devanagari-latin-ext-wght-normal.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: 'Anek Devanagari'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-devanagari-devanagari-wght-normal.woff2) format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Anek Bangla'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-bangla-latin-wght-normal.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: 'Anek Bangla'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-bangla-latin-ext-wght-normal.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: 'Anek Bangla'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-bangla-bengali-wght-normal.woff2) format('woff2'); unicode-range: U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1; }
@font-face { font-family: 'Anek Gurmukhi'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-gurmukhi-latin-wght-normal.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: 'Anek Gurmukhi'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-gurmukhi-latin-ext-wght-normal.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: 'Anek Gurmukhi'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-gurmukhi-gurmukhi-wght-normal.woff2) format('woff2'); unicode-range: U+0951-0952,U+0964-0965,U+0A01-0A76,U+200C-200D,U+20B9,U+25CC,U+262C,U+A830-A839; }
@font-face { font-family: 'Anek Malayalam'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-malayalam-latin-wght-normal.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: 'Anek Malayalam'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-malayalam-latin-ext-wght-normal.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: 'Anek Malayalam'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-malayalam-malayalam-wght-normal.woff2) format('woff2'); unicode-range: U+0307,U+0323,U+0951-0952,U+0964-0965,U+0D00-0D7F,U+1CDA,U+1CF2,U+200C-200D,U+20B9,U+25CC,U+A830-A832; }
@font-face { font-family: 'Anek Telugu'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-telugu-latin-wght-normal.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: 'Anek Telugu'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-telugu-latin-ext-wght-normal.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: 'Anek Telugu'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/anek-telugu-telugu-wght-normal.woff2) format('woff2'); unicode-range: U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Sans Sinhala'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/noto-sans-sinhala-sinhala-wght-normal.woff2) format('woff2'); unicode-range: U+0964-0965,U+0D81-0DF4,U+1CF2,U+200C-200D,U+25CC,U+111E1-111F4; }
@font-face { font-family: 'Noto Sans Ethiopic'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/noto-sans-ethiopic-ethiopic-wght-normal.woff2) format('woff2'); unicode-range: U+030E,U+1200-1399,U+2D80-2DDE,U+AB01-AB2E,U+1E7E0-1E7E6,U+1E7E8-1E7EB,U+1E7ED-1E7EE,U+1E7F0-1E7FE; }
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/noto-sans-arabic-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }

/* rizam.app: the landing page and the privacy policy. Colors, radii and type follow the app
   (apps/app/src/ui/theme.ts): solid surfaces, ink outlines, and the hard "stack" shadow under buttons, like a card
   lying on the next one. Henna, saffron, teal and cobalt mean Forgot, Hard, Got it and Easy, so they only appear
   on answers; saffron is also the brand.
   The fonts named here are our own: build.mjs puts their @font-face rules in front of this file (FONTS there). */

:root {
  --paper: #f4f3f8;
  --surface: #ffffff;
  --line: #dcdae6;
  --ink: #17162b;
  --ink-muted: #5b5a72;
  --saffron: #ffb21e;
  --on-saffron: #17162b;
  --henna: #d9481f;
  --on-henna: #ffffff;
  --teal: #0b7f73;
  --on-teal: #ffffff;
  --cobalt: #2f4bd6;
  --on-cobalt: #ffffff;
  --stack: #17162b;
  --night: #17162b;
  --on-night: #f4f3f8;
  --night-muted: #b9b7cd;
  --font-display: 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(16px, 4.5vw, 48px);
  --section: clamp(72px, 11vw, 136px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #121120;
    --surface: #1c1b2e;
    --line: #2e2c45;
    --ink: #f2f1f8;
    --ink-muted: #a6a4bc;
    --henna: #ff7448;
    --on-henna: #17162b;
    --teal: #2bc2b0;
    --on-teal: #17162b;
    --cobalt: #7d93ff;
    --on-cobalt: #17162b;
    --stack: #000000;
    --night: #000000;
    --on-night: #f2f1f8;
    --night-muted: #a6a4bc;
    color-scheme: dark;
  }
}

/* The same, when the app's own setting (localStorage rizam.appearance) asks for dark. */
:root[data-theme='dark'] {
  --paper: #121120;
  --surface: #1c1b2e;
  --line: #2e2c45;
  --ink: #f2f1f8;
  --ink-muted: #a6a4bc;
  --henna: #ff7448;
  --on-henna: #17162b;
  --teal: #2bc2b0;
  --on-teal: #17162b;
  --cobalt: #7d93ff;
  --on-cobalt: #17162b;
  --stack: #000000;
  --night: #000000;
  --on-night: #f2f1f8;
  --night-muted: #a6a4bc;
  color-scheme: dark;
}

/* Scripts Alexandria and Readex Pro don't cover get their own fonts (loaded only for that language). */
:root:lang(ru) {
  --font-display: 'Montserrat', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Golos Text', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(hi),
:root:lang(ne) {
  --font-display: 'Anek Devanagari', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Anek Devanagari', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(bn) {
  --font-display: 'Anek Bangla', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Anek Bangla', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(zh) {
  --font-display: 'Alexandria', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  --font-text: 'Readex Pro', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
}
:root:lang(ja) {
  --font-display: 'Alexandria', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  --font-text: 'Readex Pro', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
}
:root:lang(ko) {
  --font-display: 'Alexandria', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
  --font-text: 'Readex Pro', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
}
/* Readex Pro has no Urdu or Persian letters; Alexandria writes their text too. */
:root:lang(ur),
:root:lang(fa) {
  --font-display: 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Alexandria', ui-sans-serif, system-ui, sans-serif;
}
/* Neither brand font has all of Pashto's and Sorani Kurdish's letters. */
:root:lang(ps),
:root:lang(ckb) {
  --font-display: 'Noto Sans Arabic', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Noto Sans Arabic', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(pa) {
  --font-display: 'Anek Gurmukhi', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Anek Gurmukhi', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(ml) {
  --font-display: 'Anek Malayalam', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Anek Malayalam', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(te) {
  --font-display: 'Anek Telugu', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Anek Telugu', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(si) {
  --font-display: 'Noto Sans Sinhala', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Noto Sans Sinhala', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:root:lang(am) {
  --font-display: 'Noto Sans Ethiopic', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Noto Sans Ethiopic', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
/* Kazakh's Cyrillic and Hausa's hooked letters are Montserrat's, not the brand fonts'. */
:root:lang(kk),
:root:lang(ha) {
  --font-display: 'Montserrat', 'Alexandria', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Montserrat', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root:lang(ar) body,
:root:lang(ps) body,
:root:lang(ckb) body,
:root:lang(ur) body,
:root:lang(fa) body {
  line-height: 1.8;
}
:root:lang(hi) body,
:root:lang(ne) body,
:root:lang(pa) body,
:root:lang(ml) body,
:root:lang(te) body,
:root:lang(si) body,
:root:lang(am) body,
:root:lang(bn) body {
  line-height: 1.75;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
}

p,
ul,
ol {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

svg {
  display: block;
}

button,
select,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}

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

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Type */

h1 {
  font-weight: 800;
  font-size: clamp(3.1rem, 1.9rem + 5.6vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h2 {
  font-weight: 800;
  font-size: clamp(2.2rem, 1.55rem + 3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h3 {
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lead {
  max-width: 34em;
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  line-height: 1.5;
}

/* Arabic script, Devanagari, Bengali, Chinese, Japanese and Korean are never letter-spaced, and need taller lines. */
:root:lang(ar) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ps) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ckb) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ur) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(fa) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(hi) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ne) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(pa) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ml) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(te) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(si) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(am) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(bn) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(zh) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ja) :is(h1, h2, h3, .sc-count b, .panel-title),
:root:lang(ko) :is(h1, h2, h3, .sc-count b, .panel-title) {
  letter-spacing: 0;
}
:root:lang(ar) h1,
:root:lang(ps) h1,
:root:lang(ckb) h1,
:root:lang(ur) h1,
:root:lang(fa) h1 {
  line-height: 1.32;
}
:root:lang(ar) h2,
:root:lang(ps) h2,
:root:lang(ckb) h2,
:root:lang(ur) h2,
:root:lang(fa) h2 {
  line-height: 1.38;
}
:root:lang(ar) .lead,
:root:lang(ps) .lead,
:root:lang(ckb) .lead,
:root:lang(ur) .lead,
:root:lang(fa) .lead,
:root:lang(hi) .lead,
:root:lang(ne) .lead,
:root:lang(pa) .lead,
:root:lang(ml) .lead,
:root:lang(te) .lead,
:root:lang(si) .lead,
:root:lang(am) .lead,
:root:lang(bn) .lead {
  line-height: 1.7;
}
:root:lang(hi) :is(h1, h2),
:root:lang(ne) :is(h1, h2),
:root:lang(pa) :is(h1, h2),
:root:lang(ml) :is(h1, h2),
:root:lang(te) :is(h1, h2),
:root:lang(si) :is(h1, h2),
:root:lang(am) :is(h1, h2),
:root:lang(bn) :is(h1, h2) {
  line-height: 1.22;
}
/* Big headings break only at spaces, or at the <wbr> marks the Chinese and Japanese texts put between phrases. */
:root:lang(zh) :is(h1, h2),
:root:lang(ja) :is(h1, h2),
:root:lang(ko) :is(h1, h2) {
  line-height: 1.15;
  word-break: keep-all;
}
:root:lang(ru) h1,
:root:lang(kk) h1 {
  font-size: clamp(2.6rem, 1.7rem + 4.6vw, 5.4rem);
  letter-spacing: -0.03em;
}
:root:lang(ru) h2,
:root:lang(kk) h2 {
  font-size: clamp(2rem, 1.45rem + 2.5vw, 3.4rem);
}

/* Buttons: saffron on the hard stack shadow, pressing down into it. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px 30px;
  border: 2px solid var(--saffron);
  border-radius: 999px;
  background: var(--saffron);
  color: var(--on-saffron);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--stack);
  cursor: pointer;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

.button-small {
  min-height: 44px;
  padding: 4px 20px;
  font-size: 1rem;
  box-shadow: 0 3px 0 0 var(--stack);
}

.store {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
}

@media (hover: hover) {
  a.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 var(--stack);
  }
}

a.button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--stack);
}

.text-link {
  color: var(--cobalt);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Header */

.top {
  padding-block: 16px;
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  flex: none;
  display: block;
  border-radius: 8px;
  color: var(--ink);
}

.lockup {
  width: auto;
  height: 34px;
}

/* The bilingual lockup (logo-kit/lockups): symbol, Latin, Arabic; read from the right in Arabic. */
.lk-mark {
  transform: translate(32px, 32px);
}
.lk-words {
  transform: translate(194px, 53.872px);
}
[dir='rtl'] .lk-mark {
  transform: translate(466px, 32px);
}
[dir='rtl'] .lk-words {
  transform: translate(42.5px, 53.872px);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The language menu: a button with the language the page is in, and under it a list of every language, each in its
   own script. */
.picker {
  position: relative;
  min-width: 0;
}

.picker-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 13rem;
  min-height: 44px;
  padding-inline: 18px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Room for Arabic-script tails, which the clipped line would cut off. */
  line-height: 1.8;
}

.picker-button::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.picker-button[aria-expanded='true']::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.picker-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: max-content;
  min-width: 17rem;
  max-width: min(34rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(70vh, 28rem);
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 6px 0 0 var(--stack);
  animation: picker-open 140ms ease-out;
}

.picker-menu[hidden] {
  display: none;
}

.picker-menu:focus {
  outline: none;
}

.picker-menu:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}

.picker-menu [role='option'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  cursor: pointer;
}

.picker-menu [role='option'].active {
  background: var(--paper);
}

/* The page's language: a saffron mark, the brand's color for where you are. */
.picker-menu [role='option'][aria-selected='true']::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--saffron);
}

@keyframes picker-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 480px) {
  .picker-menu {
    grid-template-columns: 1fr;
    min-width: 13rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .picker-menu,
  .picker-button::after {
    animation: none;
    transition: none;
  }
}

/* Every language's name in its own script's font, whatever language the page is in: Readex Pro for Latin letters and
   Arabic, and the fonts each script's own page uses for the rest. */
:is(.picker-name, .picker-menu [role='option'], .lang-list button) {
  font-family: 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):is(:lang(fa), :lang(ur)) {
  font-family: 'Alexandria', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):is(:lang(ps), :lang(ckb)) {
  font-family: 'Noto Sans Arabic', 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):is(:lang(ru), :lang(kk)) {
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):is(:lang(hi), :lang(ne)) {
  font-family: 'Anek Devanagari', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(bn) {
  font-family: 'Anek Bangla', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(pa) {
  font-family: 'Anek Gurmukhi', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(ml) {
  font-family: 'Anek Malayalam', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(te) {
  font-family: 'Anek Telugu', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(si) {
  font-family: 'Noto Sans Sinhala', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(am) {
  font-family: 'Noto Sans Ethiopic', ui-sans-serif, system-ui, sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(zh) {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(ja) {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
}
:is(.picker-name, .picker-menu [role='option'], .lang-list button):lang(ko) {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
}

.top-open {
  display: none;
}

@media (min-width: 400px) {
  .lockup {
    height: 38px;
  }
}

@media (min-width: 680px) {
  .lockup {
    height: 44px;
  }
  .top-open {
    display: inline-flex;
  }
}

/* Hero */

.hero {
  overflow-x: clip;
  padding-block: clamp(20px, 5vw, 64px) var(--section);
}

.hero-grid {
  display: grid;
  gap: 64px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 56px;
  }
}

.hero h1 {
  max-width: 10em;
}

.hero .lead {
  margin-top: clamp(20px, 2.6vw, 32px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(28px, 3.4vw, 40px);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.soon {
  max-width: 22em;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.note {
  margin-top: 20px;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.hero-art {
  display: flex;
  justify-content: center;
}

/* Today's bundle, drawn like the app's Today screen: a saffron front card on ink cards, tied with a band. */

.stack {
  --w: 280px;
  --s: calc(var(--w) * 0.056);
  --gap-color: var(--paper);
  position: relative;
  flex: none;
  width: calc(var(--w) + 3 * var(--s));
  height: calc(var(--w) * 0.704 + 3 * var(--s));
}

.stack-hero {
  --w: min(300px, calc(100vw - 2 * var(--gutter) - 60px));
}

@media (min-width: 560px) {
  .stack-hero {
    --w: 360px;
  }
}

@media (min-width: 960px) {
  .stack-hero {
    --w: clamp(300px, 27vw, 390px);
  }
}

.stack-mini {
  --w: 168px;
}

.sc {
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * 0.704);
  border: calc(var(--w) * 0.016) solid var(--gap-color);
  border-radius: calc(var(--w) * 0.056);
  background: var(--ink);
}

.sc-3 {
  left: calc(3 * var(--s));
  top: 0;
}
.sc-2 {
  left: calc(2 * var(--s));
  top: var(--s);
}
.sc-1 {
  left: var(--s);
  top: calc(2 * var(--s));
}

.sc-front {
  left: 0;
  top: calc(3 * var(--s));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--w) * 0.06) calc(var(--w) * 0.08);
  background: var(--saffron);
  color: var(--on-saffron);
  line-height: 1.2;
  text-align: start;
}

.sc-label {
  font-weight: 600;
  font-size: calc(var(--w) * 0.055);
}

.sc-count {
  display: flex;
  align-items: baseline;
  gap: calc(var(--w) * 0.03);
}

.sc-count b {
  font-family: 'Alexandria', var(--font-display);
  font-weight: 800;
  font-size: calc(var(--w) * 0.28);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* The unit has to end before the band: 21 cards, 21 tarjetas, 21 карточка. */
.sc-count span {
  font-weight: 600;
  font-size: calc(var(--w) * 0.072);
}

:root:lang(ru) .sc-count span,
:root:lang(kk) .sc-count span {
  font-size: calc(var(--w) * 0.062);
}

.sc-time {
  font-weight: 500;
  font-size: calc(var(--w) * 0.058);
}

.band {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: calc(var(--w) * 0.13);
  width: calc(var(--w) * 0.11);
  background: var(--on-saffron);
  transform-origin: 50% 0;
}

.knot {
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--w) * 0.093);
  display: grid;
  place-items: center;
  width: calc(var(--w) * 0.184);
  height: calc(var(--w) * 0.184);
  margin-top: calc(var(--w) * -0.092);
  border: calc(var(--w) * 0.013) solid var(--on-saffron);
  border-radius: 50%;
  background: var(--teal);
}

/* Lucide's check, as in the app: 20 of the knot's 46, at a stroke of 3. */
.knot svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: var(--on-teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The one moment of motion: the cards arrive fanned like the logo, gather into a bundle, and get tied. */
@media (prefers-reduced-motion: no-preference) {
  .stack-hero .sc {
    transform-origin: 0 100%;
    animation: gather 780ms cubic-bezier(0.2, 1.2, 0.35, 1) 350ms both;
  }
  .stack-hero .sc-front {
    --fan: translate(-3%, 3%) rotate(-9deg);
  }
  .stack-hero .sc-1 {
    --fan: rotate(2deg);
  }
  .stack-hero .sc-2 {
    --fan: translate(2%, -3%) rotate(10deg);
  }
  .stack-hero .sc-3 {
    --fan: translate(4%, -6%) rotate(18deg);
  }
  .stack-hero .band {
    animation: band 420ms cubic-bezier(0.3, 0.8, 0.3, 1) 1150ms both;
  }
  .stack-hero .knot {
    animation: knot 420ms cubic-bezier(0.34, 1.7, 0.5, 1) 1500ms both;
  }
}

@keyframes gather {
  from {
    transform: var(--fan);
  }
}

@keyframes band {
  from {
    transform: scaleY(0);
  }
}

@keyframes knot {
  from {
    transform: scale(0);
  }
}

/* Sections */

.night {
  background: var(--night);
  color: var(--on-night);
}

.night .lead,
.night .step > p {
  color: var(--night-muted);
}

.habit,
.make,
.cta {
  padding-block: var(--section);
}

/* Making cards and the languages share the page's background, so each gives half the space between them. */
.make {
  padding-bottom: calc(var(--section) * 0.55);
}

.section-head {
  max-width: 46rem;
}

.section-head .lead {
  margin-top: 22px;
}

/* The daily habit, in its three steps. */

.steps {
  display: grid;
  gap: 56px;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}

.step h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 28px;
}

.step-n {
  color: var(--saffron);
  font-weight: 800;
}

.step > p {
  max-width: 30em;
  margin-top: 10px;
}

/* A panel is a piece of the app's interface, shown as it is. */
.panel {
  --gap-color: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 20px;
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
}

.panel-label {
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.875rem;
}

.panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 76px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.chip.is-on {
  background: var(--ink);
  color: var(--surface);
}

.chips-small .chip {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

.study-card {
  width: 100%;
  padding: 18px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 4px 0 0 var(--stack);
}

.study-q {
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
}

.study-a {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
}

.answers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 6px 4px;
  border-radius: 999px;
  box-shadow: 0 4px 0 0 var(--stack);
  line-height: 1.15;
}

.answer b {
  font-weight: 600;
  font-size: 0.8125rem;
}

.answer span {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.again {
  background: var(--henna);
  color: var(--on-henna);
}
.hard {
  background: var(--saffron);
  color: var(--on-saffron);
}
.good {
  background: var(--teal);
  color: var(--on-teal);
}
.easy {
  background: var(--cobalt);
  color: var(--on-cobalt);
}

/* Making cards */

.make h2 {
  max-width: 13em;
}

.ways {
  display: grid;
  gap: 56px;
  margin-top: clamp(40px, 6vw, 72px);
}

/* Side by side, the panels, titles and texts of the three columns line up (subgrid rows). */
@media (min-width: 900px) {
  .steps,
  .ways {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    row-gap: 0;
  }
  .step,
  .way {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .panel {
    min-height: 280px;
  }
}

.panel-card {
  border: 2px solid var(--ink);
  box-shadow: 0 6px 0 0 var(--stack);
}

.way h3 {
  margin-top: 30px;
}

.way > p {
  max-width: 30em;
  margin-top: 10px;
  color: var(--ink-muted);
}

.aside {
  color: var(--ink);
  font-weight: 600;
}

.cloze {
  max-width: 17em;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.9;
}

.gap {
  padding: 0.08em 0.4em;
  border-radius: 6px;
  background: var(--ink);
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.picks {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  list-style: none;
}

.picks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
}

.picks li > span:last-child {
  color: var(--ink-muted);
  font-weight: 500;
}

.pick-ar {
  font-family: 'Alexandria', 'Readex Pro', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.6;
}

.files {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
}

.file {
  display: flex;
  align-items: flex-end;
  width: 76px;
  height: 96px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 0 0 var(--stack);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
}

.file:first-child {
  transform: translateY(6px) rotate(-7deg);
}
.file:nth-child(2) {
  background: var(--saffron);
  border-color: var(--on-saffron);
  color: var(--on-saffron);
}
.file:last-child {
  transform: translateY(6px) rotate(7deg);
}

.imported {
  max-width: 16em;
  margin-top: 8px;
  font-weight: 500;
  text-wrap: balance;
}

/* Ten languages */

.langs {
  padding-block: calc(var(--section) * 0.55);
  /* It names every language in its own font: they load once the section comes near the screen. */
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.langs .lead {
  margin-top: 22px;
  color: var(--ink-muted);
}

.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.lang-list button {
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
}

.lang-list button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

/* Sharing, and where the library lives */

.pair {
  padding-block: calc(var(--section) * 0.55) var(--section);
}

.pair-grid {
  display: grid;
  gap: 64px;
}

@media (min-width: 900px) {
  .pair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
}

.pair-item {
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}

.pair h2 {
  font-size: clamp(1.9rem, 1.45rem + 1.9vw, 3rem);
}

.pair-item > p {
  max-width: 32em;
  margin-top: 16px;
  color: var(--ink-muted);
}

.pair-item > p.aside {
  color: var(--ink);
}

.links {
  display: grid;
  gap: 10px;
  max-width: 26rem;
  margin-top: 26px;
}

.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 4px 0 0 var(--stack);
}

.link-row b {
  font-weight: 600;
}

.link-row span {
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

/* The last call */

.cta h2 {
  max-width: 11em;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 5.6rem);
}

:root:lang(ru) .cta h2,
:root:lang(kk) .cta h2 {
  font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem);
}

.cta .lead {
  margin-top: 24px;
}

.cta .button:not(.store) {
  --stack: var(--on-night);
}

.cta .soon {
  color: var(--night-muted);
}

/* Footer */

.foot {
  padding-block: 40px 48px;
}

.foot-row {
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 900px) {
  .foot-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
  }
}

.foot-mark {
  width: 40px;
  height: auto;
  color: var(--ink);
}

.foot-meaning {
  max-width: 36em;
  color: var(--ink-muted);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-weight: 600;
}

.foot-links a {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* The privacy policy */