/* Сайт платформи ISHOD: головна, галерея, умови (і сторінка «Сайт не знайдено»).
   Ідея: ISHOD — «вихід, початок». Перший екран — це перший крок: ліворуч текст, праворуч «сцена» з майбутнім
   сайтом на його адресі; вона стоїть на місці, поки читаєте три кроки, і змінюється разом з ними.
   Чорне тло й лайм — від бренду; теплий папір — друге поле для ритму; рукописні позначки — Caveat.
   Шрифти: Vollkorn (заголовки), Source Serif 4 (текст), обидва з кирилицею. Unbounded — лише логотип. */
:root {
  --ground: #0b0b0c;
  --raised: #141412;
  --raised-2: #1e1d1a;
  --ink: #ecebe6;
  --ink-2: #aba698;
  --paper: #e5e2da;
  --paper-2: #d9d5cb;
  --paper-ink: #151411;
  --paper-ink-2: #5b564b;
  --lime: #fffb44;
  --lime-hover: #fffd80;
  --on-lime: #0b0b0c;
  --lime-ink: #fffb44;        /* акцент як колір тексту (на світлому тлі — темніший) */
  --line: #2c2a26;
  --hover: #34322d;
  --field: #45423b;
  --code: rgba(239, 235, 226, .09);
  --on-ink-2: #5b564b;

  --f-head: "Vollkorn", "Georgia", "Times New Roman", serif;
  --f-text: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --f-hand: "Caveat", "Segoe Print", cursive;

  --t-small: 15px;
  --t-body: 18px;
  --t-mid: 30px;
  --t-hand: 28px;
  --t-xl: clamp(46px, 5vw + 8px, 92px);
  --t-lead: clamp(19px, 0.6vw + 14px, 22px);
  --t-head: clamp(32px, 1.8vw + 20px, 50px);
  --t-display: clamp(38px, 3.4vw + 16px, 68px);

  --r: 6px;
  --gutter: 32px;
  --sec: 160px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
/* світла тема (перемикач у шапці, вибір пам'ятається в браузері) */
:root[data-theme="light"] {
  --ground: #f4f1ea;
  --raised: #ebe7de;
  --raised-2: #e2ddd2;
  --ink: #151411;
  --ink-2: #5b564b;
  --paper: #1b1a17;
  --paper-2: #26241f;
  --paper-ink: #ecebe6;
  --paper-ink-2: #aba698;
  --lime-ink: #6b6800;
  --line: #d8d2c6;
  --hover: #d2cbbd;
  --field: #c9c2b4;
  --code: rgba(21, 20, 17, .07);
  --on-ink-2: #aba698;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; font-variant-numeric: lining-nums; }
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-head); }
h3 { font-size: var(--t-mid); line-height: 1.1; }
p { margin: 0; }
code { font: 500 .86em/1.4 ui-monospace, Consolas, monospace; background: var(--code); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--on-lime); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--ink); color: var(--ground); padding: 8px 12px; }
.hand { font-family: var(--f-hand); font-weight: 600; line-height: 1.05; letter-spacing: 0; }

.wrap { width: min(1376px, 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { width: min(760px, 100% - var(--gutter) * 2); }
.sec-lead { margin-top: 20px; max-width: 36em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

/* логотип ISHOD */
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 "Unbounded", var(--f-text); letter-spacing: .03em; text-decoration: none; color: var(--ink); }
.logo__mark { width: 22px; height: 22px; flex: none; transition: transform .5s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-24deg); }
:root[data-theme="light"] .logo__mark circle { stroke: var(--ink); stroke-width: 16; }

/* кнопки: один колір, один радіус */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--r);
  font: 600 17px/1 var(--f-text); text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .18s, color .18s, transform .18s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--lime); color: var(--on-lime); }
