
:root{color-scheme:light dark}
img{max-width:100%}
[hidden]{display:none!important}

/* ================= ДВЕ КРАСКИ ================= */
:root {
  --paper:      #EFEDE3;
  --paper-2:    #E5E2D5;
  --ink:        #14130E;
  --ink-soft:   #3E3D35;
  --mute:       #6E6C60;
  --rule:       #14130E;
  --hair:       #C9C5B4;
  --spot:       #3A34E0;
  --spot-deep:  #2823B4;
  --spot-lit:   #6B67FF;
  --on-spot:    #F3F2FF;
  --on-ink:     #EFEDE3;
  --warn:       #9A5B08;
  --stop:       #B23124;

  --shell: 1240px;
  --gut: 22px;

  --f-huge: "Unbounded", "Arial Black", Impact, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #100F0C;
    --paper-2:  #1A1915;
    --ink:      #EFEDE3;
    --ink-soft: #C6C3B6;
    --mute:     #8E8B7D;
    --rule:     #EFEDE3;
    --hair:     #38362E;
    --spot:     #6B67FF;
    --spot-deep:#4F4BE8;
    --spot-lit: #8F8CFF;
    --on-spot:  #0C0B1A;
    --on-ink:   #100F0C;
    --warn:     #D7A14A;
    --stop:     #E28374;
  }
}
:root[data-theme="dark"] {
  --paper:    #100F0C;
  --paper-2:  #1A1915;
  --ink:      #EFEDE3;
  --ink-soft: #C6C3B6;
  --mute:     #8E8B7D;
  --rule:     #EFEDE3;
  --hair:     #38362E;
  --spot:     #6B67FF;
  --spot-deep:#4F4BE8;
  --spot-lit: #8F8CFF;
  --on-spot:  #0C0B1A;
  --on-ink:   #100F0C;
  --warn:     #D7A14A;
  --stop:     #E28374;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }

h1, h2, h3 { margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* --- плакатные заголовки --- */
.poster {
  font-family: var(--f-huge);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
  hyphens: none;
}
.h-xl { font-size: clamp(34px, 8.2vw, 112px); }
.h-lg { font-size: clamp(28px, 5.6vw, 68px); }
.h-md { font-size: clamp(22px, 3.4vw, 40px); }

.mono {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lede { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; max-width: 44ch; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--spot);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ================= ЛИСТ / ШАПКА ================= */
.sheetbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 2px solid var(--rule);
}
.sheetbar-in {
  display: flex; align-items: center; gap: 18px 26px;
  min-height: 54px; flex-wrap: wrap;
}
.mark {
  font-family: var(--f-huge); font-weight: 900; font-size: 19px;
  letter-spacing: -.04em; text-transform: uppercase;
  text-decoration: none; margin-right: auto;
}
.sheetbar nav { display: flex; gap: 22px; flex-wrap: wrap; }
.sheetbar nav a { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.sheetbar nav a:hover { color: var(--spot); border-bottom-color: var(--spot); }
@media (max-width: 900px) { .sheetbar nav { display: none; } }

/* ================= ПОЛОСЫ ================= */
.band-ink  { background: var(--ink);  color: var(--on-ink); }
.band-spot { background: var(--spot); color: var(--on-spot); }
.band-ink .mute, .band-spot .mute { opacity: .72; }

.sec { padding-block: clamp(52px, 7vw, 96px); }
.sec + .sec.paper { border-top: 2px solid var(--rule); }

/* маркер раздела: большой номер + метка */
.secmark { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.secmark .n {
  font-family: var(--f-huge); font-weight: 900;
  font-size: clamp(30px, 4vw, 46px); line-height: .8;
  color: var(--spot); letter-spacing: -.05em;
}
.band-ink .secmark .n { color: var(--spot-lit); }
.band-spot .secmark .n { color: var(--on-spot); }
.secmark .t { font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }

/* ================= ГЕРОЙ ================= */
.hero { padding-block: clamp(40px, 5vw, 70px) clamp(44px, 5vw, 74px); }
.hero h1 { margin-bottom: 26px; }
.hero h1 .ghost { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
@media (max-width: 980px) { .hero-body { grid-template-columns: minmax(0,1fr); gap: 32px; } }
.hero-body .lede { color: var(--ink-soft); }
.hero-body .lede b { color: var(--ink); font-weight: 600; }

/* форма */
.form {
  min-width: 0;
  border: 2px solid var(--rule);
  background: var(--paper);
  padding: 20px;
}
.band-ink .form, .band-spot .form { border-color: currentColor; background: transparent; }
.form > .mono { display: block; margin-bottom: 12px; color: var(--mute); }
.band-spot .form > .mono { color: var(--on-spot); opacity: .8; }
.frow { display: flex; gap: 10px; flex-wrap: wrap; }
.fbox {
  flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--rule); background: var(--paper); min-height: 54px; padding-inline: 12px;
}
.band-spot .fbox { border-color: var(--on-spot); background: transparent; }
.fbox .pre { font-family: var(--f-mono); font-size: 13px; color: var(--spot); }
.band-spot .fbox .pre { color: var(--on-spot); }
.fbox input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: inherit;
  font-family: var(--f-mono); font-size: 15.5px; padding: 0;
}
.fbox input::placeholder { color: var(--mute); }
.band-spot .fbox input::placeholder { color: var(--on-spot); opacity: .55; }
.fbox input:focus { outline: none; }

.go {
  font-family: var(--f-huge); font-weight: 800; text-transform: uppercase;
  font-size: 14px; letter-spacing: -.01em;
  min-height: 54px; padding-inline: 24px;
  border: 2px solid var(--spot); background: var(--spot); color: var(--on-spot);
  cursor: pointer; transition: background .12s, color .12s;
}
.go:hover { background: var(--spot-deep); border-color: var(--spot-deep); }
.band-spot .go { background: var(--on-spot); color: var(--spot); border-color: var(--on-spot); }
.band-spot .go:hover { background: transparent; color: var(--on-spot); }

.fnote { font-size: 13.5px; line-height: 1.5; color: var(--mute); margin-top: 14px; }
.band-spot .fnote { color: var(--on-spot); opacity: .8; }
.ferr { font-family: var(--f-mono); font-size: 12.5px; color: var(--stop); margin-top: 10px; }
.band-spot .ferr { color: var(--on-spot); font-weight: 600; }
.fdone { margin-top: 16px; border-top: 2px solid var(--rule); padding-top: 16px; font-size: 15px; }
.band-spot .fdone { border-top-color: var(--on-spot); }

/* ================= ОБРАЗЕЦ ================= */
.sample { border: 2px solid var(--rule); background: var(--paper); min-width: 0; }
.sample-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 2px solid var(--rule);
  background: var(--ink); color: var(--on-ink);
}
.sample-top .mono { letter-spacing: .14em; }
.stamp {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1.5px solid var(--spot-lit); color: var(--spot-lit); padding: 3px 7px; white-space: nowrap;
}
.tabs { display: flex; overflow-x: auto; border-bottom: 2px solid var(--rule); min-width: 0; }
.tabs button {
  flex: 0 0 auto; border: 0; border-right: 1px solid var(--hair); background: transparent;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); padding: 11px 14px; cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--spot); color: var(--on-spot); }
