/* Стили публичного сайта. Токены бренда те же, что в приложении, но набраны
   здесь: сайт собирается отдельно и не тянет на себя сборщик Mini App. */
:root{
  --canvas:#FAF6EF;--paper:#FFFDF8;--paper-soft:#F7EFE5;
  --ink:#24211F;--muted:#77736F;
  --terracotta:#A34730;--terracotta-hover:#8F3B28;--forest:#285442;
  --sage:#E7EEE6;--blush:#F3E1D8;--stroke:#E7DCD0;
  --display:'Playfair Display',Georgia,serif;
  --ui:'Manrope',system-ui,Arial,sans-serif;
  --wide:1080px;

  /* Глубина. Взято из приложения: там поверхность — не белый прямоугольник,
     а лист бумаги с подсветкой из угла и мягкой тенью под ним. */
  --paper-mix:
    radial-gradient(120% 70% at 8% 0%, #FBF0E6 0%, rgba(251,240,230,0) 58%),
    radial-gradient(90% 60% at 100% 100%, #F2E9DC 0%, rgba(242,233,220,0) 60%),
    var(--paper);
  --lift-sm: 0 2px 6px rgba(80,60,40,.06);
  --lift:    0 10px 26px rgba(90,66,44,.10);
  --lift-lg: 0 18px 44px rgba(90,66,44,.16);
  --lift-cta:0 8px 18px rgba(163,71,48,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--terracotta)}
main{max-width:var(--wide);margin:0 auto;padding:0 20px}
section{margin:56px 0}
h1{font-family:var(--display);font-size:clamp(30px,5vw,46px);line-height:1.1;font-weight:800;margin:0 0 18px}
h2{font-family:var(--display);font-size:clamp(23px,3.4vw,30px);font-weight:700;margin:0 0 18px}
h3{font-family:var(--display);font-size:19px;font-weight:700;margin:0 0 8px}
p{margin:0 0 14px}
.lead{font-size:17px;line-height:1.65;color:#4a4642;max-width:34em}
.hint{font-size:13.5px;color:var(--muted);margin-top:12px}

/* шапка */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:var(--wide);margin:0 auto;padding:18px 20px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:19px;font-weight:700;color:var(--ink);text-decoration:none}
.mark{width:40px;height:40px;border-radius:50%;display:block;object-fit:cover}
.top nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.top nav a{font-size:14.5px;font-weight:700;text-decoration:none;color:var(--ink)}
.top nav a.on{color:var(--terracotta)}
.top nav a.go{display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);color:var(--terracotta);border:1.5px solid var(--terracotta);
  padding:10px 18px;border-radius:14px;box-shadow:var(--lift-sm);
  transition:background 160ms ease,color 160ms ease,transform 160ms ease,box-shadow 160ms ease}
.top nav a.go:hover{background:var(--terracotta);color:#fff;transform:translateY(-1px);
  box-shadow:var(--lift-cta)}
.top nav a.go svg{flex:none}

/* ============================================================== главная */

.cta{display:inline-flex;align-items:center;gap:9px;background:var(--terracotta);color:#fff;
  text-decoration:none;padding:15px 28px;border-radius:16px;font-weight:800;font-size:15.5px;
  box-shadow:var(--lift-cta);transition:transform 160ms ease,box-shadow 160ms ease,background 160ms ease}
.cta:hover{background:var(--terracotta-hover);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(163,71,48,.30)}
.cta:active{transform:translateY(0);box-shadow:0 4px 12px rgba(163,71,48,.22)}

.kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.kicker.light{color:rgba(255,253,248,.62)}
.sub{font-size:15px;color:var(--muted);margin:-8px 0 26px}
.fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:18px 0 0}
.cta .arr{display:inline-block;transition:transform 160ms ease}
.cta:hover .arr{transform:translateX(3px)}
.cta.light{background:#fff;color:var(--forest);box-shadow:none}
.cta.light:hover{background:#F4EFE7}
.more{display:inline-block;font-size:14px;font-weight:700;text-decoration:none;color:var(--terracotta)}
.more.muted{color:var(--muted)}

/* заглушка под ненарисованную картинку: видно, что именно нужно заказать */
.ph{position:relative;border-radius:16px;background:var(--paper-soft);
  border:1px dashed #D9C9B8;min-height:180px;display:grid;place-items:center;overflow:hidden}
.ph::after{content:attr(data-need);display:block;max-width:22em;padding:20px;
  font-size:12px;line-height:1.5;color:#9a8e80;text-align:center}
.ph.dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);min-height:320px}
.ph.dark::after{color:rgba(255,253,248,.55)}

/* ---------------------------------------------------- 01 первый экран */
.hero{max-width:var(--wide);margin:0 auto;padding:18px 20px 40px;
  display:grid;grid-template-columns:1fr minmax(320px,44%);gap:36px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,54px);line-height:1.06;margin:0 0 20px}
.hero h1 em{font-style:normal;color:var(--terracotta)}
.hero .lead{margin-bottom:26px}
.hero-art{position:relative}
.hero-art img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 40px rgba(90,60,40,.14))}

