@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(/assets/fonts/manrope-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(/assets/fonts/manrope-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+2116}

/* ================= СВЕТЛАЯ ТЕМА =================
   Основа нейтрально-серая, а не бежевая: коралл тёплый, и на бежевом фоне
   пара давала мутный, «грязный» тон. Свечение на светлом приглушено вдвое —
   яркое пятно на белом читается как пятно, а не как свет. */
:root{
  --a1:#e0402a;--a2:#f4694b;--fg:#0b8ba3;
  --paper:#f7f7f8;--glass:#ffffff;--raise:#ffffff;
  --ink:#16161a;--ink-2:#55545c;--ink-3:#86858f;
  --rule:rgba(18,18,26,.12);--rule-2:rgba(18,18,26,.07);--tint:rgba(18,18,26,.042);
  --glow-a:13%;--glow-b:8%;
  --shadow-sm:0 1px 2px rgba(18,18,26,.05);
  --shadow:0 1px 2px rgba(18,18,26,.05),0 12px 32px -12px rgba(18,18,26,.16);
  --ease:cubic-bezier(.25,.1,.25,1);
}
/* ================= ТЁМНАЯ ================= */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --a1:#ff6a52;--a2:#ff9d7d;--fg:#4fd6ee;
  --paper:#0e0e10;--glass:#1a1a1d;--raise:#212125;
  --ink:#f4f3f1;--ink-2:#a8a6a2;--ink-3:#75736f;
  --rule:rgba(255,252,248,.12);--rule-2:rgba(255,252,248,.06);--tint:rgba(255,252,248,.055);
  --glow-a:24%;--glow-b:15%;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 46px -14px rgba(0,0,0,.72);
}}
:root[data-theme="dark"]{
  --a1:#ff6a52;--a2:#ff9d7d;--fg:#4fd6ee;
  --paper:#0e0e10;--glass:#1a1a1d;--raise:#212125;
  --ink:#f4f3f1;--ink-2:#a8a6a2;--ink-3:#75736f;
  --rule:rgba(255,252,248,.12);--rule-2:rgba(255,252,248,.06);--tint:rgba(255,252,248,.055);
  --glow-a:24%;--glow-b:15%;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 46px -14px rgba(0,0,0,.72);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

#glow{position:fixed;top:0;left:0;width:880px;height:880px;margin:-440px 0 0 -440px;
  border-radius:50%;pointer-events:none;z-index:-1;will-change:transform;
  transform:translate3d(50vw,20vh,0);
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--a1) var(--glow-a),transparent),transparent 72%)}
#glow2{position:fixed;right:-200px;bottom:-260px;width:680px;height:680px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--fg) var(--glow-b),transparent),transparent 72%)}
@media(prefers-reduced-motion:reduce){#glow{display:none}}

.shell{width:100%;max-width:1280px;margin:0 auto;padding:0 32px}
/* На больших мониторах даём ещё немного: строки текста при этом не тянутся —
   у абзацев свои ограничения по ширине в символах */
@media(min-width:1720px){.shell{max-width:1400px}}
main{flex:1}

/* ---------- логотип: слово внутри конверта ---------- */
.logo{display:inline-flex;align-items:center;padding:8px 15px 9px;position:relative;
  border:2.3px solid var(--ink);border-radius:11px;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:21px;letter-spacing:-.045em;line-height:1}
.logo::before{content:"";position:absolute;left:11px;right:11px;top:-2px;height:14px;
  border-left:2.3px solid var(--ink);border-right:2.3px solid var(--ink);
  clip-path:polygon(0 0,50% 100%,100% 0)}
.logo .m{color:var(--a1)}
.logo:hover{text-decoration:none}
.logo.sm{font-size:16.5px;padding:6px 12px 7px;border-width:2px;border-radius:9px}
.logo.sm::before{border-width:2px;height:11px;left:9px;right:9px}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule-2);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}
.hdr .in{display:flex;align-items:center;gap:8px;height:64px}
.hdr nav{display:flex;gap:2px;margin-left:14px}
.hdr nav a{padding:7px 12px;border-radius:9px;color:var(--ink-2);font-size:14px;font-weight:600;
  text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease)}
.hdr nav a:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.hdr nav a.on{color:var(--a1);background:color-mix(in srgb,var(--a1) 10%,transparent)}
.hdr .sp{margin-left:auto;display:flex;gap:8px;align-items:center}