.tp { padding: 18px 16px 20px; font-size: 14.5px; }
.tp h3 { font-family: var(--f-huge); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 10px; }

.facts { border-top: 1px solid var(--hair); }
.fact { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.fact .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 3px; }
.fact .v { font-size: 14.5px; line-height: 1.45; }
.src { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; white-space: nowrap; border: 1.5px solid currentColor; }
.src-site { color: var(--spot); }
.src-ai { color: var(--warn); }
.src-you { color: var(--mute); }
.src-gap { color: var(--stop); }

.seg { border-top: 2px solid var(--rule); padding: 12px 0; }
.seg:first-child { border-top: 0; }
.seg-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.seg-h b { font-size: 14.5px; font-weight: 600; }
.seg-h .w { font-family: var(--f-huge); font-weight: 800; font-size: 19px; color: var(--spot); letter-spacing: -.04em; }
.seg p { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
.seg .d { color: var(--warn); font-size: 13px; margin-top: 7px; }

.letter { border: 2px solid var(--rule); padding: 15px; }
.letter .subj { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; color: var(--spot); margin-bottom: 12px; }
.letter .bd { white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.letter .ft { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--hair); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.state {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border: 1.5px solid currentColor; color: var(--warn);
}
.letter .ft .meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* ================= УТВЕРЖДЕНИЕ ВО ВЕСЬ ЭКРАН ================= */
.claim { padding-block: clamp(56px, 8vw, 110px); }
.claim h2 { margin-bottom: 22px; }
.claim .after { max-width: 62ch; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; }
.neq { color: var(--spot-lit); }
.band-spot .neq { color: var(--on-spot); }

/* ================= ШАГИ ================= */
.steps { border-top: 2px solid var(--rule); }
.step { display: grid; grid-template-columns: clamp(66px, 8vw, 128px) minmax(0,1fr) auto; gap: 20px 28px; padding-block: 26px; border-bottom: 2px solid var(--rule); align-items: start; }
@media (max-width: 820px) { .step { grid-template-columns: 56px minmax(0,1fr); } .step .flag { grid-column: 2; } }
.step .n { font-family: var(--f-huge); font-weight: 900; font-size: clamp(30px, 5vw, 62px); line-height: .8; letter-spacing: -.06em; color: var(--spot); }
.step h3 { font-family: var(--f-huge); font-weight: 800; font-size: clamp(18px, 2.1vw, 25px); text-transform: uppercase; letter-spacing: -.025em; margin-bottom: 9px; }
.step p { color: var(--ink-soft); max-width: 60ch; font-size: 15.5px; }
.flag {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; white-space: nowrap; height: fit-content; border: 2px solid currentColor;
}
.flag.ok { color: var(--spot); }
.flag.part { color: var(--warn); }
.flag.no { color: var(--stop); }

/* ================= ПРАВИЛА ================= */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 48px; }
@media (max-width: 860px) { .rules { grid-template-columns: minmax(0,1fr); } }
.rule { padding-block: 26px; border-top: 2px solid currentColor; }
.rule h3 { font-family: var(--f-huge); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 10px; }
.rule p { font-size: 15.5px; opacity: .86; }

/* ================= ТАБЛИЦА ================= */
.tw { overflow-x: auto; border: 2px solid var(--rule); }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; }
thead th {
  text-align: left; font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 13px 15px;
  border-bottom: 2px solid var(--rule); vertical-align: bottom; color: var(--mute);
}
thead th.us { background: var(--spot); color: var(--on-spot); }
tbody th { text-align: left; font-weight: 600; font-size: 14.5px; padding: 14px 15px; width: 180px; vertical-align: top; border-bottom: 1px solid var(--hair); }
tbody td { padding: 14px 15px; border-bottom: 1px solid var(--hair); color: var(--ink-soft); vertical-align: top; line-height: 1.45; font-size: 14.5px; }
tbody td.us { color: var(--ink); font-weight: 500; border-left: 2px solid var(--spot); border-right: 2px solid var(--spot); }
tbody tr:last-child td.us { border-bottom: 2px solid var(--spot); }