/*
 * Муза чуть дышит: приём тихий намеренно — страница про стихи, а не про
 * спецэффекты. Амплитуда в восемь пикселей и восемь секунд на цикл читаются
 * как живое изображение, а не как анимация.
 */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .hero-art img{animation:muse-float 8s ease-in-out infinite}
}
@keyframes muse-float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(-.35deg)}
}

/* -------------------------------------------------------- 02 мини-демо */
.demo{max-width:var(--wide);margin:0 auto 70px;padding:0 20px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start}
.demo-form{background:var(--paper-mix);border:1px solid var(--stroke);border-radius:22px;padding:26px;box-shadow:var(--lift)}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.demo-head h2{margin:0}
.segment{display:inline-flex;background:var(--paper-soft);border-radius:14px;padding:4px;gap:2px}
.segment button{appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--ui);font-size:13px;font-weight:700;color:var(--muted);
  padding:8px 14px;border-radius:11px}
.segment button.on{background:var(--terracotta);color:#fff}
.field{position:relative;display:block;margin-bottom:14px}
.field textarea{width:100%;resize:vertical;border:1px solid var(--stroke);border-radius:14px;
  background:var(--canvas);padding:14px 14px 26px;font-family:var(--ui);font-size:14px;
  line-height:1.55;color:var(--ink)}
.field textarea:focus{outline:none;border-color:var(--terracotta)}
.field .counter{position:absolute;right:12px;bottom:8px;font-size:11px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pill{appearance:none;cursor:pointer;background:var(--paper);border:1px solid var(--stroke);
  border-radius:999px;padding:7px 14px;font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--ink)}
.pill.on{background:var(--blush);border-color:#DCC6BB;color:var(--terracotta)}
.pick-label{font-size:12.5px;font-weight:800;color:var(--muted);margin:0 0 10px}
/* лента вместо сетки: пять портретов в ряд отодвигали кнопку за экран,
   а до неё человек должен доходить сразу */
.poet-row{display:grid;grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 60px)/7);
  gap:10px;margin-bottom:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:thin;align-items:start}
.poet-row>*{scroll-snap-align:start}
.poet-row::-webkit-scrollbar{height:5px}
.poet-row::-webkit-scrollbar-thumb{background:var(--stroke);border-radius:3px}
.pick-label .swipe{float:right;font-weight:700;color:var(--muted);opacity:.7}
.poet-pick{appearance:none;background:none;border:0;padding:0;cursor:pointer;text-align:center;font-family:var(--ui)}
.poet-pick img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:12px;border:2px solid transparent;display:block}
.poet-pick span{display:block;font-size:11px;font-weight:700;margin-top:6px;color:var(--muted)}
.poet-pick img{box-shadow:var(--lift-sm);transition:transform 160ms ease,box-shadow 160ms ease}
.poet-pick:hover img{transform:translateY(-2px);box-shadow:var(--lift)}
.poet-pick.on img{border-color:var(--terracotta);box-shadow:0 0 0 4px var(--blush)}