.b{height:38px;padding:0 17px;border-radius:11px;display:inline-flex;align-items:center;
  justify-content:center;font-size:13.5px;font-weight:700;color:#fff;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;
  background:linear-gradient(145deg,var(--a2),var(--a1));
  box-shadow:0 4px 13px color-mix(in srgb,var(--a1) 32%,transparent);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.b:hover{transform:translateY(-1px);text-decoration:none;
  box-shadow:0 6px 17px color-mix(in srgb,var(--a1) 40%,transparent)}
.b:disabled{opacity:.55;cursor:not-allowed;transform:none}
.b.g{background:transparent;color:var(--ink-2);border:1px solid var(--rule);box-shadow:none}
.b.g:hover{background:var(--tint);color:var(--ink);box-shadow:none}
.b.lg{height:46px;padding:0 24px;font-size:14.5px;border-radius:12px}
.b.w{width:100%}

/* ---------- карточки и панели ---------- */
.panel{border-radius:18px;border:1px solid var(--rule-2);padding:26px 28px;
  background:color-mix(in srgb,var(--glass) 72%,transparent);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%)}
.card{width:100%;max-width:404px;padding:30px 32px 26px;border-radius:20px;
  border:1px solid var(--rule-2);box-shadow:var(--shadow);
  background:color-mix(in srgb,var(--glass) 80%,transparent);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
.card h1{margin:20px 0 5px;font-size:21px;font-weight:800;letter-spacing:-.035em}
.card .hint{margin:0 0 22px;font-size:13.5px;color:var(--ink-3)}
.center{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}

/* ---------- формы ---------- */
.fld{margin-bottom:13px}
.fld label{display:block;font-size:11px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.fld .wrap{display:flex;align-items:center;min-height:42px;border-radius:11px;
  border:1px solid var(--rule);background:var(--tint);padding:0 13px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
.fld .wrap:focus-within{border-color:var(--a1);background:var(--raise);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 16%,transparent)}
.fld input,.fld textarea,.fld select{flex:1;min-width:0;border:0;background:transparent;
  outline:none;font:inherit;font-size:14px;color:var(--ink);padding:10px 0}
.fld textarea{resize:vertical;min-height:104px;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)}
.fld .suffix{color:var(--ink-3);font-size:13.5px;white-space:nowrap;padding-left:4px}
.fld .err{display:none;margin-top:5px;font-size:12px;color:var(--a1);font-weight:600}
.fld.bad .wrap{border-color:var(--a1)}
.fld.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{padding:12px 15px;border-radius:11px;font-size:13.5px;margin-bottom:16px;font-weight:600}
.msg.err{background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--a1)}
.msg.ok{background:color-mix(in srgb,var(--fg) 14%,transparent);color:var(--fg)}
.note{margin-top:18px;font-size:12px;color:var(--ink-3);line-height:1.6}

a{color:var(--a1);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--a1);outline-offset:2px}

/* ---------- подвал ---------- */
.ftr{border-top:1px solid var(--rule-2);margin-top:70px;padding:30px 0 46px}
.ftr .in{display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  color:var(--ink-3);font-size:13px}
.ftr a{color:var(--ink-2);font-weight:600}
.ftr .mono{font-family:"Plex Mono",monospace;font-size:12px}

/* ---------- кнопка помощи ---------- */
.helpfab{position:fixed;right:22px;bottom:22px;z-index:60;height:44px;padding:0 18px;
  border-radius:99px;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:#fff;text-decoration:none;
  background:linear-gradient(145deg,var(--a2),var(--a1));
  box-shadow:0 6px 20px color-mix(in srgb,var(--a1) 42%,transparent);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.helpfab:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:0 9px 26px color-mix(in srgb,var(--a1) 50%,transparent)}
.helpfab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.helpfab span{display:none}.helpfab{padding:0;width:46px;height:46px;justify-content:center}}

.burger{display:none}
.burger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.hdr nav.mnav{display:none}