.btn--primary:hover { background: var(--lime-hover); }
.btn--ghost { background: var(--raised-2); color: var(--ink); }
.btn--ghost:hover { background: var(--line); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn--wide { width: 100%; }
.link { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .18s; }
.link:hover { color: var(--lime-ink); }

/* шапка */
.nav__in { display: flex; align-items: center; gap: 40px; min-height: 76px; }
.nav__links { display: flex; gap: 28px; font-size: 16px; }
.nav__links a, .nav__login { color: var(--ink-2); text-decoration: none; transition: color .18s; }
.nav__links a:hover, .nav__login:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a[aria-current] { text-decoration: underline; text-decoration-color: var(--lime-ink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 16px; }
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; cursor: pointer; border-radius: var(--r); background: var(--raised-2); }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .2s var(--ease); }
.mnav[open] summary span:first-child { transform: translateY(4px) rotate(45deg); }
.mnav[open] summary span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav__list { position: absolute; right: 0; top: 52px; z-index: 20; min-width: 240px; display: grid; padding: 8px; border-radius: var(--r);
  background: var(--raised-2); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.mnav__list a { padding: 12px 14px; text-decoration: none; font-size: 18px; border-radius: 4px; }
.mnav__list a:hover, .mnav__theme:hover { background: var(--hover); }
.mnav__theme { display: block; width: 100%; padding: 12px 14px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; font-size: 18px; text-align: left; cursor: pointer; }

/* перемикач теми: місяць у світлій, сонце в темній */
.theme-btn { width: 44px; height: 44px; display: grid; place-content: center; padding: 0; border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--raised-2); color: var(--ink); transition: background-color .18s; }
.theme-btn:hover { background: var(--line); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .i-moon, :root[data-theme="light"] .theme-btn .i-sun { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }

/* ── перший екран + три кроки: текст ліворуч, сцена праворуч ── */
.split { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 14fr); gap: 0 64px; align-items: stretch; }
.hero { padding: 72px 0 0; }
.hero__lead { margin-top: 36px; max-width: 30em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.hero__note { margin-top: 16px; font-size: var(--t-small); color: var(--ink-2); }

/* «приміряти» назву й шаблон */
.try { margin-top: 56px; padding: 28px 28px 24px; border-radius: var(--r); background: var(--raised); max-width: 560px; }
.try[hidden] { display: none; }
.try__label, .try__tpls legend { display: block; font-size: 16px; color: var(--ink-2); }
.try__input { width: 100%; margin-top: 10px; padding: 10px 14px; border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: var(--r); background: var(--ground); color: var(--ink); font: 500 30px/1.2 var(--f-head); letter-spacing: -.01em; transition: border-color .2s; }
.try__input:focus { outline: 0; border-color: var(--lime-ink); }
.try__input::placeholder { color: var(--ink-2); opacity: .7; }
.try__addr { margin-top: 12px; font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.try__addr b { color: var(--lime-ink); font-weight: 600; }
.try__tpls { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.try__tpls legend { padding: 0; margin-bottom: 10px; }
.chip { display: inline-block; margin: 0 6px 8px 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border-radius: var(--r); background: var(--raised-2); color: var(--ink); font-size: 16px; line-height: 1.2;
  transition: background-color .18s, color .18s, transform .18s var(--ease); }
.chip:hover span { background: var(--line); }
.chip input:checked + span { background: var(--lime); color: var(--on-lime); }
.chip input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.chip:active span { transform: scale(.97); }

/* кроки */
.steps { padding: var(--sec) 0 0; }
.steps__list { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: step; }
.step { position: relative; counter-increment: step; padding: 48px 0 0 76px; min-height: 62svh; transition: opacity .4s; }
.step:last-child { min-height: 0; padding-bottom: var(--sec); }
.step::before { content: counter(step); position: absolute; left: 0; top: 34px; font: 500 var(--t-display)/1 var(--f-head); font-variant-numeric: lining-nums; color: var(--lime-ink); }
.step h3 { max-width: 16ch; }
.step p { margin-top: 18px; max-width: 34em; }
.step__pic { display: none; }
.js .step:not(.is-current) { opacity: .45; }
.js .step:first-child:not(.is-seen) { opacity: 1; }

/* сцена */
.split__stage { position: relative; }
.stage-box { position: sticky; top: 20px; height: calc(100svh - 40px); min-height: 560px; max-height: 960px; margin-top: 20px;
  display: flex; flex-direction: column; justify-content: center; }
.stage { margin: 0; }
.stage__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: var(--r) var(--r) 0 0; background: #151411; color: #ecebe6; font-size: 16px; box-shadow: 0 0 0 1px var(--line); }
.stage__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage__url-app { display: none; }
.stage__pill { flex: none; padding: 5px 10px; border-radius: 4px; font-size: 15px; line-height: 1.2; }
.stage__pill--draft { background: #2e2c27; color: #aba698; }
.stage__pill--live { display: none; background: var(--lime); color: var(--on-lime); font-weight: 600; }
.stage__pics { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 var(--r) var(--r); background: var(--raised-2); box-shadow: 0 0 0 1px var(--line); }
.stage__pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0;
  transition: opacity 1.1s var(--ease); transform-origin: 50% 0; }
.stage__pics img[data-pic="editor"] { object-position: center; }
.stage__pics img.is-on { opacity: 1; animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.045); } }
.stage__cap { margin-top: 16px; font-size: var(--t-small); color: var(--ink-2); }
.stage__note { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 6px 6px; font-size: var(--t-hand); color: var(--ink); transform: rotate(-2deg); transform-origin: left bottom; transition: opacity .4s; }
.stage__note svg { flex: none; margin-bottom: -10px; }
.stage-box[data-state="editor"] .stage__url-site { display: none; }
.stage-box[data-state="editor"] .stage__url-app { display: inline; }
.stage-box[data-state="editor"] .stage__note { opacity: 0; }
.stage-box[data-state="publish"] .stage__pill--draft { display: none; }
.stage-box[data-state="publish"] .stage__pill--live { display: inline-block; }

/* ── шаблони ── */
.tpl-sec { padding: var(--sec) 0; background: var(--raised); }
.tpl-sec__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.tpl-sec__modal { margin: 0; }
.tpl-sec__modal img { border-radius: var(--r); }
.tpl-sec__modal figcaption { margin-top: 12px; font-size: var(--t-small); color: var(--ink-2); }
.tgroup { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; margin-top: 120px; }
.tgroup + .tgroup { margin-top: 96px; }
.tgroup__h { position: sticky; top: 28px; align-self: start; font-size: var(--t-mid); max-width: 9ch; }
.tgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
.tpl img { border-radius: var(--r); background: var(--raised-2); }
.tpl__cap { margin-top: 12px; font-size: 16px; line-height: 1.4; }
.tpl__cap b { font-weight: 600; }
.tpl__cap span { color: var(--ink-2); }
/* картка веде на живий приклад шаблону (tpl-<ключ>.ishod.studio) */
.tpl__link { display: block; color: inherit; text-decoration: none; }
.tpl__link img { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tpl__link:hover img, .tpl__link:focus-visible img { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--lime-ink); }
.tpl__open { margin-left: 6px; font-style: normal; font-size: 14px; color: var(--lime-ink); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.tpl__link:hover .tpl__open, .tpl__link:focus-visible .tpl__open { opacity: 1; }
@media (hover: none) { .tpl__open { opacity: 1; } }

/* ── що всередині (папір) ── */
.inside { padding: var(--sec) 0; background: var(--paper); color: var(--paper-ink); }
.inside .sec-lead { color: var(--paper-ink-2); }
.inside code { background: rgba(21, 20, 17, .08); }
.inside__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: end; }
.inside__head .sec-lead { margin-top: 0; }
.inside__shot { position: relative; margin: 72px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 0 28px; }
.inside__shot img { grid-column: 1; border-radius: var(--r); }
.inside__shot figcaption { grid-column: 1; margin-top: 14px; max-width: 44em; font-size: var(--t-small); color: var(--paper-ink-2); justify-self: end; text-align: right; }
.mnote { margin: 0; font-size: var(--t-hand); color: var(--paper-ink); display: flex; align-items: center; gap: 4px; }
.mnote--b { grid-column: 2; grid-row: 1; align-self: start; margin-top: 22%; margin-left: -36px; flex-direction: row-reverse; justify-content: flex-end; transform: rotate(-3deg); }
.mnote--a { grid-column: 1; grid-row: 2; justify-self: start; align-items: flex-start; margin: -6px 0 0 30%; transform: rotate(-2deg); }
.mnote--a svg { margin-right: 6px; }
.mnote--a span { margin-top: 26px; }
.facts { margin: 96px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 56px; }
.facts dt { font: 600 var(--t-lead)/1.15 var(--f-head); letter-spacing: -.01em; }
.facts dd { margin: 10px 0 0; }

/* ── сайти користувачів ── */
.people { padding: var(--sec) 0 0; }
.people__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: end; }
.people__head .sec-lead { margin-top: 0; }
.cards { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; }
.site[hidden] { display: none; }
.site__link { display: block; text-decoration: none; }
.site__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--raised-2); }
.site__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.site__link:hover .site__img img { transform: scale(1.035); }
.site__ph { width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 28px; font-weight: 700; }
.site__name { display: block; margin-top: 14px; font: 600 var(--t-lead)/1.15 var(--f-head); }
.site__link:hover .site__name { text-decoration: underline; text-decoration-color: var(--lime-ink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site__meta { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--ink-2); }
.site__niche { color: var(--ink); }
/* вкладка «Шаблони»: сітка карток — комп'ютер + телефон поруч, назва, опис, дії */
.tlist { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 48px; }
.tcard { display: grid; gap: 22px; align-content: start; scroll-margin-top: 24px; }
.tcard[hidden] { display: none; }
.tcard__views { position: relative; padding: 0 10% 32px 0; }
.tcard__desk { display: block; border-radius: var(--r); overflow: hidden; background: var(--raised-2); box-shadow: 0 0 0 1px var(--line); }
.tcard__desk img { width: 100%; transition: transform .6s var(--ease); }
a.tcard__desk:hover img { transform: scale(1.02); }
/* телефон: рамка з «екраном»; при наведенні сторінка повільно прокручується вниз */
.tcard__phone { position: absolute; right: 0; bottom: 0; width: 26%; min-width: 96px; padding: 5px; border-radius: 22px; background: #161512;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 40px rgba(0, 0, 0, .45); }
.tcard__screen { display: block; aspect-ratio: 390 / 800; overflow: hidden; border-radius: 17px; background: #fff; }
.tcard__screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 9s linear; }
.tcard:hover .tcard__screen img { object-position: 50% 100%; }
.tcard__title { font-size: var(--t-mid); line-height: 1.15; }
.tcard__style { font: 600 calc(var(--t-hand) * .9)/1 var(--f-hand); color: var(--lime-ink); white-space: nowrap; }
.tcard__about { margin-top: 10px; max-width: 36em; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.tcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; }
.tcard__start { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime-ink);
  text-decoration-thickness: 2px; text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
.tcard__start:hover { color: var(--lime-ink); }
@media (max-width: 900px) {
  .tlist { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  /* фільтр — один рядок з прокруткою, що прилипає вгорі */
  #filter.filter { position: sticky; top: 0; z-index: 15; flex-wrap: nowrap; overflow-x: auto; margin: 40px calc(var(--gutter) * -1) 0;
    padding: 10px var(--gutter); background: var(--ground); scrollbar-width: none; }
  #filter.filter::-webkit-scrollbar { display: none; }
  #filter.filter button { flex: none; white-space: nowrap; }
}
@media (max-width: 560px) {
  .tcard { gap: 16px; }
  .tcard__views { padding: 0 11% 22px 0; }
  .tcard__phone { width: 30%; min-width: 0; padding: 3px; border-radius: 14px; }
  .tcard__screen { border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcard__screen img, .tcard__desk img { transition: none; }
  .tcard:hover .tcard__screen img { object-position: 50% 0; }
}

/* «подобається» під карткою сайту */
.site { position: relative; }
.like { margin: 10px 0 0; }
.like__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 15px/1 var(--f-text); cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s, transform .18s var(--ease); }
.like__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: transform .25s var(--ease); }
.like__btn:hover { color: var(--ink); border-color: var(--ink-2); }
.like__btn:active svg { transform: scale(.82); }
.like__btn[aria-pressed="true"] { color: var(--ink); border-color: var(--lime-ink); }
.like__btn[aria-pressed="true"] svg { fill: #ff4f6d; stroke: #ff4f6d; }
.like__btn.is-pop svg { animation: like-pop .45s var(--ease); }
@keyframes like-pop { 40% { transform: scale(1.35); } }

/* ── ціни як меню ── */
.price { padding: var(--sec) 0; }
.price__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px 96px; }
.price__side .sec-lead { max-width: 22em; }
.price__hand { margin-top: 44px; font-size: var(--t-hand); color: var(--lime-ink); transform: rotate(-3deg); transform-origin: left; }
.price__terms { margin-top: 44px; font-size: var(--t-small); color: var(--ink-2); max-width: 26em; }
.price__terms a { color: var(--ink); text-underline-offset: 3px; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu__item { padding: 30px 0 34px; }
.menu__item:first-child { padding-top: 6px; }
.menu__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.menu__name, .menu__sum { font: 600 var(--t-mid)/1.1 var(--f-head); letter-spacing: -.015em; font-variant-numeric: lining-nums; }
.menu__sum { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.menu__sum small { font: 500 var(--t-small) var(--f-head); letter-spacing: 0; color: var(--ink-2); }
.menu__about { margin-top: 10px; max-width: 40em; color: var(--ink-2); }
.menu__go { margin-top: 12px; font-weight: 600; }
.menu__go a { color: var(--ink); text-decoration-color: var(--lime-ink); text-underline-offset: 4px; }
/* тарифи магазину: скільки товарів — найпомітніше після ціни; у старших — «Усе з …, а ще» і лише нове */
.menu__item--shop .menu__row { justify-content: flex-start; }
.menu__item--shop .menu__sum { margin-left: auto; }
.menu__pop { align-self: center; font-size: 24px; color: var(--lime-ink); transform: rotate(-4deg); white-space: nowrap; }
.menu__cap { margin-top: 12px; color: var(--ink-2); }
.menu__cap b { margin-right: 4px; font: 600 var(--t-mid)/1 var(--f-head); letter-spacing: -.015em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; }
.menu__lead { margin-top: 14px; font-weight: 600; color: var(--ink); }
.menu__perks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-width: 40em; }
.menu__lead + .menu__perks { margin-top: 6px; }
.menu__perks li { position: relative; padding-left: 22px; color: var(--ink-2); }
.menu__perks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 2px; background: var(--lime-ink); }
@media (max-width: 560px) {
  .menu__item--shop .menu__row { flex-wrap: wrap; gap: 4px 14px; }
  .menu__pop { font-size: 21px; }
}

/* ── хто це робить ── */

/* ── питання: суцільний текст у дві колонки ── */
.faq { padding: var(--sec) 0; }
.faq__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 64px; }
.faq__text { columns: 2; column-gap: 56px; }
.faq__text p { break-inside: avoid; margin: 0 0 26px; line-height: 1.6; }
.faq__text b { font-weight: 600; color: var(--ink); }
.faq__text a { text-underline-offset: 3px; }