/* дверь в полный каталог стоит в том же ряду, что и портреты */
.own-pick{text-decoration:none;color:inherit}
.own-pick .own-art{
  display:grid;place-items:center;aspect-ratio:1/1;border-radius:12px;
  background:linear-gradient(150deg,var(--blush),#F7E8DE 60%,#F1E3D6);
  border:2px solid transparent;color:var(--terracotta);
  box-shadow:var(--lift-sm);transition:transform 160ms ease,box-shadow 160ms ease}
.own-pick:hover .own-art{transform:translateY(-2px);box-shadow:var(--lift)}
.own-pick span:last-child{display:block;font-size:11px;font-weight:700;margin-top:6px;
  color:var(--terracotta)}
.poet-pick.on span{color:var(--terracotta)}

.demo-sample{margin:0}
.paper{position:relative}
.paper img{width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 14px 34px rgba(90,60,40,.16)}
/* текст лежит поверх листа: так пример меняется строкой кода, а не перерисовкой */
/*
 * Текст лежит внутри листа и не может из него вылезти: длинное стихотворение
 * (у Маяковского бывает под восемьдесят строк) обрезается с затуханием,
 * а «Читать дальше» открывает прокрутку внутри той же бумаги. Растягивать
 * картинку под текст нельзя — поплывут нарисованные ветви по краям.
 */
.paper-scroll{position:absolute;inset:19% 15% 14% 20%;overflow:hidden}
.paper-scroll::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(rgba(253,250,244,0), rgba(253,250,244,.96));
  transition:opacity 200ms ease;
}
.paper-scroll.open{overflow-y:auto;scrollbar-width:thin}
.paper-scroll.open::after{opacity:0}
.paper-text{position:static}
.paper-text .poem{font-family:var(--font-poem,Georgia,serif);font-size:clamp(9.5px,.92vw,12.5px);
  line-height:1.8;color:#3a332c;margin:0;
  /* длинная строка не должна выходить на поля: переносим с отступом,
     как в приложении */
  padding-left:12px;text-indent:-12px}
.paper-text .sig{font-family:var(--display);font-style:italic;font-size:clamp(9px,.88vw,11.5px);
  color:#8a7f72;margin:12px 0 0;text-align:right}
/*
 * Ожидание — тот же приём, что на экране создания в приложении: парящее перо,
 * заголовок и три точки. Человек, пришедший с сайта в приложение, должен
 * узнавать одно и то же место, а не два разных продукта.
 */
.paper-wait{
  position:absolute;inset:19% 15% 14% 20%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:0;
  background:rgba(253,250,244,.9);backdrop-filter:blur(1px);border-radius:10px;
}
/* собственный display перебивает браузерное [hidden]{display:none} —
   без этой строки скрытый блок продолжает показываться */
.paper-wait[hidden]{display:none}
.paper-wait .quill{animation:quill-float 2.8s ease-in-out infinite}
@keyframes quill-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
.paper-wait b{font-family:var(--display);font-weight:700;font-size:20px;margin:18px 0 8px}
.paper-wait span{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:210px}
.dots3{display:flex;gap:7px;margin-top:18px}
.dots3 i{width:7px;height:7px;border-radius:50%;background:var(--terracotta);opacity:.3;
  animation:blink 1.4s infinite}
.dots3 i:nth-child(2){animation-delay:.2s}
.dots3 i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .paper-wait .quill{animation:none}
  .dots3 i{animation:none;opacity:.6}
}

