/* Общие шапка, мобильное меню и подвал для всех страниц сайта. Подключается до site.css или home2.css. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/oswald-latin-500-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: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/oswald-latin-600-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: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/oswald-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/oswald-cyrillic-ext-500-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: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/oswald-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/oswald-cyrillic-ext-600-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --c-paper: #ECEBE5; --c-sheet: #F7F6F1; --c-ink: #1B1D22; --c-mute: #5C5F66; --c-oil: #C98A1E; --c-oil-l: #E0A53D;
  --c-rule: rgba(27, 29, 34, .14); --c-rule-d: rgba(239, 239, 236, .14); --c-on-d: #EFEFEC; --c-mute-d: rgba(239, 239, 236, .66);
  --c-gut: clamp(16px, 4vw, 40px); --c-max: 1240px;
}
.c-wrap { width: 100%; max-width: calc(var(--c-max) + 2 * var(--c-gut)); margin-inline: auto; padding-inline: var(--c-gut); }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--c-ink); color: var(--c-paper); padding: 8px 14px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }

/* Знак: написание как в приложении */
.wordmark { font: 400 1.5rem/1 'Archivo Black', 'IBM Plex Sans', sans-serif; letter-spacing: -.035em; color: inherit; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.wordmark i { font-style: normal; color: var(--c-oil); }

/* Шапка */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-rule); color: var(--c-ink); }
.top-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.top .brand { text-decoration: none; color: var(--c-ink); }
.top .nav { display: flex; gap: 22px; margin-inline-start: auto; font: 500 .9375rem/1 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.top .nav a { text-decoration: none; color: var(--c-ink); padding-block: 6px; border-bottom: 2px solid transparent; }
.top .nav a:hover { border-bottom-color: var(--c-rule); }
.top .nav a[aria-current] { border-bottom-color: var(--c-oil); }
.top .lang { position: relative; margin-inline-start: 4px; }
.top .lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--c-rule); border-radius: 4px; font: 600 .8125rem/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--c-ink); }
.top .lang summary::-webkit-details-marker { display: none; }
.top .lang summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.top .lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50; list-style: none; margin: 0; padding: 6px; min-width: 170px; background: var(--c-sheet); border: 1px solid var(--c-rule); border-radius: 6px; box-shadow: 0 18px 40px -20px rgba(27, 29, 34, .45); }
.top .lang li a { display: block; padding: 9px 10px; border-radius: 4px; text-decoration: none; font-size: .9375rem; color: var(--c-ink); }
.top .lang li a:hover, .top .lang li a[aria-current] { background: rgba(27, 29, 34, .06); }
.top .lang li a[aria-current] { font-weight: 600; }
.top-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 4px; background: var(--c-ink); color: var(--c-paper); font: 600 .9375rem/1 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.top-cta:hover { background: #2C3039; }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--c-rule); border-radius: 4px; background: none; color: var(--c-ink); cursor: pointer; }
@media (max-width: 960px) { .top .nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 560px) { .top-cta { display: none; } }

/* Мобильное меню */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 12px var(--c-gut) calc(24px + env(safe-area-inset-bottom)); background: var(--c-paper); color: var(--c-ink); overflow-y: auto; }
.sheet[hidden] { display: none; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 8px; }
.sheet-x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-rule); border-radius: 4px; background: none; color: inherit; cursor: pointer; }
.sheet-nav { display: flex; flex-direction: column; border-top: 2px solid var(--c-ink); }
.sheet-nav a { padding: 16px 0; border-bottom: 1px solid var(--c-rule); text-decoration: none; font: 500 1.5rem/1.2 'Oswald', 'Arial Narrow', sans-serif; color: var(--c-ink); }
html[lang="ar"] .sheet-nav a { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; }
.sheet-h { margin-top: 20px; color: var(--c-mute); font: 600 .75rem/1.2 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.sheet-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; padding: 0; list-style: none; }
.sheet-langs a { display: block; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--c-rule); text-decoration: none; font-size: .9375rem; color: var(--c-ink); }
.sheet-langs a[aria-current] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.sheet .top-cta { display: inline-flex; justify-content: center; margin-top: auto; }
body.locked { overflow: hidden; }

/* Подвал */
.foot { background: #15171C; color: var(--c-mute-d); padding: 56px 0 32px; font-size: .9375rem; line-height: 1.6; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.foot .wordmark { color: var(--c-on-d); font-size: 1.75rem; }
.foot-brand p { margin: 12px 0 0; max-width: 24em; }
.foot a { color: var(--c-on-d); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot nav { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foot h2 { margin: 0 0 4px; font: 600 .75rem/1.3 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--c-mute-d); }
html[lang="ar"] .foot h2 { font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }
.foot nav a[aria-current] { color: var(--c-oil-l); }
.foot nav.foot-langs { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 22px; border-top: 1px solid var(--c-rule-d); font-size: .875rem; }
.foot-langs a[aria-current] { color: var(--c-oil-l); }
.foot .legal { grid-column: 1 / -1; margin: 0; font-size: .8125rem; }
@media (max-width: 1000px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* Страна посетителя: США, Канада или другая. Ставится в <html data-country>, см. site.js */
html:not([data-country="us"]) .us-only { display: none !important; }
html:not([data-country="us"]):not([data-country="ca"]) .na-only { display: none !important; }
.top .country summary { gap: 6px; }
.top .country summary .i { flex: none; }
html[data-country="us"] .country-code::after { content: 'US'; }
html[data-country="ca"] .country-code::after { content: 'CA'; }
.top .lang li button, .sheet-langs button { display: block; width: 100%; text-align: start; padding: 9px 10px; border: 0; border-radius: 4px; background: none; color: var(--c-ink); font: 400 .9375rem/1.3 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; cursor: pointer; }
.top .lang li button:hover { background: rgba(27, 29, 34, .06); }
.sheet-langs button { width: auto; padding: 10px 14px; border: 1px solid var(--c-rule); }
html[data-country="us"] [data-set-country="us"], html[data-country="ca"] [data-set-country="ca"], html[data-country="other"] [data-set-country="other"] { font-weight: 600; background: rgba(27, 29, 34, .06); }
html[data-country="us"] .sheet-langs [data-set-country="us"], html[data-country="ca"] .sheet-langs [data-set-country="ca"], html[data-country="other"] .sheet-langs [data-set-country="other"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
@media (max-width: 960px) { .top .country { margin-inline-start: auto; } .top .country + .lang { margin-inline-start: 0; } }