/* ─── Витрина skrably.com · листы 12-website и 11-pricing ──────────────────────
   Сайт до входа: главная «/», тарифы, поддержка, правила, приватность, блог.
   Собран из ТЕХ ЖЕ элементов, что приложение, — «шов между сайтом и доской не
   виден» (лист 12·5). Что откуда берётся:

     токены      css/tokens.css      --paper/--paper2/--graphite/--pencil/--marker
     шрифты      css/base.css        локальные Neucha/Caveat (Google Fonts ✕, §1)
     компоненты  css/components.css  .note .chip .ava .check .cmt .frame
     тарифы      css/paywall.css     .pw-plan .pw-blts .pw-cta .pw-tag .pw-lamp
     ночь        css/dark.css        те же токены + оверрайды .pw-*

   Здесь — ТОЛЬКО то, чего в приложении нет: хром витрины (анонс, навбар,
   дропдаун, бургер-шит, футер) и типографика маркетинговых секций.

   ОТСТУПЫ — приложения, а не блюпринта. Контентная полоса 980 + внутренние 20:
   ровно как header.app/.tasks-wrap/.cal-wrap/#shelf (screens.css/tasks.css), —
   поэтому логотип витрины и логотип доски стоят на одной вертикали, а переход
   «сайт → приложение» не двигает контент. Блюпринт рисовал контейнер 920 —
   это единственное осознанное отступление от листа 12 (см. шапку landing.html).

   Рисованные рамки — на ::before с filter:url(#squiggle) (НЕ #sqg): универсальные
   гейты base.css (body.light-fx / prefers-reduced-motion → filter:none) гасят их
   сами (перф-контракт §1). Скругления r=h/4 в px — в системе нет --rNN.
   --gold объявлен локально на .site: глобального токена нет, каждый экран
   объявляет свой (см. login.css §ВАЖНО и profile.css). */

.site{
  --gold:#D9A832;
  --site-w:980px;          /* = --hdr-w приложения (screens.css) */
  --site-pad:20px;         /* = горизонтальный внутренний отступ контента */
  min-height:100vh;
}
.site a{color:inherit; text-decoration:none;}
.site button{font-family:inherit; color:inherit; background:none; border:none; cursor:pointer;}

/* «Лифт»: кнопка (вдавливание 90 мс) + лампа (маркер-вспышка 360 мс).
   Лампа — .pw-lamp из paywall.css, тот же класс и тот же кейфрейм. */
.site [data-press]{transition:transform .09s ease;}
.site [data-press]:active{transform:scale(.96);}

/* Контентная полоса — идиома приложения (980 по центру + 20 по бокам) */
.st-wrap{max-width:var(--site-w); margin:0 auto; padding:0 var(--site-pad);}

/* Маркер-выделение слова — приём приложения (.score .tally, .range.today-mark,
   активный пункт нава): жёлтая полоса ЗА текстом с рваными радиусами. Заменяет
   символ «✎» в заголовках: в системных шрифтах он приезжает цветным Apple Color
   Emoji, а эмодзи в UI запрещены (закон: только line-иконки). */
/* isolation:isolate ОБЯЗАТЕЛЕН: без своего стекинг-контекста ::after с z-index:-1
   проваливается за фон родителя (.st-cta — бумага2) и полоса пропадает. */
.st-mark{position:relative; white-space:nowrap; isolation:isolate;}
.st-mark::after{
  content:""; position:absolute; z-index:-1; left:-6px; right:-6px;
  bottom:.2em; height:.34em; background:var(--marker);
  border-radius:40px 8px 50px 8px / 8px 50px 8px 40px; transform:rotate(-1deg);
}