/* готовый текст проступает, а не возникает рывком */
.paper-text.fresh{animation:ink 700ms ease-out both}
@keyframes ink{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

button.paper-more{
  position:absolute;left:50%;transform:translateX(-50%);bottom:5%;
  appearance:none;cursor:pointer;border:1px solid var(--stroke);
  background:var(--paper);color:var(--terracotta);
  font-family:var(--ui);font-size:12px;font-weight:700;
  padding:7px 14px;border-radius:999px;box-shadow:var(--lift-sm);
}
button.paper-more:hover{background:var(--blush);border-color:#DCC6BB}

/* что сделать с текстом — те же действия, что в приложении */
/* три кнопки в одну строку не помещаются в узкую колонку: два коротких
   действия рядом, переход в приложение — отдельной строкой */
.paper-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.paper-acts[hidden]{display:none}
.paper-acts .btn-o{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:38px;padding:0 16px;border-radius:19px;
  background:var(--paper);border:1px solid var(--stroke);color:var(--ink);
  font-family:var(--ui);font-size:12.5px;font-weight:700;cursor:pointer;
  text-decoration:none;white-space:nowrap;box-shadow:var(--lift-sm);
  transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
}
.paper-acts .btn-o svg{flex:none;color:var(--terracotta)}
.paper-acts .btn-o:hover{transform:translateY(-1px);box-shadow:var(--lift);border-color:#DCC6BB}
.paper-acts .btn-o.done{border-color:var(--forest);color:var(--forest)}
.paper-acts .btn-o.done svg{color:var(--forest)}
.paper-acts .btn-o:hover{transform:translateY(-1px)}

/* --------------------------------------------------- 03 три сценария */
.scenarios{max-width:var(--wide);margin:0 auto 70px;padding:0 20px}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.story{background:var(--paper-mix);border:1px solid var(--stroke);border-radius:20px;
  padding:0 0 22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--lift);transition:transform 180ms ease,box-shadow 180ms ease}
.story:hover{transform:translateY(-3px);box-shadow:var(--lift-lg)}
.story-art{height:186px;overflow:hidden;background:var(--paper-soft)}
.story-art img{width:100%;height:100%;object-fit:cover;display:block}
.story-art.ph{height:186px;min-height:0;border:0;border-bottom:1px dashed #D9C9B8;border-radius:0}
.story .tag{align-self:flex-start;margin:-16px 0 0 18px;position:relative;z-index:1;
  background:var(--terracotta);color:#fff;font-size:11.5px;font-weight:800;
  padding:5px 12px;border-radius:999px}
.story h3{margin:14px 18px 8px}
.story p{margin:0 18px 16px;font-size:14px;line-height:1.55;color:var(--muted);flex:1}
.story .more{margin:0 18px}
.story.soon{opacity:.86}

/* ------------------------------------------------------ 04 Мастерская */
.workshop{background:var(--forest);color:var(--paper);margin:0 0 70px}
.ws-inner{max-width:var(--wide);margin:0 auto;padding:64px 20px;
  display:grid;grid-template-columns:1fr minmax(300px,42%);gap:40px;align-items:center}
.workshop h2{font-size:clamp(30px,4.4vw,44px);margin-bottom:14px}
.lead.light{color:rgba(255,253,248,.82)}
.ws-routes{display:grid;gap:18px;margin:30px 0}
.ws-routes h3{margin:0 0 5px;font-size:17px}
.ws-routes p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,253,248,.66)}
.ws-art{position:relative}
.ws-photo{width:100%;height:auto;display:block;border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.32)}
.ws-lesson{position:absolute;left:0;right:14%;bottom:-18px;background:var(--paper);
  color:var(--ink);border-radius:16px;padding:14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.ws-lesson .kicker{margin:0 0 5px;color:var(--terracotta)}
.ws-lesson b{display:block;font-family:var(--display);font-size:16px;line-height:1.25}
.ws-lesson .mins{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--muted)}

/* ----------------------------------------------------------- 05 поэты */
.poets{max-width:var(--wide);margin:0 auto 70px;padding:0 20px}
.poets-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.poets h2{line-height:1.15}
.poet-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:8px}
.poet-gallery figure{margin:0;background:var(--paper-mix);border:1px solid var(--stroke);
  border-radius:18px;overflow:hidden;box-shadow:var(--lift-sm);
  transition:transform 180ms ease,box-shadow 180ms ease}