/* ================= КОЛОНКИ ================= */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
@media (max-width: 780px) { .cols2 { grid-template-columns: minmax(0,1fr); } }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
@media (max-width: 940px) { .cols3 { grid-template-columns: minmax(0,1fr); } }
.col h3 { font-family: var(--f-huge); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: -.025em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid currentColor; }
.col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.col li { font-size: 15px; line-height: 1.45; padding-left: 18px; position: relative; opacity: .88; }
.col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: currentColor; }

.mapcol h3 { border-bottom-width: 3px; }
.mapcol.a h3 { color: var(--spot-lit); }
.mapcol.b h3 { color: var(--warn); }
.mapcol.c h3 { color: var(--stop); }

/* ================= ВЫНОСКА ================= */
.pull { border-left: 6px solid var(--spot); padding: 4px 0 4px 22px; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.45; max-width: 70ch; margin-top: 34px; }
.pull b { font-weight: 600; }

/* ================= ТАРИФЫ ================= */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 2px solid var(--rule); }
@media (max-width: 940px) { .plans { grid-template-columns: minmax(0,1fr); } }
.plan { padding: 24px 22px; border-right: 2px solid var(--rule); display: flex; flex-direction: column; gap: 13px; }
.plan:last-child { border-right: 0; }
@media (max-width: 940px) { .plan { border-right: 0; border-bottom: 2px solid var(--rule); } .plan:last-child { border-bottom: 0; } }
.plan h3 { font-family: var(--f-huge); font-weight: 900; font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; letter-spacing: -.04em; }
.plan .pr { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--spot); }
.plan p { font-size: 14.5px; color: var(--ink-soft); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.plan li { font-size: 14px; line-height: 1.4; padding-left: 16px; position: relative; color: var(--ink-soft); }
.plan li::before { content: ""; position: absolute; left: 0; top: .58em; width: 8px; height: 2px; background: var(--spot); }
.extras { margin-top: 22px; border: 2px dashed var(--hair); padding: 18px 20px; font-size: 15px; color: var(--ink-soft); max-width: 78ch; }
.extras b { color: var(--ink); font-weight: 600; }

/* ================= FAQ ================= */
.faq { border-top: 2px solid var(--rule); max-width: 88ch; }
.faq details { border-bottom: 2px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative;
  font-family: var(--f-huge); font-weight: 800; font-size: clamp(15px, 1.7vw, 19px);
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--f-mono); font-size: 22px; color: var(--spot); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 66ch; }

