/*
Theme Name: IPweb Ru
Theme URI: https://ipweb.help/
Description: Брендовый сайт о бирже микрозадач IPweb. Направление «Наряд-бланк».
Author: ipweb.help
Version: 1.0.2
Text Domain: ipweb-help
*/

/* ============================================================================
   КОНТРАКТ НАПРАВЛЕНИЯ. Выбран владельцем 17.09.2026 из четырёх вариантов.
   Ключ броска impeccable: d8f58fe4, структура 5. Дальше карточка - закон.

   THESIS
   Сайт владеет одной идеей: у каждого действия на бирже две цены - та, что
   платит рекламодатель, и та, что получает исполнитель. Сайт отказывается быть
   лендингом заработка с одной кнопкой: он показывает обе стороны сделки сразу,
   потому что в IPweb это один кабинет, а не два разных продукта.

   OWN-WORLD
   Типографский наряд-бланк. Бумага фирменной гаммы #F5F4FA, чернила #1F2132,
   единственный акцент #44357B, оттиск печати #CD0684 ровно на одном элементе.
   Один текстовый шрифт Tinos, знак набран Oi. Прямые углы, радиус 2-3px,
   линейки 1px, никаких теней и градиентов. С убранным текстом сайт узнаётся
   по линии отрыва посередине и нумерованным графам слева.

   STORY
   Посетитель за один экран понимает, что IPweb - биржа микрозадач, видит свои
   деньги в графах слева или цену действия справа и уходит по реф-ссылке
   регистрироваться. Дальше страницы отвечают на четыре его вопроса: где взять
   приложение, сколько выходит в день, как забрать деньги, не врут ли отзывы.

   FIRST VIEWPORT
   Шапка со знаком, меню и кнопкой регистрации. Под ней H1 прямым обращением
   и лид, который называет тип сущности словами. Ниже бланк в две половины:
   слева пронумерованные графы ставок исполнителя, справа прайс рекламодателя
   на тонированной подложке с оттиском в правом углу. Реф-кнопка есть в шапке
   и в каждой половине, на 360px она видна без скролла и без бургера.

   FORM
   Бланк, разорванный по вертикали пунктиром. Форма пришла из броска (структура
   5, наряд-заказ) и уцелела после трёх правок владельца: бумага осветлена на
   ступень, подписи корешков сняты, фоновое графление убрано.
   ============================================================================ */

/* ============================================================================
   РАЗВОДКА С СОСЕДЯМИ ПО НИШЕ. Снята по коду их тем на сервере 17.09.2026,
   не по реестру: реестр отстаёт. Ни одна строка ниже не повторяется здесь.

   socpublic.info       - градиентное «небо» на первом экране + шкала ставок;
                          у нас фона нет вовсе, ставки лежат графами бланка.
   vktarget.help        - вертикальный тикер задач .vt-tape, контейнер без
                          max-width; у нас статичный бланк и контейнер 1480.
   vkserfing.help       - недельный календарь .vs-week в hero, индиго #6770e0;
                          у нас нет ни календаря, ни сетки дней.
   smmcode.help         - облако разнокалиберных пилюль .cloud, радиус 22px;
                          у нас прямые углы 2-3px и ни одной пилюли.
   vtope.info           - пьедестал лиги .podium и медали, радиус 20px;
                          у нас нет ни рейтинговых мест, ни медалей.
   venro.info           - биржевое табло тикеров .ticks с жёлтым #FCD535;
                          у нас две колонки сумм в бланке, жёлтого нет.
   v-like.info          - пульт с ЖК-экраном .pult, пиксельный шрифт счётчиков;
                          у нас нет ни приборной панели, ни пиксельного шрифта.
   bosslike.help        - строки обмена .bl-swap на тёмно-синей подложке,
                          двухрежимная тема; у нас одна светлая тема.
   twiboost.help        - единственная тёмная тема ниши, оранжевый #ff7e29,
                          панель прайса .tb-panel; у нас светлая бумага.
   stream-promotion.help- программа эфира .epg и бегущая строка, Yeseva One;
                          у нас нет ни сетки эфира, ни движущихся элементов.

   Отличия по семи осям к предыдущей сборке сетки:
   типографика  - один текстовый шрифт Tinos, сериф в наборе и в заголовках;
   форма        - прямые углы 2-3px, линейки 1px, ни одной карточки с тенью;
   ритм секций  - бланк с вертикальным разрывом вместо ленты секций;
   акцент       - один #44357B, второй тон только оттиск печати;
   первый экран - две половины одного документа, а не текст плюс устройство;
   ховер        - подчёркивание и смена цвета линейки, без сдвига и тени;
   подача чисел - суммы выключены вправо табличными цифрами в графах.
   ============================================================================ */