/* ── announcement 40 · единственная маркер-полоса страницы ──────────────────── */
.st-ann{
  height:40px; background:var(--marker); position:relative;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:0 48px 0 16px; font-size:14px; color:var(--graphite);
  transition:transform .24s ease, opacity .24s ease;
}
.st-ann::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-bottom:2px solid var(--graphite); filter:url(#squiggle);
}
.st-ann .txt{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.st-ann .go{
  font-family:'Caveat',cursive; font-weight:700; font-size:16px; color:var(--graphite);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap; flex:none;
}
.st-ann .x{
  position:absolute; right:8px; top:8px; width:24px; height:24px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:var(--graphite-soft);
}
.st-ann .x svg{width:14px; height:14px;}
.st-ann.off{transform:translateY(-40px); opacity:0;}

/* ── navbar 64 (моб 56), sticky · высота НЕ меняется при скролле ────────────── */
.st-nav{
  position:sticky; top:0; z-index:6; background:var(--paper2);
  height:64px; display:flex; align-items:center; gap:24px;
  padding:0 max(var(--site-pad), calc((100% - var(--site-w)) / 2 + var(--site-pad)));
}
.st-nav::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-bottom:2px solid var(--graphite); filter:url(#squiggle);
}
/* тень при скролле — только opacity, контент не дёргается (лист 12·4) */
.st-nav::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px;
  background:linear-gradient(rgba(44,42,38,.14), rgba(44,42,38,0));
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.st-nav.sc::after{opacity:1;}

/* Словомарка — .logo приложения (screens.css): h1 Caveat + красный росчерк.
   Три правила скопированы сюда, чтобы не тянуть на витрину весь screens.css
   (757 строк каркаса доски) ради логотипа — §1. */
.site .logo{display:flex; flex-direction:column; line-height:1; flex:none;}
.site .logo h1{font-size:2rem; font-weight:700; letter-spacing:.5px;}
.site .logo svg{width:100%; max-width:92px; height:10px; margin-top:-2px;}

.st-links{display:flex; gap:24px; flex:1; justify-content:center; align-items:center; min-width:0;}
.st-navb{font-size:15px; color:var(--graphite-soft); position:relative; padding:4px 2px; white-space:nowrap;}
.st-navb.on{color:var(--graphite);}
/* активный пункт = маркер-подчёрк 8 под −1° (а не смена шрифта) */
.st-navb.on::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:8px;
  background:var(--marker); z-index:-1; transform:rotate(-1deg);
}

/* дропдаун «возможности»: панель 320 R16, пункт 48 R12, шеврон 180° */
.st-drop{position:relative; display:inline-flex;}
.st-drop > .st-navb{display:inline-flex; align-items:center; gap:4px;}
.st-drop .chev{width:14px; height:14px; transition:transform .24s ease;}
.st-drop.open .chev{transform:rotate(180deg);}
.st-dd{
  position:absolute; left:50%; top:calc(100% + 12px); width:320px; z-index:9;
  background:var(--paper2); border-radius:16px; padding:8px; text-align:left;
  opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-8px);
  transition:opacity .24s ease, transform .24s ease;
}
.st-dd::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);
}
.st-drop.open .st-dd{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.st-dd .it{
  display:flex; align-items:center; gap:12px; width:100%; height:48px;
  padding:0 8px; border-radius:12px;
}
.st-dd .it:hover{background:var(--marker);}
.st-dd .it svg{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.st-dd .it .tt{flex:1; min-width:0; line-height:1.05;}
.st-dd .it .tt b{
  display:block; font-family:'Caveat',cursive; font-weight:700; font-size:16px;
  color:var(--graphite); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-dd .it .tt span{
  display:block; font-size:11px; color:var(--pencil); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Кнопки шапки/шита — идиома login.css: ghost 40/R10 dashed (.a-back),
   gold 40/R10 solid со штрихом 2.0 (.a-pri). Один gold на шапку. */
.st-btn{
  height:40px; padding:0 16px; border-radius:10px; position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Neucha',cursive; font-size:14px; color:var(--graphite-soft);
}
.st-btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle);
}
.st-btn.gold{
  background:var(--gold); color:#fff;
  font-family:'Caveat',cursive; font-weight:700; font-size:17px;
}
.st-btn.gold::before{border:2px solid var(--graphite);}

.st-burg{
  display:none; width:40px; height:40px; border-radius:10px; position:relative;
  color:var(--graphite-soft); align-items:center; justify-content:center; flex:none;
}
.st-burg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);
}
.st-burg svg{width:20px; height:20px;}