/* ── заклик: лаймове поле й відкрите вікно створення ── */
.cta { padding: var(--sec) 0; background: var(--lime); color: var(--on-lime); }
.cta__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.cta h2 { font-size: var(--t-xl); line-height: .94; max-width: 12ch; }
.cta__say p { margin-top: 28px; max-width: 30em; font-size: var(--t-lead); line-height: 1.45; }
.newsite { padding: 28px; border-radius: var(--r); background: var(--ground); color: var(--ink); }
.newsite__title { font: 600 var(--t-mid)/1.1 var(--f-head); margin-bottom: 18px; }
.newsite__field { margin-top: 12px; padding: 10px 14px 12px; border-radius: var(--r); background: var(--raised-2); }
.newsite__label { display: block; font-size: var(--t-small); color: var(--ink-2); }
.newsite__value { display: block; font-size: var(--t-body); overflow-wrap: anywhere; }
.newsite .btn { margin-top: 20px; }
.newsite__note { margin-top: 12px; font-size: var(--t-small); color: var(--ink-2); }

/* ── підвал: один тихий рядок ── */
.footer { padding: 56px 0 44px; font-size: var(--t-small); color: var(--ink-2); }
.footer__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px 40px; align-items: center; }
.footer__what { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; transition: color .18s; }
.footer__links a:hover { color: var(--lime-ink); }
.footer__note { justify-self: end; text-align: right; }

