/* Citizo · site citizo.co
   One stylesheet for every page. Tokens are the app's (design system v1, DS-Foundations).
   Logical properties throughout (inline-start/end) so an Arabic or Dari version mirrors with dir="rtl". */

/* ---------- 1. Tokens ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --c-paper: #F6F4EF;          /* background */
  --c-surface: #FFFFFF;
  --c-sunken: #EFEBE3;
  --c-border: #E2DDD3;
  --c-border-strong: #CFC8BA;  /* option rows, secondary buttons */
  --c-ink: #14213D;            /* text-primary */
  --c-ink-2: #4F5B6E;          /* text-secondary */
  --c-ink-disabled: #7D8697;
  --c-fill-disabled: #E7E3DA;
  --c-primary: #0F8AFD;        /* fills: buttons, selected, bars */
  --c-primary-hover: #0B74D9;
  --c-primary-ink: #08549B;    /* links, text on primary-soft, secondary button text */
  --c-primary-ink-hover: #063F73;
  --c-primary-soft: #E7F3FE;
  --c-success: #166B30;
  --c-success-soft: #E1F5E7;
  --c-success-line: #7BD49A;
  --c-success-badge: #A9E4BC;
  --c-success-badge-ink: #0F5A2A;
  --c-error: #B8261E;
  --c-error-soft: #FDE8E6;
  --c-error-line: #F29A93;
  --c-error-badge: #F7BDB8;
  --c-error-badge-ink: #8A1F18;
  --c-accent: #E9A23B;         /* stamp ring, highlights */
  --c-accent-ink: #8F5A0E;     /* stamp text, inner ring */
  --c-accent-soft: #FBEFD9;    /* stamp fill */
  --c-mastery: #7BD49A;        /* theme mastery bars, as in the app */
  --c-focus: #08549B;
  --c-header: #FFFFFF;
  --c-ill-disc: #FFFFFF;       /* illustration disc (the app's goal pictures) */
  --brand-1: #0A68C4;          /* brand blue: hero and closing band; white text 4.5:1 or more everywhere, glow included */
  --brand-2: #0956A6;
  --brand-glow: rgba(15, 138, 253, 0.40);
  --brand-glow-at: 78% 38%;
  --c-ill-shadow: rgba(20, 33, 61, 0.12);
  --shadow-header: 0 1px 0 rgba(20, 33, 61, 0.08), 0 2px 8px rgba(20, 33, 61, 0.04);
  --shadow-card: 0 1px 2px rgba(20, 33, 61, 0.04);
  --shadow-sheet: 0 -8px 24px rgba(20, 33, 61, 0.12);
}