/* ── бургер-шит (≤760): въезд сверху 240, пункт 48, саб 40 ──────────────────── */
.st-menu{
  position:fixed; left:0; right:0; top:0; z-index:20; background:var(--paper2);
  padding:16px 16px 24px; transform:translateY(-102%); transition:transform .24s ease;
}
.st-menu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-bottom:2px solid var(--graphite); filter:url(#squiggle);
}
.st-menu.on{transform:translateY(0);}
.st-menu .mtop{display:flex; align-items:center; height:40px; gap:8px;}
.st-menu .mtop .logo{flex:1; min-width:0;}
.st-menu .mtop .logo h1{font-size:1.55rem;}
.st-menu .mx{
  width:40px; height:40px; border-radius:10px; position:relative; flex:none;
  color:var(--graphite-soft); display:flex; align-items:center; justify-content:center;
}
.st-menu .mx::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);
}
.st-menu .mx svg{width:18px; height:18px;}
.st-menu .ml{display:flex; flex-direction:column; margin-top:8px;}
.st-menu .ml > a,
.st-menu .ml > button{
  height:48px; font-size:17px; color:var(--graphite-soft); text-align:left;
  border-bottom:1.4px dashed var(--pencil-faint); display:flex; align-items:center;
}
.st-menu .ml > a.on{color:var(--graphite); background:var(--marker);}
.st-menu .acc{justify-content:space-between; gap:8px; width:100%;}
.st-menu .acc .chev{width:16px; height:16px; transition:transform .24s ease; flex:none;}
.st-menu .acc.open .chev{transform:rotate(180deg);}
.st-menu .sub{display:none; flex-direction:column; border-bottom:1.4px dashed var(--pencil-faint);}
.st-menu .sub.on{display:flex;}
.st-menu .sub a{
  height:40px; font-size:15px; color:var(--graphite-soft); border-bottom:none;
  display:flex; align-items:center; gap:10px; padding-left:36px;
}
.st-menu .sub a svg{width:20px; height:20px; flex:none; color:var(--pencil);}
.st-menu .mrow{display:flex; gap:12px; margin-top:16px;}
.st-menu .mrow .st-btn{flex:1;}
html.st-lock, html.st-lock body{overflow:hidden;}   /* шит открыт — фон не скроллится */

/* ── секции ─────────────────────────────────────────────────────────────────── */
/* ВАЖНО: только padding-top/bottom. Шорткат `padding:48px 0` затёр бы
   горизонтальные 20/16 от .st-wrap (тот же элемент несёт оба класса). */
.st-sec{padding-top:48px; padding-bottom:48px;}
.st-sec.tight{padding-top:32px; padding-bottom:32px;}
/* надзаголовок — карандашная пометка, НЕ gold: gold принадлежит только главному
   действию секции (лист 11/12: «один gold на секцию» — тег+CTA тарифов и так пара) */
.st-eyebrow{font-family:'Caveat',cursive; font-weight:700; font-size:15px; color:var(--pencil);}
.st-sec h2{font-size:40px; line-height:1.05; color:var(--graphite); margin:2px 0 6px;}
.st-sub{font-size:16px; color:var(--graphite-soft); max-width:44em; line-height:1.45;}
.st-sec h2 + .st-sub{margin-bottom:24px;}

/* Карточка витрины = идиома .pw-blts / .login-box: бумага2, чистый R16,
   контур 2.0 через ::before. Никаких box-shadow-теней (закон). */
.st-card{position:relative; background:var(--paper2); border-radius:16px; padding:20px;}
.st-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);
}
.st-card.ghost::before{border:1.5px dashed var(--pencil);}