@media(max-width:760px){
  .shell{padding:0 18px}
  .hdr .in > nav{display:none}   /* прячем только настольную навигацию, не выпадающее меню */
  .ftr{margin-top:48px}
  /* Кнопки входа уезжают в меню: в строку шириной 390px они не помещаются
     вместе с логотипом, темой и языком */
  .hdr .sp .b{display:none}
  .burger{display:inline-flex}
  .hdr nav.mnav{display:flex;flex-direction:column;gap:2px;padding:8px 18px 16px;
    border-top:1px solid var(--rule);background:var(--bg)}
  .mnav a{display:block;padding:12px 12px;border-radius:11px;color:var(--ink-2);
    text-decoration:none;font-weight:600;font-size:15.5px}
  .mnav a:hover,.mnav a:focus-visible{background:var(--tint);color:var(--ink);text-decoration:none}
  .mnav a.on{color:var(--ink)}
  .mnav a.hi{background:var(--a1);color:#fff;margin-top:6px;text-align:center}
  .hdr nav.mnav[hidden]{display:none}
}

/* Переключатель языка: буквенный код, а не флаг — флаг обозначает страну, а не язык */

/* ═════════ СЕКЦИИ ГЛАВНОЙ ═════════ */
.sech{font-size:clamp(22px,3.2vw,30px);font-weight:800;letter-spacing:-.035em;
  margin:0 0 14px;text-wrap:balance}
.sec-steps,.sec-setup,.sec-priv{padding-top:56px}   /* ширину задаёт .shell, дублировать нельзя */

/* три шага */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:22px}
.step{padding:22px 24px 24px;border-radius:18px;border:1px solid var(--rule-2);
  background:color-mix(in srgb,var(--glass) 66%,transparent);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%)}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:9px;font-family:"Plex Mono",monospace;font-size:13px;font-weight:400;
  background:color-mix(in srgb,var(--a1) 14%,transparent);color:var(--a1);margin-bottom:13px}
.step h3{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.step p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.6}

/* как выглядит почта — макет интерфейса, а не скриншот: он не устареет */
.shot{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:7px;height:250px;padding:9px;
  border-radius:18px;border:1px solid var(--rule-2);background:color-mix(in srgb,var(--glass) 70%,transparent);
  box-shadow:var(--shadow);overflow:hidden}
.shot>*{border-radius:12px;background:var(--tint);padding:9px;display:flex;flex-direction:column;gap:6px}
.sh-logo{height:16px;border-radius:5px;background:linear-gradient(135deg,var(--a2),var(--a1));margin-bottom:5px}
.sh-f{height:9px;border-radius:4px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.sh-f.on{background:linear-gradient(135deg,var(--a2),var(--a1))}
.sh-day{height:6px;width:38%;border-radius:3px;background:color-mix(in srgb,var(--ink) 7%,transparent);margin-top:4px}
.sh-row{display:flex;gap:7px;align-items:center;padding:6px;border-radius:9px}
.sh-row.on{background:linear-gradient(135deg,var(--a2),var(--a1))}
.sh-row i{width:15px;height:15px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.sh-row.on i{background:rgba(255,255,255,.55)}
.sh-row b{flex:1;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 11%,transparent)}
.sh-row.on b{background:rgba(255,255,255,.5)}
.sh-h{height:13px;width:62%;border-radius:5px;background:color-mix(in srgb,var(--ink) 15%,transparent);margin-bottom:4px}
.sh-t{height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.sh-t.sm{width:55%}

/* настройки для почтовых программ */
.setupwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px;align-items:center}
@media(max-width:820px){.setupwrap{grid-template-columns:1fr}}
.setupwrap .lede{font-size:15.5px;color:var(--ink-2);margin:0 0 20px;max-width:46ch}
.setupwrap .b{text-decoration:none}
.conf{border-radius:18px;border:1px solid var(--rule-2);overflow:hidden;
  background:color-mix(in srgb,var(--glass) 66%,transparent);
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%)}
.crow{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--rule-2);
  font-size:13.5px}
.crow:last-child{border-bottom:0}
.crow span{color:var(--ink-3);flex:1}
.crow b{font-family:"Plex Mono",monospace;font-size:12.5px;font-weight:400;color:var(--ink)}

/* чего мы не делаем */
.privlist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px 30px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.privlist li{max-width:44ch}
.privlist li{position:relative;padding-left:28px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.privlist li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:8px;
  border-left:2px solid var(--a1);border-bottom:2px solid var(--a1);transform:rotate(-45deg)}

/* плавное появление секций при прокрутке */
@media(prefers-reduced-motion:no-preference){
  .sec-steps,.sec-setup,.sec-priv{
    animation:rise .5s var(--ease) both;animation-timeline:view();animation-range:entry 0% cover 22%}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* подвал побогаче */
.ftr .in{align-items:flex-start}
.ftr .fcol{display:flex;flex-direction:column;gap:7px}
.ftr .fcol .ft{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);margin-bottom:2px}
.ftr .fabout{max-width:34ch;color:var(--ink-3);font-size:12.5px;line-height:1.6}
.ftr .in{gap:44px}
.ftr .fcol a{font-size:13px}
@media(max-width:700px){.ftr .in{gap:24px}.ftr .fcol{min-width:44%}}
/* Логотип в подвале лежит в колонке-flex и растягивался на всю её ширину */
.ftr .fcol .logo{align-self:flex-start}