.poet-gallery figure:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.poet-gallery img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.poet-gallery figcaption{padding:12px 14px 14px}
.poet-gallery b{display:block;font-family:var(--display);font-size:17px}
.poet-gallery span{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* ------------------------------------------------------ 06 свой стиль */
.own{max-width:var(--wide);margin:0 auto 70px;padding:38px 20px;
  display:grid;grid-template-columns:1fr minmax(260px,38%);gap:36px;align-items:center;
  background:var(--sage);border:1px solid #D7E3D5;border-radius:24px}
.own .lead{color:#3b4a41}
.own .hint{margin-top:14px}
.own-flow{display:grid;gap:10px;justify-items:center;text-align:center}
.flow-box{background:var(--paper);border:1px solid var(--stroke);border-radius:14px;
  padding:12px 22px;font-weight:700;font-size:14px}
.flow-box.accent{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.flow-arrow{color:var(--forest);font-size:18px;line-height:1}
.flow-traits{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.flow-traits span{background:var(--paper);border:1px solid var(--stroke);border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted)}

/* ------------------------------------------------- 07 как это работает */
.how{max-width:var(--wide);margin:0 auto 70px;padding:0 20px}
.steps{list-style:none;counter-reset:st;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.steps li{position:relative;padding-top:6px}
.steps li+li::before{content:'';position:absolute;left:-14px;top:26px;width:1px;height:70%;
  background:linear-gradient(var(--stroke),transparent)}
.steps .num{font-family:var(--display);font-size:32px;font-weight:800;color:var(--blush)}
.steps h3{margin:2px 0 6px}
.steps p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ----------------------------------------------------------- 08 канал */
.channel{max-width:var(--wide);margin:0 auto 70px;padding:0 20px;
  display:grid;grid-template-columns:1fr minmax(280px,40%);gap:36px;align-items:center}
.ch-post{background:var(--paper-mix);border:1px solid var(--stroke);border-radius:18px;
  padding:20px;box-shadow:var(--lift-lg)}
.ch-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ch-head img{border-radius:50%}
.ch-head b{display:block;font-size:14px}
.ch-head span{display:block;font-size:11.5px;color:var(--muted)}
.ch-post .poem{font-family:var(--font-poem,Georgia,serif);font-size:14.5px;line-height:1.85;margin:0}
.ch-post .sig{font-size:12px;color:var(--muted);margin:14px 0 0;font-style:italic}

/* --------------------------------------------------------- 09 подписка */
.pro{max-width:860px;margin:0 auto 70px;padding:0 20px}
.pro-card{background:var(--paper-mix);border:1px solid var(--stroke);border-radius:24px;
  padding:34px;box-shadow:var(--lift-lg)}
.pro-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pro-top h2{margin:0}
.pro-price{text-align:right}
.pro-price b{display:block;font-family:var(--display);font-size:36px;font-weight:800;color:var(--terracotta);line-height:1}
.pro-price span{font-size:13px;color:var(--muted);font-weight:700}
.pro .lead{margin:16px 0 20px}
.pro-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.pro-list li{position:relative;padding-left:26px;font-size:14.5px}
.pro-list li::before{content:'✓';position:absolute;left:0;top:-1px;color:var(--forest);font-weight:800}
.pro-alt{text-align:center;font-size:13.5px;color:var(--muted);margin:18px 0 0}

/* ----------------------------------------------------------- 10 финал */
.final{max-width:620px;margin:0 auto 20px;padding:0 20px;text-align:center}
.final img{width:min(260px,58%);height:auto;margin-bottom:6px;
  filter:drop-shadow(0 14px 30px rgba(90,60,40,.16))}
.final h2{margin-bottom:8px}
.final .lead{margin:0 auto 24px}
.final .hint{margin-top:12px}

/* --------------------------------------------------------- узкий экран */
@media (max-width:900px){
  .hero,.demo,.ws-inner,.own,.channel{grid-template-columns:1fr}
  .hero{padding-bottom:20px}
  .hero-art{max-width:420px;margin:0 auto}
  .ws-lesson{position:static;margin-top:16px;right:auto}
}
@media (max-width:640px){
  /* меню в две строки читается как сломанное — ужимаем до одной */
  .top{padding:14px 16px;gap:10px}
  .top nav{gap:12px;width:100%;justify-content:space-between}
  .top nav a{font-size:13px}
  .top nav a.go{padding:8px 13px;font-size:12.5px}
  .brand span{font-size:17px}
}
@media (max-width:560px){
  .demo-form{padding:20px 16px}
  .steps li+li::before{display:none}
  .pro-card{padding:24px 20px}
  .own{padding:26px 18px}
}


/* цены */
.narrow{max-width:760px;margin-inline:auto}
table{width:100%;border-collapse:collapse;margin:0 0 22px;background:var(--paper-mix);
  border:1px solid var(--stroke);border-radius:14px;overflow:hidden;font-size:14.5px;
  box-shadow:var(--lift-sm)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--stroke)}
th{background:var(--paper-soft);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tbody tr:last-child td{border-bottom:0}

.plan{background:var(--sage);border:1px solid #D7E3D5;border-radius:20px;padding:24px;margin-bottom:26px}
.plan-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.plan-head b{font-family:var(--display);font-size:32px;font-weight:800;color:var(--terracotta)}
.plan-head span{font-size:14px;color:var(--muted);font-weight:700}
.plan ul{margin:0 0 14px;padding-left:20px;font-size:15px;color:#3b4a41}
.plan li{margin-bottom:6px}
.fine{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}

/* документы */
.doc{max-width:740px;margin-inline:auto;background:var(--paper-mix);
  border:1px solid var(--stroke);border-radius:20px;padding:34px 38px;box-shadow:var(--lift)}
.doc h1{font-size:30px}
.doc h2{font-size:21px;margin-top:30px}
.doc h3{font-size:16px;margin-top:20px}
.doc p,.doc li{font-size:14.5px;line-height:1.65}
.doc ul{padding-left:20px}
.doc table{font-size:13.5px}
.doc code{background:var(--paper-soft);padding:1px 5px;border-radius:5px;font-size:13px}

/* подвал */
.bottom{border-top:1px solid var(--stroke);margin-top:70px;padding:34px 20px 40px;background:var(--paper-soft)}
.cols{max-width:var(--wide);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.cols b{display:block;font-family:var(--display);font-size:16px;margin-bottom:8px}
.cols p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.req{max-width:var(--wide);margin:26px auto 0;padding-top:18px;border-top:1px solid var(--stroke);
  font-size:13px;color:var(--muted)}

@media (max-width:640px){
  /* меню в две строки читается как сломанное — ужимаем до одной */
  .top{padding:14px 16px;gap:10px}
  .top nav{gap:12px;width:100%;justify-content:space-between}
  .top nav a{font-size:13px}
  .top nav a.go{padding:8px 13px;font-size:12.5px}
  .brand span{font-size:17px}
}
@media (max-width:560px){
  main{padding:0 16px}
  section{margin:40px 0}
  .hero img{width:100%;max-width:280px}
  .doc{padding:24px 20px}
}

/* поле-ловушка для скриптов: человеку его видеть не нужно */
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.demo-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.demo-actions .cta{cursor:pointer;border:0;font-family:var(--ui)}
.demo-actions .cta:disabled{opacity:.75;cursor:default}
#demo-note{margin:12px 0 0}

/* ==================================== созданное с Музой */
.gallery{max-width:var(--wide);margin:0 auto 70px;padding:0 20px}
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.gal-head h2{margin-bottom:6px}
.gal-head .sub{margin:0}
.swipe-hint{display:none;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}

/* десктоп — ряд карточек, телефон — лента: шесть колонок на узком экране
   превращаются в нечитаемые полоски */
.gal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.work{background:var(--paper-mix);border:1px solid var(--stroke);border-radius:20px;
  padding:22px 24px 20px;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--lift);overflow:hidden;transition:transform 180ms ease,box-shadow 180ms ease}
.work:hover{transform:translateY(-3px);box-shadow:var(--lift-lg)}
/* веточка в углу — та же деталь, что подписывает лист в приложении */
.work::after{
  content:'';position:absolute;right:-26px;bottom:-30px;width:120px;height:120px;
  background:url("/img/sprig.svg") no-repeat center/contain;opacity:.16;pointer-events:none;
}
.work-tag{align-self:flex-start;background:var(--blush);color:var(--terracotta);
  font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:999px;
  margin-bottom:12px}
.work h3{font-size:18px;margin:0 0 10px}
.work .poem{font-family:var(--font-poem,Georgia,serif);font-size:13.5px;line-height:1.85;
  color:#3a332c;margin:0 0 14px;flex:1}
.work-by{margin:0;font-size:11.5px;color:var(--muted);border-top:1px solid var(--stroke);
  padding-top:12px}

.gal-more{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding:16px 20px;border-radius:18px;text-decoration:none;
  background:var(--paper-soft);border:1px solid var(--stroke);color:var(--ink)}
.gal-more b{font-family:var(--display);font-size:16px;font-weight:700}
.gal-more span{font-size:13.5px;font-weight:700;color:var(--terracotta);white-space:nowrap}
.gal-more:hover{background:var(--blush);border-color:#DCC6BB}

@media (max-width:900px){
  /* без сброса template колонки остаются тремя, и шесть карточек
     сжимаются в нечитаемые полоски вместо ленты */
  .gal-row{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
    margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .gal-row::-webkit-scrollbar{display:none}
  .gal-row>*{scroll-snap-align:center}
  .swipe-hint{display:block}
  .gal-head{align-items:center}
}
@media (max-width:560px){
  .gal-row{grid-auto-columns:88%}
  .gal-more{flex-direction:column;align-items:flex-start;gap:8px}
}


/* спрайт иконок не занимает места */
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}