/* ── окремі сторінки: галерея, умови ── */
.page { padding: 88px 0 var(--sec); }
.page__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 64px; align-items: end; }
.page__head h1 { font-size: var(--t-xl); line-height: .95; }
.page__head .sec-lead { margin-top: 0; }
/* довгий заголовок (одне слово ширше за пів рядка) — на всю ширину, вступ під ним */
.page__head--stack { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.page__head--stack h1 { font-size: min(var(--t-xl), 9.5vw); }
.page__head--stack .sec-lead { max-width: 40em; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 64px; }
.filter button { font: 400 16px var(--f-text); color: var(--ink); background: var(--raised-2); border: 0; border-radius: var(--r); padding: 10px 14px; cursor: pointer;
  transition: background-color .18s, color .18s; }
.filter button:hover { background: var(--line); }
.filter button span { color: var(--ink-2); margin-left: 4px; }
.filter button.is-on { background: var(--ink); color: var(--ground); }
.filter button.is-on span { color: var(--on-ink-2); }
.empty { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center;
  padding: 64px clamp(24px, 4vw, 64px); border-radius: var(--r); background: var(--paper); color: var(--paper-ink); }
.empty__big { font: 600 var(--t-mid)/1.1 var(--f-head); letter-spacing: -.015em; }
.empty__say > p + p { margin-top: 18px; }
.empty__say .hero__actions { margin-top: 32px; }
.empty__hand { margin-top: 26px; font-size: var(--t-hand); transform: rotate(-3deg); transform-origin: left; }
.empty__pics { margin: 0; }
.empty__a { position: relative; display: block; aspect-ratio: 5 / 3.4; }
.empty__a img { position: absolute; width: 60%; border-radius: var(--r); border: 6px solid var(--paper); transition: transform .5s var(--ease); }
.empty__a img:nth-child(1) { left: 0; top: 0; transform: rotate(-2.5deg); }
.empty__a img:nth-child(2) { right: 0; top: 14%; transform: rotate(2deg); }
.empty__a img:nth-child(3) { left: 16%; bottom: 0; transform: rotate(-1deg); }
.empty__a:hover img:nth-child(1) { transform: rotate(-4deg) translate(-6px, -4px); }
.empty__a:hover img:nth-child(2) { transform: rotate(3.5deg) translate(6px, -2px); }
.empty__pics figcaption { margin-top: 16px; font-size: var(--t-small); color: var(--paper-ink-2); }
.empty__pics figcaption a { color: var(--paper-ink); }

/* умови — текст для читання зі змістом збоку */
.legal-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 64px; margin-top: 96px; align-items: start; }
.toc { position: sticky; top: 28px; font-size: 16px; }
.toc__h { font: 600 var(--t-lead)/1.1 var(--f-head); }
.toc ol { margin: 16px 0 0; padding-left: 1.4em; color: var(--ink-2); }
.toc li { margin: 8px 0; }
@media (max-width: 900px) { .toc li { margin: 0; } .toc a { display: inline-block; padding: 11px 0; } }
.toc a { color: var(--ink-2); text-decoration: none; transition: color .18s; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.toc__hand { margin-top: 28px; padding-left: 4px; font-size: var(--t-hand); color: var(--lime-ink); transform: rotate(-3deg); transform-origin: left; }
.legal { max-width: 44em; }
.legal--solo { margin-top: 64px; }
.legal--solo h3 { font-size: 1.05em; line-height: 1.35; margin: 24px 0 6px; }
.legal h2 { font-size: var(--t-mid); margin: 64px 0 16px; scroll-margin-top: 24px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.15em; line-height: 1.3; margin: 40px 0 12px; scroll-margin-top: 24px; }
.legal p { margin: 0 0 16px; }
.legal p b { font-weight: 600; }
.legal a { text-underline-offset: 3px; }
.plans { width: 100%; margin: 12px 0 20px; border-collapse: collapse; }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-top: 1px solid var(--line); }
.plans tr:last-child th, .plans tr:last-child td { border-bottom: 1px solid var(--line); }
.plans th { width: 22%; font: 600 var(--t-lead)/1.2 var(--f-head); }
.plans td { color: var(--ink-2); }
.plans__n { text-align: right !important; padding-right: 0 !important; color: var(--ink) !important; white-space: nowrap; font: 600 var(--t-lead)/1.3 var(--f-head); font-variant-numeric: lining-nums; }