[data-theme="dark"] {
  color-scheme: dark;
  --c-paper: #0E1424;
  --c-surface: #161E33;
  --c-sunken: #1D2741;
  --c-border: #2A3552;
  --c-border-strong: #3A4768;
  --c-ink: #F4F1EA;
  --c-ink-2: #B8C0D0;
  --c-ink-disabled: #7D8697;
  --c-fill-disabled: #1D2741;
  --c-primary: #0F8AFD;
  --c-primary-hover: #0B74D9;
  --c-primary-ink: #5EB0FD;
  --c-primary-ink-hover: #8FC8FE;
  --c-primary-soft: #0E2C4A;
  --c-success: #8FE0AC;
  --c-success-soft: #12321F;
  --c-success-line: #5BC283;
  --c-success-badge: #A9E4BC;
  --c-success-badge-ink: #0F5A2A;
  --c-error: #F7A39C;
  --c-error-soft: #3A1717;
  --c-error-line: #E07A72;
  --c-error-badge: #F7BDB8;
  --c-error-badge-ink: #8A1F18;
  --c-accent: #F2B654;
  --c-accent-ink: #F2B654;
  --c-accent-soft: #3A2C12;
  --c-mastery: #5BC283;
  --c-focus: #5EB0FD;
  --c-header: #161E33;
  --c-ill-disc: #2A3552;
  --c-ill-shadow: rgba(0, 0, 0, 0.18);
  --brand-1: #0E2C4A;
  --brand-2: #0B2440;
  --brand-glow: rgba(15, 138, 253, 0.35);
  --shadow-header: none;       /* dark: no shadows, height reads by surface and line */
  --shadow-card: none;
  --shadow-sheet: none;
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  /* 8-pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  /* shape */
  --r-chip: 999px; --r-badge: 10px; --r-button: 14px; --r-option: 16px; --r-card: 20px; --r-panel: 28px;
  /* layout */
  --gutter: 20px; --container: 1200px; --reading: 680px; --header-h: 64px;
}
.site, .site .site { --brand-bg: radial-gradient(60% 55% at var(--brand-glow-at, 50% 80%), var(--brand-glow) 0%, transparent 70%), linear-gradient(180deg, var(--brand-1) 0%, var(--brand-2) 100%); }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-paper); }
body.site { margin: 0; }
/* .site is the size container: layouts follow the width of the page, not the window (same result on the site, exact in design frames) */
.site { container: site / inline-size; }
.site { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: var(--font); font-size: 17px; line-height: 26px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100%; }
.site :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
.site :where(ul, ol) { padding: 0; }
.site ul[role="list"], .site ol[role="list"] { list-style: none; }
.site fieldset { border: 0; padding: 0; min-width: 0; }
.site legend { padding: 0; }
.site img { display: block; max-width: 100%; height: auto; }
.site :where(a) { color: var(--c-primary-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site :where(a):hover { color: var(--c-primary-ink-hover); }
.site :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.site :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; }
.site .i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.site [hidden] { display: none !important; }
.site .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site .skip { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 30; padding: 10px 16px; border-radius: 10px; background: var(--c-surface); color: var(--c-primary-ink); font-weight: 600; }
.site .skip:focus { top: 8px; }

/* the page fills the window; the footer takes any slack, so short pages end on the footer colour */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page .page { min-height: 0; } /* demo frames on the sheets */
.page > .root { flex-grow: 1; }
.page > .ftr, .root > .ftr { flex-grow: 1; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--reading { max-width: calc(var(--reading) + 2 * var(--gutter)); }

/* type */
.t-display { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.t-h2 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.t-h3 { font-size: 20px; line-height: 26px; font-weight: 600; }
.t-lead { font-size: 18px; line-height: 27px; color: var(--c-ink-2); }
.t-body { font-size: 17px; line-height: 26px; }
.t-small { font-size: 15px; line-height: 22px; }
.t-caption { font-size: 13px; line-height: 18px; color: var(--c-ink-2); }
.t-eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-2); }
.t-2 { color: var(--c-ink-2); }
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- 3. Header ---------- */
.hdr { position: sticky; top: 0; z-index: 20; height: var(--header-h); background: var(--c-header); box-shadow: var(--shadow-header); }
[data-theme="dark"] .hdr { border-block-end: 1px solid var(--c-border); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.mark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--c-ink); text-decoration: none; flex: none; }
.site a.mark, .site a.mark:hover { color: var(--c-ink); text-decoration: none; }
.site .mark__icon { width: 32px; height: 32px; border-radius: 7.5px; flex: none; box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.10); }
.mark__word { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.hdr__nav { flex: 1; display: none; justify-content: center; }
.hdr__nav ul { list-style: none; display: flex; gap: var(--s-2); }
.hdr__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; border-radius: 12px; color: var(--c-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.site .hdr__nav a:hover { color: var(--c-ink); background: var(--c-sunken); }
.site .hdr__nav a[aria-current="page"] { color: var(--c-primary-ink); }
.hdr__stores { display: none; align-items: center; gap: var(--s-2); flex: none; }
.hdr__menu { margin-inline-start: auto; }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding-inline: 10px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--c-ink); }
.menu-btn:hover { background: var(--c-sunken); }
.menu-btn summary, .menu summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu { position: static; }
.menu__panel { position: absolute; inset-inline: 0; top: var(--header-h); background: var(--c-surface); border-block-end: 1px solid var(--c-border); box-shadow: 0 12px 24px rgba(20, 33, 61, 0.10); padding: var(--s-2) var(--gutter) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
[data-theme="dark"] .menu__panel { box-shadow: none; }
.menu__panel ul { list-style: none; display: flex; flex-direction: column; }
.menu__panel li + li { border-block-start: 1px solid var(--c-border); }
.menu__panel li a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--c-ink); font-size: 18px; font-weight: 600; text-decoration: none; }
.site .menu__panel li a:hover { color: var(--c-primary-ink); }

/* language picker: a details menu in the header, every language in its own name.
   A two-letter code below 768 so the header still fits a 390 phone beside the menu button. */