@font-face{font-family:'IPwebLogo';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ipw-oi-logo.woff2') format('woff2')}
@font-face{font-family:'Tinos';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ipw-tinos-400.woff2') format('woff2')}
@font-face{font-family:'Tinos';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/ipw-tinos-700.woff2') format('woff2')}

:root{
  --paper:#F5F4FA;
  --paper-t:#ECEAF6;
  --paper-d:#E4E1EF;
  --ink:#1F2132;
  --ink2:#302657;
  --brand:#44357B;
  --brand-dark:#302657;
  --stamp:#CD0684;
  --line:#CFC9E4;
  --line-strong:#1F2132;
  --muted:#5B5470;
  --hull:1480px;
  --gutter:clamp(16px,3vw,44px);
  --r:3px;
  --f:'Tinos','Times New Roman',serif;
  --f-logo:'IPwebLogo',Impact,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.6;overflow-x:clip}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--brand-dark)}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
::-webkit-scrollbar-track{background:var(--paper-t)}

.hull{width:100%;max-width:var(--hull);margin:0 auto;padding-inline:var(--gutter)}
.prose{max-width:74ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;z-index:60}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- шапка */
.mast{border-bottom:2px solid var(--line-strong);background:var(--paper);
  position:relative;z-index:20}
.mast__in{display:flex;align-items:center;gap:22px;padding:14px 0}
.mark{font-family:var(--f-logo);font-size:27px;line-height:1;color:var(--ink2);
  text-decoration:none;flex:0 0 auto}
.mark em{font-style:normal;color:var(--stamp)}
.nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.nav__a{color:var(--ink2);text-decoration:none;font-size:16px;padding:4px 0;
  border-bottom:1px solid transparent}
.nav__a:hover{border-bottom-color:var(--brand)}
.nav__a.is-current{border-bottom-color:var(--ink);font-weight:700}
.mast .btn{margin-left:18px}
.burger{display:none;margin-left:auto;background:transparent;border:2px solid var(--ink);
  color:var(--ink);padding:9px 12px;font:inherit;font-size:15px;cursor:pointer;border-radius:var(--r)}
.drawer{display:none;border-top:1px solid var(--line);padding:10px 0 16px}
.drawer.is-open{display:block}
.drawer a{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none}
.drawer a.is-current{font-weight:700}

/* ---------------------------------------------------------------- кнопки */
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:13px 24px;font-weight:700;border-radius:var(--r);border:2px solid var(--brand);
  white-space:nowrap}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:9px 16px;font-size:15px}
.btn__short{display:none}

/* ---------------------------------------------------------------- первый экран */
.head{padding:34px 0 26px;border-bottom:1px solid var(--line)}
h1{font-size:clamp(30px,4vw,54px);line-height:1.06;margin:0 0 14px;max-width:20ch}
.lead{margin:0;max-width:74ch;font-size:19px}
.crumbs{font-size:15px;color:var(--muted);padding:12px 0 0}
.crumbs a{color:var(--muted)}

.sheet{display:grid;grid-template-columns:1fr 1fr;position:relative;
  border-bottom:2px solid var(--line-strong)}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  border-left:2px dashed var(--line-strong);transform:translateX(-1px)}
.half{padding:28px var(--gutter) 34px}
.half--buy{background:var(--paper-t)}
.half h2{font-size:clamp(24px,2.7vw,36px);line-height:1.12;margin:0 0 12px;max-width:18ch}
.half p{margin:0 0 18px;max-width:46ch}