/* ── герой ──────────────────────────────────────────────────────────────────── */
.st-hero{padding-top:56px; padding-bottom:40px; display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center;}
.st-hero h1{font-size:56px; line-height:1.02; color:var(--graphite);}
.st-lead{font-size:17px; color:var(--graphite-soft); margin:16px 0 24px; max-width:30em; line-height:1.5;}
.st-row{display:flex; gap:16px; flex-wrap:wrap;}
.st-nt{margin-top:16px; font-size:12px; color:var(--pencil);}

/* Большая кнопка 56/R14: gold — один акцент на секцию, ghost — второй по рангу */
.st-big{
  height:56px; padding:0 32px; border-radius:14px; position:relative;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
}
.st-big::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:14px; filter:url(#squiggle);
}
.st-big.gold{
  background:var(--gold); color:#fff;
  font-family:'Caveat',cursive; font-weight:700; font-size:20px;
}
.st-big.gold::before{border:2px solid var(--graphite);}
.st-big.ghost{color:var(--graphite-soft); font-size:15px;}
.st-big.ghost::before{border:1.5px dashed var(--pencil);}

/* Мок доски — НАСТОЯЩИЕ строки приложения: .task.in-box + .ttl/.tmeta/.mchip/
   .tick/.tmk (css/tasks.css) + .chip/.ava (components.css). Ни одного элемента,
   нарисованного специально для сайта. Роль «ящика» играет .st-card: карандашную
   подложку настоящего ящика рисует JS (skTabbar.mount), а витрина обходится без
   app-скриптов (§1) — контур даёт тот же штрих 2.0 через ::before.
   Мок статичен: гасим курсоры-обещания, чтобы не было немых кликов. */
.st-mock{padding:14px 16px 16px;}
.st-mock .mh{font-family:'Caveat',cursive; font-weight:700; font-size:22px; color:var(--graphite);}
.st-mock .mu{width:120px; height:8px; background:var(--marker); transform:rotate(-1deg); margin:2px 0 12px;}
.st-mock .boxwrap{padding:0;}
.st-mock .task, .st-mock .tick, .st-mock .towner{cursor:default; touch-action:auto;}
.st-mock .towner:hover{transform:none;}
.st-mock .xp{
  font-family:'Caveat',cursive; font-weight:700; font-size:.9rem; color:var(--graphite);
  background:var(--marker); border-radius:6px 4px 7px 5px; padding:1px 8px; line-height:1.25;
}

/* ── сетка возможностей ─────────────────────────────────────────────────────── */
.st-feats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.st-feats .st-card{display:flex; flex-direction:column;}
.st-feats svg{width:24px; height:24px; color:var(--graphite-soft);}
.st-feats h3{font-size:22px; color:var(--graphite); margin:12px 0 4px;}
.st-feats p{font-size:14px; color:var(--graphite-soft); line-height:1.45;}

/* ── тарифы: обёртка вокруг настоящих .pw-* (paywall.css, лист 11) ──────────── */
.st-plans{max-width:520px;}          /* = кап шитов/баров приложения */
.st-plans .pw-plan:first-of-type{margin-top:0;}
.st-plans .pw-cta{max-width:520px;}
.st-pnote{font-size:12px; color:var(--pencil); margin-top:12px; max-width:520px;}

/* ── вопрос-ответ (тарифы · поддержка) ──────────────────────────────────────── */
.st-qa{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;}
.st-qa h3{font-size:20px; color:var(--graphite); margin-bottom:6px;}
.st-qa p{font-size:14px; color:var(--graphite-soft); line-height:1.5;}
.st-qa a{border-bottom:1.4px dashed var(--pencil);}

/* ── документ (правила · приватность) ───────────────────────────────────────── */
.st-doc{max-width:720px;}
.st-doc h2{font-size:28px; margin:32px 0 8px;}
.st-doc h2:first-child{margin-top:0;}
.st-doc h3{font-size:20px; margin:20px 0 6px; color:var(--graphite);}
.st-doc p{font-size:15px; color:var(--graphite-soft); line-height:1.55; margin-bottom:10px;}
.st-doc ul{margin:0 0 10px; padding-left:20px;}
.st-doc li{font-size:15px; color:var(--graphite-soft); line-height:1.55; margin:4px 0;}
.st-doc a{border-bottom:1.4px dashed var(--pencil);}
.st-doc .upd{font-size:12px; color:var(--pencil); margin-bottom:20px;}