.lang { position: relative; flex: none; }
.lang > summary { list-style: none; }
.lang > summary::-webkit-details-marker { display: none; }
.hdr__lang { margin-inline-start: auto; }
.hdr__lang ~ .hdr__menu { margin-inline-start: 0; }
.lang__name { display: none; }
.lang__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 21; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 12px 24px rgba(20, 33, 61, 0.10); }
.lang__panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-inline: 12px; border-radius: 10px; color: var(--c-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.site .lang__panel a:hover { background: var(--c-sunken); color: var(--c-ink); }
.site .lang__panel a[aria-current="page"] { color: var(--c-primary-ink); }
.lang__panel .i { width: 18px; height: 18px; }
/* the chooser's other languages for a country, under its card */
.country__langs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-2); }
.country__langs a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border-radius: var(--r-option); background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.site .country__langs a:hover { border-color: var(--c-border-strong); color: var(--c-ink); }

/* ---------- 4. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 8px 24px; border-radius: var(--r-button);
  font-size: 19px; line-height: 24px; font-weight: 700; text-align: center; text-decoration: none; border: 1px solid transparent; }
.site a.btn { text-decoration: none; }
/* White text on #0F8AFD only at 19 bold (large text, 3.46:1); hover #0B74D9 carries white at any size (4.65:1). */
.site .btn--primary { background: var(--c-primary); color: #FFFFFF; }
.site .btn--primary:hover { background: var(--c-primary-hover); color: #FFFFFF; }
.site .btn--secondary { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-primary-ink); font-size: 17px; font-weight: 600; }
.site .btn--secondary:hover { background: var(--c-sunken); color: var(--c-primary-ink); }
.site .btn--onbrand { background: #FFFFFF; color: #08549B; }   /* 7.6:1 */
.site .btn--onbrand:hover, .site .btn--onbrand.is-hover { background: #E7F3FE; color: #08549B; }
.site .btn--onbrand:focus-visible, .site .btn--onbrand.is-focus { outline-color: #FFFFFF; }
.site .btn--text { min-height: 48px; padding-inline: 12px; color: var(--c-primary-ink); font-size: 17px; font-weight: 600; }
.site .btn--text:hover { background: var(--c-primary-soft); }
.site .btn[disabled], .site .btn[aria-disabled="true"] { background: var(--c-fill-disabled); border-color: transparent; color: var(--c-ink-disabled); cursor: default; }
.btn--block { width: 100%; }
.btn .i { width: 20px; height: 20px; stroke-width: 2; }

/* static states drawn on the components sheet */
.site .btn--primary.is-hover { background: var(--c-primary-hover); }
.site .btn--secondary.is-hover { background: var(--c-sunken); }
.site .btn--text.is-hover { background: var(--c-primary-soft); }
.site .is-focus { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.site .opt.is-hover { background: var(--c-sunken); }

/* store badges: Apple's and Google's official artwork, unmodified */
.stores { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }
.store { display: inline-flex; align-items: center; min-height: 44px; border-radius: 9px; text-decoration: none; }
.site .store__badge { display: block; height: 44px; width: auto; max-width: none; }
.store--soon { flex-direction: column; align-items: center; gap: 4px; cursor: default; }
.store__soon { font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--c-ink-2); }
.stores--hero .store__soon { color: #FFFFFF; }
.hdr__stores .store--soon { flex-direction: row; gap: 8px; }
.site .hdr__stores .store__badge { height: 40px; }

/* ---------- 5. Chips, cards, stats ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-chip); background: var(--c-sunken); color: var(--c-ink); font-size: 14px; line-height: 18px; font-weight: 600; }
.chip .i { width: 16px; height: 16px; }
.chip--soft { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.tile { display: flex; flex-direction: column; gap: 4px; padding: var(--s-5); }
.tile__num { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile__lbl { font-size: 16px; line-height: 22px; color: var(--c-ink-2); }

/* sections */
.sec { padding-block: var(--s-12); }
.sec--tint { background: var(--c-surface); border-block: 1px solid var(--c-border); }
.sec__head { display: flex; flex-direction: column; gap: var(--s-2); margin-block-end: var(--s-6); max-width: 720px; }

/* ---------- 6. Hero: the brand blue ---------- */
.hero { position: relative; overflow: hidden; color: #FFFFFF; background: var(--brand-bg); padding-block: var(--s-10) var(--s-8); --brand-glow-at: 50% 82%; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-10); align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: var(--s-5); }
.hero__eyebrow { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: var(--r-chip); background: rgba(3, 30, 70, 0.28); color: #FFFFFF; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0.01em; }
.hero .t-display, .hero .t-lead { color: #FFFFFF; }
.hero__cta { display: flex; flex-direction: column; gap: var(--s-4); }
.hero__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #FFFFFF; font-size: 15px; line-height: 22px; font-weight: 600; }
.hero__facts li { display: inline-flex; align-items: center; gap: 6px; }
.hero__facts .i { width: 18px; height: 18px; color: #FFFFFF; stroke-width: 2.5; }
.indep { font-size: 14px; line-height: 20px; color: var(--c-ink-2); }
.hero .indep { color: #FFFFFF; }
.site .hero .indep a { color: #FFFFFF; text-decoration: underline; }
.site .hero :focus-visible { outline-color: #FFFFFF; }
.hero__media { position: relative; display: flex; flex-direction: column; align-items: center; }
/* the stamp's two rings, faint, behind the phone */
.hero__media::before, .hero__media::after { content: ""; position: absolute; left: 50%; top: 46%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.hero__media::before { width: 520px; height: 520px; border: 28px solid rgba(255, 255, 255, 0.08); }
.hero__media::after { width: 380px; height: 380px; border: 2px solid rgba(255, 255, 255, 0.14); }

/* phone: the real iPhone frame over the app screens */
.phone { position: relative; width: 250px; aspect-ratio: 600 / 1233; flex: none; z-index: 1; }
.phone--hero { filter: drop-shadow(0 28px 44px rgba(4, 22, 52, 0.38)); }
.phone--feat { width: 190px; filter: drop-shadow(0 14px 22px rgba(20, 33, 61, 0.16)); }
[data-theme="dark"] .phone--feat { filter: none; }
.phone__screen { position: absolute; left: 4.889%; right: 4.556%; top: 2.108%; bottom: 2.054%; border-radius: 15.77% / 7.25%; overflow: hidden; background: #F6F4EF; }
.phone__track { direction: ltr; display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.phone__track::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .phone__track { cursor: grab; } .phone__track:active { cursor: grabbing; } }
.phone__track:focus-visible { outline-offset: -3px; }
.phone__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.site .phone__slide img, .site .phone__shot { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }
.site .phone__shot { display: block; }
/* hero: the status bar (time, Dynamic Island, battery) stays put while the screens slide under it.
   It is the top 86 of 1304 px of the first screen; every hero screen has the same strip on the same paper colour. */
.phone__status { position: absolute; top: 0; left: 0; right: 0; z-index: 1; aspect-ratio: 600 / 86; background: url("/assets/img/screen-home.webp") center top / 100% auto no-repeat; pointer-events: none; }
.site .phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.carousel { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.dots { position: relative; z-index: 1; display: flex; justify-content: center; direction: ltr; } /* follows the track, which stays left-to-right in Arabic and Dari too */
.dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; color: inherit; }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: currentColor; opacity: 0.45; transition: width 0.2s ease-out, opacity 0.2s ease-out; }
.dot[aria-current="true"]::before { width: 22px; opacity: 1; }
.hero .dots { color: #FFFFFF; }

/* ---------- 7. Exam in brief ---------- */
.brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.brief .tile { padding: var(--s-4); }
.brief .tile__num { font-size: 30px; line-height: 34px; }
.brief .tile__lbl { font-size: 14px; line-height: 19px; }
.themes { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }

/* démarche cards */
.goals { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.goal { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); text-decoration: none; color: var(--c-ink); }
.site a.goal { color: var(--c-ink); text-decoration: none; }
.site a.goal:hover { border-color: var(--c-border-strong); background: var(--c-surface); }
.goal__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.goal__lvl { display: inline-flex; align-items: center; height: 28px; padding-inline: 10px; border-radius: var(--r-chip); background: var(--c-primary-soft); color: var(--c-primary-ink); font-size: 14px; font-weight: 700; }
.goal__more { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; color: var(--c-primary-ink); font-size: 16px; font-weight: 600; }
.goal__more .i { width: 20px; height: 20px; }

/* features */
.feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.feats > li { min-width: 0; }
.feat { display: flex; flex-direction: column; overflow: hidden; }
.feat__media { display: flex; justify-content: center; padding: var(--s-6) var(--s-4) var(--s-5); background: var(--c-primary-soft); border-block-end: 1px solid var(--c-border); }
.feat__text { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.feat__icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--c-primary-soft); color: var(--c-primary-ink); margin-block-end: var(--s-1); }
.feat__icon .i { width: 22px; height: 22px; }
.perks { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-8); }

/* languages */
.langs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.langs__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.langs__list li { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border-radius: var(--r-option); background: var(--c-surface); border: 1px solid var(--c-border); font-size: 17px; font-weight: 600; }
.langs__note { display: flex; align-items: flex-start; gap: 10px; padding: var(--s-4); border-radius: var(--r-option); background: var(--c-primary-soft); color: var(--c-ink); }
.langs__note .i { color: var(--c-primary-ink); margin-block-start: 1px; }
.langs__media { position: relative; display: flex; justify-content: center; padding: var(--s-6); border-radius: var(--r-card); background: var(--c-primary-soft); }

/* pricing */
.free { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.free__col { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks .i { width: 22px; height: 22px; color: var(--c-success); stroke-width: 2.25; margin-block-start: 2px; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-block-start: 1px solid var(--c-border); }
.faq details { border-block-end: 1px solid var(--c-border); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding-block: 14px; cursor: pointer;
  font-size: 18px; line-height: 26px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--c-ink-2); transition: transform 0.2s ease-out; }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq summary:hover { color: var(--c-primary-ink); }
.faq__a { padding-block-end: var(--s-5); max-width: 680px; color: var(--c-ink); display: flex; flex-direction: column; gap: var(--s-2); }

/* test box (guide, home) */
.tbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-6) var(--s-5); border-radius: var(--r-card); background: var(--c-primary-soft); }
.tbox__text { display: flex; flex-direction: column; gap: 6px; }
.tbox__title { font-size: 22px; line-height: 28px; font-weight: 700; }
.tbox__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; color: var(--c-ink-2); }

/* final CTA band */
.band { padding-block: var(--s-12); }
.band__in { --brand-glow-at: 90% 20%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; padding: var(--s-8) var(--s-5); border-radius: var(--r-panel); background: var(--brand-bg); color: #FFFFFF; }
.band__text { display: flex; flex-direction: column; gap: var(--s-4); }
.band .t-h2, .band .t-lead, .band .appid__name, .band .appid__sub { color: #FFFFFF; }
.band__cta { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.band .appicon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.appid { display: flex; align-items: center; gap: var(--s-3); }
.site .appicon { width: 64px; height: 64px; border-radius: 15px; flex: none; box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.08); }
.appid__name { font-size: 17px; line-height: 22px; font-weight: 700; }
.appid__sub { font-size: 14px; line-height: 20px; color: var(--c-ink-2); }

/* ---------- 8. Footer ---------- */
.ftr { padding-block: var(--s-10) var(--s-8); background: var(--c-sunken); color: var(--c-ink); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.ftr__brand { display: flex; flex-direction: column; gap: var(--s-3); max-width: 420px; }
.ftr__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.ftr h2 { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-2); margin-block-end: var(--s-2); }
.ftr ul { list-style: none; display: flex; flex-direction: column; }
.ftr li a { display: inline-block; min-height: 44px; padding-block: 10px; color: var(--c-ink); font-size: 16px; line-height: 24px; text-decoration: none; }
.site .ftr li a:hover { color: var(--c-primary-ink); text-decoration: underline; }
.ftr li a .i { width: 16px; height: 16px; color: var(--c-ink-2); margin-inline-start: 6px; vertical-align: -2px; }
.ftr__legal { margin-block-start: var(--s-8); padding-block-start: var(--s-6); border-block-start: 1px solid var(--c-border); display: flex; flex-direction: column; gap: var(--s-2); font-size: 14px; line-height: 21px; color: var(--c-ink-2); }
.ftr__legal strong { color: var(--c-ink); font-weight: 600; }
.ftr__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-6); }
.ftr__row a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 9. Free test ---------- */
.test { padding-block: var(--s-6) var(--s-12); }
.test__in, .test__in > [data-screen] { display: flex; flex-direction: column; gap: var(--s-5); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--c-ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink-2); }
.crumbs .i { width: 14px; height: 14px; }
[dir="rtl"] .crumbs .i, [dir="rtl"] .flip { transform: scaleX(-1); }

.opts { display: flex; flex-direction: column; gap: var(--s-3); }
.opt { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 60px; padding: 14px 16px; border-radius: var(--r-option);
  background: var(--c-surface); border: 1px solid var(--c-border-strong); cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt__key { width: 32px; height: 32px; border-radius: var(--r-badge); background: var(--c-sunken); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.opt__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-block-start: 4px; }
.opt__txt { font-size: 17px; line-height: 24px; }
.opt__state { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; font-weight: 700; }
.opt__state .i { width: 16px; height: 16px; stroke-width: 2.5; }
.opt:hover { background: var(--c-sunken); }
.opt:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* selected (before «Valider») */
.opt.is-selected, .opts:not(.is-done) .opt:has(input:checked), .pick .opt:has(input:checked) { background: var(--c-primary-soft); border-color: var(--c-primary); }
.opt.is-selected .opt__key, .opts:not(.is-done) .opt:has(input:checked) .opt__key { background: var(--c-primary); color: #FFFFFF; }
/* after «Valider» */
.opts.is-done .opt { cursor: default; }
.opts.is-done .opt:hover { background: var(--c-surface); }
.opt.is-right { background: var(--c-success-soft); border-color: var(--c-success-line); }
.opt.is-right .opt__key { background: var(--c-success-badge); color: var(--c-success-badge-ink); }
.opt.is-right .opt__state { color: var(--c-success); }
.opt.is-missed { background: var(--c-surface); border-color: var(--c-success-line); }
.opt.is-missed .opt__key { background: var(--c-surface); border: 1px solid var(--c-success-line); color: var(--c-success); }
.opt.is-missed .opt__state { color: var(--c-success); }
.opt.is-wrong { background: var(--c-error-soft); border-color: var(--c-error-line); }
.opt.is-wrong .opt__key { background: var(--c-error-badge); color: var(--c-error-badge-ink); }
.opt.is-wrong .opt__state { color: var(--c-error); }
.opt.is-dim { background: var(--c-paper); border-color: var(--c-border); color: var(--c-ink-2); }
.opt.is-dim .opt__key { background: var(--c-sunken); }
.opts.is-done .opt.is-right:hover { background: var(--c-success-soft); }
.opts.is-done .opt.is-wrong:hover { background: var(--c-error-soft); }
.opts.is-done .opt.is-dim:hover { background: var(--c-paper); }

.qhead { display: flex; flex-direction: column; gap: var(--s-3); }
.qbar { display: flex; align-items: center; gap: var(--s-3); }
.qbar__count { font-size: 16px; line-height: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--c-border); overflow: hidden; }
.bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; background: var(--c-primary); }
.stem { padding: var(--s-5); }
.stem__q { font-size: 21px; line-height: 28px; font-weight: 600; }

.qactions { display: flex; flex-direction: column; gap: var(--s-3); }
.fb { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-border); }
.fb__title { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 28px; font-weight: 700; }
.fb__title .i { width: 28px; height: 28px; stroke-width: 2; }
.fb--wrong .fb__title { color: var(--c-error); }
.fb--right .fb__title { color: var(--c-success); }
.fb__good { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--c-success-soft); }
.fb__good .opt__key { width: 28px; height: 28px; border-radius: 8px; background: var(--c-success-badge); color: var(--c-success-badge-ink); font-size: 14px; }
.fb__goodlbl { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--c-success); }
.fb__why { display: flex; flex-direction: column; gap: 4px; }
.fb__why h3 { font-size: 16px; line-height: 22px; font-weight: 700; }
.fb__src { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 20px; color: var(--c-ink-2); }
.fb__src .i { width: 16px; height: 16px; margin-block-start: 2px; }

/* start */
.pick { display: flex; flex-direction: column; gap: var(--s-3); }
.pick .opt { align-items: center; }
.pick .opt__body { padding-block-start: 0; }
.pick__dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-border-strong); flex: none; display: flex; align-items: center; justify-content: center; background: var(--c-surface); }
.opt:has(input:checked) .pick__dot, .opt.is-selected .pick__dot { border-color: var(--c-primary); }
.opt:has(input:checked) .pick__dot::after, .opt.is-selected .pick__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); }
.pick__lvl { font-size: 14px; line-height: 20px; color: var(--c-ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* result */
.score { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); overflow: hidden; }
.score__num { font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score__num span { font-size: 28px; font-weight: 600; color: var(--c-ink-2); }
.score__verdict { font-size: 19px; line-height: 26px; font-weight: 700; }
.score__verdict--pass { color: var(--c-success); }
.score__line { max-width: 520px; }
.score__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.score__stamp { width: 96px; height: 96px; flex: none; margin-block: -4px -8px; }
.score__body { display: flex; flex-direction: column; gap: var(--s-2); }
.marks { list-style: none; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.marks li { height: 10px; border-radius: 5px; background: var(--c-success-line); }
.marks li.is-wrong { background: var(--c-error-line); }
.rlist { list-style: none; display: flex; flex-direction: column; }
.rlist > li { border-block-end: 1px solid var(--c-border); }
.rlist > li:last-child { border-block-end: 0; }
.rlist details > summary { list-style: none; display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 14px var(--s-5); cursor: pointer; }
.rlist details > summary::-webkit-details-marker { display: none; }
.rlist details > summary:hover { background: var(--c-paper); }
.rlist__n { width: 28px; flex: none; font-size: 15px; line-height: 24px; font-weight: 700; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.rlist__q { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; }
.rlist__mark { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 28px; padding-inline: 8px; border-radius: var(--r-chip); font-size: 13px; font-weight: 700; }
.rlist__mark .i { width: 14px; height: 14px; stroke-width: 2.75; }
.rlist__mark--ok { background: var(--c-success-soft); color: var(--c-success); }
.rlist__mark--ko { background: var(--c-error-soft); color: var(--c-error); }
.rlist__chev { width: 20px; height: 20px; color: var(--c-ink-2); margin-block-start: 2px; }
.rlist details[open] .rlist__chev { transform: rotate(180deg); }
.rlist__x { padding-block: 0 var(--s-5); padding-inline: calc(var(--s-5) + 40px) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font-size: 16px; line-height: 23px; }
.rlist__x .fb__good { padding: 8px 12px; }
.next { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6) var(--s-5); }
.next__head { display: flex; align-items: center; gap: var(--s-4); }

/* the app's goal illustrations, theme-aware */
.ill { display: block; flex: none; }
.ill .ib { fill: var(--c-primary-soft); }
.ill .id { fill: var(--c-ill-disc); }
.ill .ish { fill: var(--c-ill-shadow); }
.ill .ip { fill: var(--c-surface); stroke: var(--c-primary-ink); stroke-width: 1.5; }
.ill .is { fill: var(--c-primary-soft); stroke: var(--c-primary-ink); }
.ill .ig { fill: none; stroke: var(--c-border-strong); stroke-width: 2; stroke-linecap: round; }
.ill .ia { fill: var(--c-accent); }
.ill .il { stroke: var(--c-primary-ink); }
.ill .ifill { fill: var(--c-primary-ink); }
.ill .iinv { fill: none; stroke: var(--c-surface); }
.ill .iamb { fill: var(--c-surface); stroke: var(--c-accent); }
.ill .iamb0 { fill: none; stroke: var(--c-accent); }

/* stamps */
.stamp-ok { display: block; }

/* ---------- 10. Guide (article) ---------- */
.art { padding-block: var(--s-6) var(--s-12); }
.art__in { display: flex; flex-direction: column; gap: var(--s-6); }
.art__head { display: flex; flex-direction: column; gap: var(--s-4); }
.art__answer { font-size: 19px; line-height: 29px; padding: var(--s-5); border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-border); }
.art h2 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin-block-start: var(--s-4); }
.art p, .art li { font-size: 18px; line-height: 29px; }
.art ul.list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.art ul.list li { position: relative; padding-inline-start: 24px; }
.art ul.list li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
.toc { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4) var(--s-5); border-radius: var(--r-option); background: var(--c-sunken); }
.toc ol { list-style: none; display: flex; flex-direction: column; }
.toc a { display: inline-flex; min-height: 44px; align-items: center; font-size: 16px; }
.tbl-wrap { overflow-x: auto; border-radius: var(--r-option); border: 1px solid var(--c-border); background: var(--c-surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 22px; min-width: 520px; }
.tbl caption { text-align: start; padding: 14px 16px 0; font-size: 14px; line-height: 20px; color: var(--c-ink-2); caption-side: bottom; padding-block-end: 14px; }
.tbl th, .tbl td { text-align: start; padding: 14px 16px; border-block-end: 1px solid var(--c-border); vertical-align: top; }
.tbl thead th { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-2); background: var(--c-paper); }
.tbl tbody th { font-weight: 600; }
.tbl tr.is-current { background: var(--c-primary-soft); }
.updated { font-size: 14px; line-height: 20px; color: var(--c-ink-2); }

/* ---------- 11. Root chooser, 404 ---------- */
.root { min-height: 100%; display: flex; flex-direction: column; }
.root__main { flex: 1; padding-block: var(--s-12); }
.root__in { display: flex; flex-direction: column; gap: var(--s-6); max-width: 640px; }
.countries { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.country { display: flex; align-items: center; gap: var(--s-4); min-height: 88px; padding: var(--s-4) var(--s-5); text-decoration: none; color: var(--c-ink); }
.site a.country { color: var(--c-ink); text-decoration: none; }
.site a.country:hover { border-color: var(--c-border-strong); }
.site .country__icon { width: 56px; height: 56px; border-radius: 13px; flex: none; box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.08); }
.country__code { width: 56px; height: 56px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--c-sunken); color: var(--c-ink); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
.country__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.country__name { font-size: 20px; line-height: 26px; font-weight: 700; }
.country__sub { font-size: 15px; line-height: 21px; color: var(--c-ink-2); }
.country__lang { display: flex; flex-wrap: wrap; gap: 6px; }
.country .i { color: var(--c-primary-ink); }
.country--soon { color: var(--c-ink-2); background: transparent; border-style: dashed; box-shadow: none; }
.country--soon .country__name { font-size: 17px; font-weight: 600; color: var(--c-ink-2); }
.lost { padding-block: var(--s-12); }
.lost__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); max-width: 640px; }
.lost__stamp { width: 140px; height: 140px; }
.hero__cta--row { flex-direction: row; flex-wrap: wrap; }