/* ================= ФУТЕР ================= */
.foot { border-top: 2px solid var(--rule); padding-block: 30px 40px; }
.foot-in { display: flex; gap: 18px 40px; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
.foot .mark { font-size: 26px; margin: 0; }
.foot .mono { color: var(--mute); }

.print-inline-1{color:var(--spot);margin-bottom:18px}

.print-inline-2{display:flex;flex-direction:column;gap:26px}

.print-inline-3{color:var(--ink-soft);font-size:14px;margin-bottom:6px}

.print-inline-4{color:var(--ink-soft);font-size:14px;margin-bottom:12px}

.print-inline-5{margin-bottom:30px;max-width:22ch}

.print-inline-6{margin-bottom:24px}

.print-inline-7{margin-bottom:8px}

.print-inline-8{margin-bottom:12px;max-width:20ch}

.print-inline-9{color:var(--ink-soft);max-width:66ch;margin-bottom:28px;font-size:16.5px}

.print-inline-10{margin-bottom:30px;max-width:20ch}

.print-inline-11{color:var(--spot)}

.print-inline-12{color:var(--ink)}

.print-inline-13{margin-bottom:26px}

.print-inline-14{margin-bottom:36px}

.print-inline-15{border-left-color:var(--spot-lit)}

.print-inline-16{margin-bottom:30px;max-width:20ch}

.print-inline-17{margin-bottom:30px;max-width:18ch}

.print-inline-18{margin-bottom:24px}

.print-inline-19{margin-bottom:28px}

.print-inline-20{margin-top:8px}

:root{color-scheme:light}html{scroll-padding-top:90px}.go{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.access-link{font:600 12px var(--f-mono);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}.skip-link{position:absolute;left:12px;top:-100px;background:var(--paper);color:var(--ink);padding:12px;z-index:100}.skip-link:focus{top:8px}.form>label.mono{display:block;margin-bottom:12px}.fbox:focus-within{outline:3px solid var(--spot);outline-offset:3px}.band-spot .fbox:focus-within{outline-color:var(--on-spot)}.band-spot :where(a,button,input):focus-visible{outline-color:var(--on-spot)}.band-ink :where(a,button,input):focus-visible{outline-color:var(--on-ink)}.tabs button{min-height:44px}.stamp{color:#B7B5FF;border-color:#B7B5FF;font-size:11px}.mapcol.b h3{color:#E4B766}.mapcol.c h3{color:#FFB1A5}.src,.state{font-size:11px}.access-note,.demo-result{font-size:14px;margin-top:16px}.access-note a{font-weight:600;text-underline-offset:4px}.plans-note{max-width:65ch;margin-bottom:24px;color:var(--ink-soft)}.sample{scroll-margin-top:90px}.tw:focus-visible{outline:3px solid var(--spot);outline-offset:3px}@media(max-width:540px){.fact{grid-template-columns:minmax(0,1fr)}.src{justify-self:start}.sheetbar-in{gap:8px}.mark{font-size:17px}.access-link{font-size:11px}.stamp{white-space:normal}.poster{overflow-wrap:anywhere}.h-xl{font-size:clamp(31px,8.2vw,44px)}.go{padding-inline:16px;font-size:12px}.form{padding:16px}}