/* ── CTA-секция: один gold + один ghost ─────────────────────────────────────── */
.st-cta{
  position:relative; margin:8px 0 40px; padding:64px 24px; text-align:center;
  background:var(--paper2); border-radius:16px;
}
.st-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:16px; filter:url(#squiggle);
}
/* угловая штриховка-«разрез» — тот же словарь штриховок, что в приложении */
.st-cta .hx{
  position:absolute; width:64px; height:32px; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(-45deg, transparent 0 4.5px, rgba(217,168,50,.5) 4.5px 6px);
}
.st-cta .hx.a{left:16px; top:16px;}
.st-cta .hx.b{right:16px; bottom:16px;}
.st-cta .hh{font-family:'Caveat',cursive; font-weight:700; font-size:44px; line-height:1.05; color:var(--graphite);}
.st-cta .ss{font-size:16px; color:var(--graphite-soft); margin-top:12px;}
.st-cta .st-row{justify-content:center; margin-top:24px;}

/* ── футер-бумага: тёмной плиты нет, чернота только в штрихе ────────────────── */
.st-foot{position:relative; padding:32px 0 24px; background:var(--paper);}
.st-foot::before{
  content:""; position:absolute; left:0; right:0; top:0; pointer-events:none;
  border-top:2px solid var(--graphite); filter:url(#squiggle);
}
.st-cols{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px;}
.st-col h4{font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite);
  height:32px; display:flex; align-items:center;}
.st-col a{
  display:flex; align-items:center; height:32px; font-size:14px; color:var(--graphite-soft);
  text-decoration:underline dashed; text-underline-offset:3px;
}
.st-col a:hover{background:var(--marker);}
.st-bot{
  margin-top:24px; padding-top:8px; min-height:48px; display:flex; align-items:center;
  gap:16px; flex-wrap:wrap; border-top:1.5px dashed var(--pencil-faint);
  font-size:13px; color:var(--pencil);
}
.st-bot .sp{flex:1;}
/* чип 32/R8 — рамка сплошная, как у .chip приложения, но по размерной шкале листа */
.st-chip{
  height:32px; padding:0 12px; border-radius:8px; position:relative; flex:none;
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--graphite-soft);
}
.st-chip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:8px; filter:url(#squiggle);
}
.st-chip svg{width:14px; height:14px;}

/* ── адаптив ≤760: ссылки уезжают в бургер-шит, ничего не пропадает ─────────── */
@media (max-width:760px){
  .st-links, .st-nav .st-btn{display:none;}
  .st-burg{display:inline-flex; order:2;}   /* лого слева, бургер справа: DOM-порядок листа не меняем */
  .st-nav{height:56px; gap:12px; justify-content:space-between;
    padding:0 max(16px, calc((100% - var(--site-w)) / 2 + 16px));}
  .site .logo h1{font-size:1.55rem;}
  .st-wrap{padding:0 16px;}
  .st-hero{grid-template-columns:1fr; gap:24px; padding-top:36px; padding-bottom:32px;}
  .st-hero h1{font-size:38px;}
  .st-row .st-big{flex:1; min-width:220px;}
  .st-sec{padding-top:32px; padding-bottom:32px;}
  .st-sec h2{font-size:30px;}
  .st-feats{grid-template-columns:1fr;}
  .st-qa{grid-template-columns:1fr;}
  .st-cta{padding:40px 16px;}
  .st-cta .hh{font-size:32px;}
  .st-cta .st-row .st-big{width:100%;}
  .st-cols{grid-template-columns:1fr 1fr; gap:8px 24px;}
  .st-col h4{margin-top:8px;}
}
@media (max-width:420px){
  .st-cols{grid-template-columns:1fr;}
  .st-ann{font-size:13px; padding-left:12px;}
}