/* under 768: the feature cards swipe sideways */
.feats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-4); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block-end: var(--s-2); scrollbar-width: thin; }
.feats > li { flex: 0 0 82%; scroll-snap-align: center; }

/* ---------- 12. Breakpoints ---------- */
/* 768 – 1023: tablet (container width) */
@container site (min-width: 768px) {
  .page { --gutter: 32px; }
  .lang__name { display: inline; }
  .lang__code { display: none; }
  .t-display { font-size: 44px; line-height: 50px; }
  .t-h2 { font-size: 32px; line-height: 38px; }
  .t-lead { font-size: 20px; line-height: 30px; }
  .sec { padding-block: var(--s-16); }
  .hero { padding-block: var(--s-12) var(--s-10); }
  .hero__cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .phone--hero { width: 270px; }
  .brief { gap: var(--s-4); }
  .brief .tile { padding: var(--s-5); }
  .brief .tile__num { font-size: 40px; line-height: 44px; }
  .brief .tile__lbl { font-size: 16px; line-height: 22px; }
  .goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); overflow: visible; margin-inline: 0; padding: 0; }
  .langs { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbox { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-6); }
  .band__in { padding: var(--s-10); }
  .ftr__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .test__in { max-width: 680px; margin-inline: auto; }
  .qactions { flex-direction: row; justify-content: flex-end; }
  .next { padding: var(--s-6); }
  .score { padding: var(--s-6); }
  .score__num { font-size: 64px; line-height: 68px; }
  .score__stamp { width: 120px; height: 120px; }
  .art h2 { font-size: 30px; line-height: 36px; }
}
/* ≥ 1024: desktop (1440 frame = 1200 content + 2 × 120 margin) */
@container site (min-width: 1024px) {
  .page { --gutter: 40px; }
  .t-display { font-size: 56px; line-height: 62px; }
  .t-h2 { font-size: 36px; line-height: 42px; }
  .hdr__nav { display: flex; }
  .hdr__stores { display: flex; }
  .hdr__menu { display: none; }
  .hero { padding-block: var(--s-12); --brand-glow-at: 76% 46%; }
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-12); }
  .phone--hero { width: 300px; }
  .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phone--feat { width: 180px; }
  .sec { padding-block: var(--s-20); }
  .band__in { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-12); }
  .hdr__in { gap: var(--s-4); }
  .ftr__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
@container site (min-width: 768px) and (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__text { max-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .phone__track { scroll-behavior: auto; }
}