.grafs{counter-reset:g;margin:0 0 24px;border-top:1px solid var(--line)}
.graf{counter-increment:g;display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.graf::before{content:counter(g);color:var(--stamp);font-size:15px;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums}
.graf b{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;font-size:19px}

.price-rows{margin:0 0 24px;border-top:1px solid var(--line)}
.price-rows .r{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.price-rows .r b{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

.acts{display:flex;justify-content:space-between;align-items:center;
  column-gap:40px;row-gap:34px;flex-wrap:wrap}
.stamp{border:2px solid var(--stamp);color:var(--stamp);margin-left:auto;padding:7px 13px;
  transform:rotate(-4deg);font-weight:700;letter-spacing:.05em;font-size:15px;white-space:nowrap}

/* ---------------------------------------------------------------- секции */
.sec{padding:40px 0}
.sec--tint{background:var(--paper-t);border-block:1px solid var(--line)}
.sec h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin:0 0 18px;max-width:26ch}
.sec h3{font-size:21px;margin:26px 0 10px}
.sec p{margin:0 0 16px;max-width:74ch}
.sec ul,.sec ol{max-width:74ch;padding-left:22px;margin:0 0 16px}
.sec li{margin-bottom:7px}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
.cols--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

.table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px}
.table th,.table td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.table th{font-weight:700;border-bottom-width:2px;border-bottom-color:var(--line-strong)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;padding-right:0}

.panel{border:1px solid var(--line);background:#fff;padding:22px 24px;border-radius:var(--r)}
.panel + .panel{margin-top:16px}
.panel h3{margin-top:0}

.note-line{border-left:3px solid var(--stamp);padding:4px 0 4px 16px;margin:0 0 18px;
  max-width:74ch;color:var(--ink)}

/* ---------------------------------------------------------------- звёзды */
.stars{position:relative;display:inline-block;line-height:0;color:var(--line)}
.stars svg{fill:currentColor}
.stars__fill{position:absolute;top:0;left:0;bottom:0;overflow:hidden;color:var(--stamp);
  white-space:nowrap}
.score{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;flex-wrap:wrap}
.score__n{font-size:44px;font-weight:700;font-variant-numeric:lining-nums tabular-nums}

/* ---------------------------------------------------------------- отзывы */
.voices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.voice{border-top:2px solid var(--line-strong);padding:16px 0 0}
.voice__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-bottom:8px;flex-wrap:wrap}
.voice__who{font-weight:700;font-style:normal}
.voice__date{color:var(--muted);font-size:15px;font-variant-numeric:lining-nums tabular-nums}
.voice p{margin:8px 0 0}

/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;background:transparent;border:0;padding:16px 36px 16px 0;
  font:inherit;font-weight:700;font-size:18px;color:var(--ink);cursor:pointer;position:relative}
.faq__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--stamp);font-size:22px}
.faq__i.is-open .faq__q::after{content:"–"}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.faq__i.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{margin:0 0 16px;max-width:74ch}

/* ---------------------------------------------------------------- подвал */
.apron{border-top:2px solid var(--line-strong);background:var(--paper-d);padding:30px 0 22px;
  margin-top:20px}
.apron__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:26px}
.apron a:not(.btn){color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.apron a:not(.btn):hover{border-bottom-color:var(--brand)}
.apron h3{font-size:16px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700}
.apron ul{list-style:none;margin:0;padding:0}
.apron li{margin-bottom:8px}
.apron__cta{margin-top:28px}
.apron__note{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;
  color:var(--muted);font-size:15px;max-width:90ch}

/* ---------------------------------------------------------------- 404 */
.lost{padding:60px 0 40px}
.lost__code{font-family:var(--f-logo);font-size:clamp(60px,12vw,140px);line-height:.9;
  color:var(--stamp);margin:0 0 18px}

/* ---------------------------------------------------------------- адаптив
   Брейкпоинты темы: 1180 (бургер), 1024, 860, 700, 560, 470, 380, 345 */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:inline-block}
  .mast .btn{margin-left:14px}
}
@media (max-width:1024px){
  .sheet{grid-template-columns:minmax(0,1fr)}
  .sheet::before{display:none}
  .half--buy{border-top:2px dashed var(--line-strong)}
  .cols,.cols--7-5,.voices{grid-template-columns:minmax(0,1fr)}
  .apron__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .sec{padding:32px 0}
}
@media (max-width:700px){
  .apron__grid{grid-template-columns:minmax(0,1fr)}
  .table--stack thead{display:none}
  .table--stack tr{display:block;border-bottom:2px solid var(--line-strong);padding:10px 0}
  .table--stack td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 0;
    text-align:right}
  .table--stack td::before{content:attr(data-label);font-weight:700;text-align:left;
    padding-right:12px}
  .table--stack td.num{text-align:right}
}
@media (max-width:560px){
  body{font-size:16px}
  .lead{font-size:17px}
}
/* Порядок жертв в шапке канонический: сперва подпись кнопки, потом зазоры
   и кегль, и только в самом низу - размер знака. Знак не гаснет вовсе. */
@media (max-width:470px){
  .btn--head .btn__full{display:none}
  .btn--head .btn__short{display:inline}
  .mast__in{gap:10px}
  .burger{padding:8px 10px}
}
@media (max-width:380px){
  .btn--head{padding:10px 12px;font-size:15px}
  .mast__in{gap:8px;padding:12px 0}
  .mark{font-size:24px}
  .burger{padding:7px 9px;font-size:14px}
  :root{--gutter:14px}
}
@media (max-width:345px){
  .mark{font-size:21px}
  .btn--head{padding:9px 10px;font-size:14px}
  .burger{padding:6px 8px;font-size:13px}
  :root{--gutter:12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .mast .btn,.burger,.drawer,.apron__cta{display:none}
}