/* сторінка «Сайт не знайдено» (store_not_found.html) */
.notfound { padding: 96px 0; }
.notfound p:not(.hero__actions) { margin-top: 18px; color: var(--ink-2); }
.notfound .hero__actions { margin-top: 32px; }

/* ── поява під час прокрутки (лише з JS; без JS усе видно одразу) ── */
.js [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-rise].is-in, .rise-off [data-rise] { opacity: 1; transform: none; }
.js .tpl[data-rise], .js .site[data-rise] { transform: translateY(34px); }
.js .tpl[data-rise].is-in, .js .site[data-rise].is-in { transform: none; }
.js .price__hand[data-rise].is-in, .js .empty__hand[data-rise].is-in { transform: rotate(-3deg); }

/* сторінки під ніші (templates/landing/niche.html): шаблон на комп'ютері й телефоні поруч з описом */
.niche .page__head .hero__actions { margin-top: 28px; }
.niche__tpl { margin-top: 72px; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.niche__tpl .tcard__about { margin-top: 12px; color: var(--ink-2); display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ── планшет ── */
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; }
  .tgroup { grid-template-columns: 1fr; gap: 24px; margin-top: 88px; }
  .tgroup__h { position: static; max-width: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price__in { gap: 56px; }
}

/* ── телефон і вузький планшет: сцена стає блоком між першим екраном і кроками ── */
@media (max-width: 900px) {
  :root { --sec: 104px; }
  .nav__links { display: none; }
  .mnav { display: block; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__read { display: contents; }
  .hero { order: 1; }
  .split__stage { order: 2; margin-top: 32px; }
  .try { order: 3; }
  .steps { order: 4; }
  .stage-box { position: static; height: auto; min-height: 0; max-height: none; margin: 0; padding: 32px 0 28px; }
  .step { min-height: 0; padding-top: 44px; }
  .js .step:not(.is-current) { opacity: 1; }
  .step__pic { display: block; margin-top: 22px; border-radius: var(--r); }
  .step:last-child { padding-bottom: var(--sec); }
  .tpl-sec__head, .inside__head, .people__head, .price__in, .faq__in, .cta__in, .page__head, .legal-in, .empty, .niche__tpl { grid-template-columns: minmax(0, 1fr); }
  .niche__tpl { margin-top: 48px; gap: 24px; }
  .tpl-sec__head, .inside__head, .people__head { gap: 40px; align-items: start; }
  .inside__head .sec-lead, .people__head .sec-lead, .page__head .sec-lead { margin-top: 0; }
  .inside__shot { grid-template-columns: minmax(0, 1fr); }
  .inside__shot figcaption { justify-self: start; text-align: left; }
  .mnote { display: none; }
  .faq__text { columns: 1; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .footer__note { justify-self: start; text-align: left; }
  .toc { position: static; }
  .legal-in { margin-top: 56px; gap: 48px; }
  .cta__in { min-height: 0; gap: 48px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --sec: 88px; --t-body: 17px; --t-xl: clamp(42px, 12.4vw, 58px); }
  .nav__in { gap: 12px; min-height: 66px; }
  .nav__right { gap: 10px; }
  .nav__login { display: none; }
  .nav__right > .theme-btn { display: none; }  /* на телефоні перемикач теми — у меню */
  .nav__right .btn { white-space: nowrap; padding: 0 14px; }
  .logo { font-size: 18px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(30px, 9vw, 40px); }
  .hero__lead { margin-top: 24px; font-size: 19px; }
  .hero__actions { margin-top: 28px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .try { margin-top: 40px; padding: 22px 18px 16px; }
  .try__input { font-size: 25px; }
  .stage__bar { font-size: 14px; padding: 10px 10px 10px 12px; gap: 8px; }
  .stage__pill { font-size: 13px; padding: 4px 8px; }
  :root { --t-mid: 26px; --t-hand: 25px; }
  .steps__list { margin-top: 24px; }
  .step { padding-left: 46px; }
  .step::before { font-size: 44px; top: 40px; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .tgrid .tpl:first-child, .tgrid .tpl:last-child:nth-child(even) { grid-column: 1 / -1; }
  .tpl__cap { font-size: 15px; }
  .inside__shot { margin-top: 48px; margin-inline: calc(var(--gutter) * -1); }
  .inside__shot img { border-radius: 0; }
  .inside__shot figcaption { padding-inline: var(--gutter); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 56px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .menu__row { flex-wrap: wrap; gap: 4px 16px; }
  .price__hand { margin-top: 28px; }
  .price__terms { margin-top: 28px; }
  .cta { padding: 88px 0; }
  .newsite { padding: 22px 18px; }
  .page { padding-top: 48px; }
  .filter { margin-top: 40px; }
  .empty { margin-top: 48px; margin-inline: calc(var(--gutter) * -1); padding: 40px var(--gutter); border-radius: 0; gap: 48px; }
  .legal h2 { margin-top: 52px; }
  .plans th, .plans td { display: block; width: auto; padding: 2px 0; border: 0; }
  .plans tr { display: block; padding: 16px 0; border-top: 1px solid var(--line); }
  .plans tr:last-child { border-bottom: 1px solid var(--line); }
  .plans tr:last-child th, .plans tr:last-child td { border: 0; }
  .plans__n { text-align: left !important; }
  .footer { padding-top: 40px; }
  .footer__links { gap: 10px 18px; }
}

/* ── менше руху: усе на місці, без зсувів і дрейфу ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise], .js .tpl[data-rise], .js .site[data-rise] { opacity: 1; transform: none; transition: none; }
  .js .price__hand[data-rise], .js .empty__hand[data-rise] { transform: rotate(-3deg); }
  .stage__pics img { transition: none; }
  .stage__pics img.is-on { animation: none; }
  .btn, .chip span, .site__img img, .empty__a img, .logo__mark { transition: none; }
  .like__btn.is-pop svg { animation: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- Фото в шаблонах (/foto/): фотобанки й джерела по шаблонах ---------- */
.credits-src { padding-left: 20px; }
.credits-src li { margin: 8px 0; }
.credits { border-top: 1px solid var(--line); }
.credits:last-of-type { border-bottom: 1px solid var(--line); }
.credits summary { padding: 14px 0; cursor: pointer; font: 600 var(--t-body)/1.3 var(--f-head); }
.credits summary:hover { color: var(--lime-ink); }
.credits pre { margin: 0 0 18px; padding: 14px 16px; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 14px/1.55 ui-monospace, Consolas, monospace; background: var(--code); border-radius: var(--r); }
.credits pre a { color: inherit; }

/* «Відгук і побажання» (/vidguk/) */
.fb { display: grid; gap: 22px; max-width: 760px; margin-top: 48px; }
.fb__kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.fb__kinds legend { margin-bottom: 10px; font-weight: 600; }
.fb__fld { display: grid; gap: 8px; font-weight: 600; }
.fb__fld i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.fb__fld input, .fb__fld textarea, .fb__fld select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--field, var(--raised-2)); color: var(--ink); font: inherit; font-weight: 400; min-height: 48px; }
.fb__fld textarea { resize: vertical; min-height: 140px; }
.fb__fld input:focus, .fb__fld textarea:focus, .fb__fld select:focus { outline: 2px solid var(--lime); outline-offset: 1px; }
.fb__fld select { max-width: 220px; }
.fb__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fb__err { color: #e5484d; font-weight: 600; }
.fb .btn { justify-self: start; }
.fb .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .fb__row { grid-template-columns: 1fr; } .fb .btn { justify-self: stretch; } }
/* вкладки «Шаблони»: сайти й магазини | листівки й «Особистий» (templates/landing/_ttabs.html) */
.ttabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-top: 28px; border-radius: calc(var(--r) + 4px); background: var(--raised-2); }
.ttabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r); color: var(--ink-2);
  text-decoration: none; font: 400 16px var(--f-text); }
.ttabs a:hover { color: var(--ink); }
.ttabs a[aria-current="page"] { background: var(--ink); color: var(--ground); }
.ttabs a span { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 10px; background: var(--lime); color: var(--on-lime); }
@media (max-width: 520px) {
  .ttabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 18px; }
  .ttabs a { justify-content: center; text-align: center; padding: 0 8px; font-size: 14.5px; line-height: 1.2; }
  .ttabs a span { display: none; }
}

/* головна: смужка «Нове — листівки» під кнопками першого екрана */
.hero__new { display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: var(--r);
  background: var(--raised-2); color: var(--ink); font-size: 16px; line-height: 1.45; max-width: 100%; }
.hero__new a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero__new a:hover { text-decoration-thickness: 2px; }
.hero__tag { flex: none; margin-top: 1px; font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 10px; background: var(--lime); color: var(--on-lime); }