/* Клавиатурный фокус: поля снимают системную обводку (outline:none), а замены
   не было — с клавиатуры не видно, где находишься. Только :focus-visible,
   чтобы обводка не появлялась от клика мышью. */
/* Индикатор фокуса ровно один. Раньше их было три: своя подсветка рамки
   у .wrap, обводка на самом поле и обводка на обёртке — три несовпадающих
   кольца вокруг одного поля. И border-radius здесь менял форму элементов,
   которым он не полагался. */
button:focus-visible,a:focus-visible,summary:focus-visible,
select:focus-visible,.tgl:focus-visible{
  outline:2px solid var(--a1);outline-offset:2px}

/* У полей ввода рамку подсвечивает .wrap:focus-within — добавляем ей кольцо
   через box-shadow: оно повторяет скругление элемента, в отличие от outline */
.fld .wrap:focus-within{box-shadow:0 0 0 3px rgba(224,64,42,.18)}
.fld .wrap input:focus-visible,.fld .wrap textarea:focus-visible,
.fld .wrap select:focus-visible{outline:none}

/* ── читаемая ширина текста на широком мониторе ──
   Контейнер расширен до 1280–1400px, и абзацы ответов растянулись на 130
   символов в строку. Карточки остаются во всю ширину, ограничиваем только текст:
   глазу тяжело возвращаться к началу слишком длинной строки. */
.qa .in > p,.qa .in > ul,.qa .in > ol{max-width:88ch}
.qa .in .tbl{max-width:700px}
.head .lede{max-width:64ch}

/* ══════════ ТУМБЛЕРЫ ШАПКИ ══════════
   Тема и язык — переключатели с двумя видимыми состояниями, а не кнопки:
   по кнопке «RU» не понять, текущий это язык или тот, на который переключат. */
.tgl{position:relative;display:inline-flex;align-items:center;height:36px;
  border-radius:999px;border:1px solid var(--rule-2);background:var(--tint);
  padding:3px;flex:0 0 auto}
.tgl .knob{position:absolute;top:3px;left:3px;width:30px;height:28px;border-radius:999px;
  background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:transform .22s var(--ease)}

/* ── тема ── */
.tgl.theme{width:66px;cursor:pointer}
.tgl.theme .ic{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:28px;
  color:var(--ink-3);transition:color .18s}
.tgl.theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .tgl.theme .sun{color:var(--a1)}
html[data-theme="dark"]  .tgl.theme .moon{color:var(--a1)}
html[data-theme="dark"]  .tgl.theme .knob{transform:translateX(30px)}
.tgl.theme:hover{border-color:var(--a1)}
.tgl:focus-visible{outline:2px solid var(--a1);outline-offset:2px}

/* ── язык ── */
.tgl.lang{width:76px}
.tgl.lang .knob{width:35px}
.tgl.lang .knob.r{transform:translateX(35px)}
.tgl.lang .seg{position:relative;z-index:1;display:grid;place-items:center;width:35px;height:28px;
  font-family:"Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  text-decoration:none;border-radius:999px;transition:color .18s}
.tgl.lang .seg:hover{color:var(--ink-2);text-decoration:none}
.tgl.lang .seg.on{color:var(--a1)}
.tgl.lang .seg:focus-visible{outline:2px solid var(--a1);outline-offset:1px}

@media(prefers-reduced-motion:reduce){.tgl .knob{transition:none}}

/* ── выпадающий список ──
   Список раскрывается средствами браузера, а не нашей вёрсткой. Из-за
   background:transparent на самом select браузер считал элемент оформленным
   вручную и рисовал список светлым: серый текст на белом почти не читался.
   color-scheme на самом элементе возвращает ему тему страницы, а цвета
   у option нужны там, где системная палитра всё равно не применяется. */
html[data-theme="dark"] select,
html[data-theme="dark"] select option{color-scheme:dark}
html[data-theme="light"] select,
html[data-theme="light"] select option{color-scheme:light}
select option{background:var(--glass);color:var(--ink)}
select optgroup{background:var(--glass);color:var(--ink-3)}