/* ============================================================================
   /artcraft/ — хаб мастерской: бумага и тушь.
   Все семь иконок ArtCraft — гравюры тушью на цветном поле; страница о них —
   лист бумаги того же тона (#efe9dc у иконок), на котором эти гравюры лежат.
   Цвета программ — только их собственные, на их же карточках.
   ========================================================================= */

.pb-landing.lp-artcraft {
  --lp-primary:   #2953ba;
  --lp-secondary: #a01d61;
  --lp-accent:    #0a6b58;
  --lp-glow:      rgba(41, 83, 186, .28);
  --lp-glow2:     rgba(160, 29, 97, .18);
  --lp-bg:        #f4efe4;
  --lp-surface:   #fffdf8;
  --lp-border:    rgba(24, 23, 27, .13);
  --lp-text:      #18171b;
  --lp-muted:     #57524a;
  --lp-wave:      #ebe4d5;
  --lp-shadow:    0 10px 30px rgba(60, 40, 10, .10);
}
.pb-landing.lp-artcraft .lp-grid { opacity: .35; }

/* ── Макет героя: семь программ плиткой и цена ──────────────────────────── */
.lp-mockup-artcraft { background: var(--lp-surface); }
.acm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acm__app {
  display: grid; justify-items: center; gap: 4px; padding: 10px 6px 12px; text-align: center;
  border-radius: 14px; background: color-mix(in srgb, var(--app) 9%, var(--lp-surface));
  border: 1px solid color-mix(in srgb, var(--app) 26%, transparent);
}
.acm__app img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.acm__app b { font-size: .82rem; line-height: 1.2; }
.acm__app span { font-size: .7rem; line-height: 1.2; color: var(--lp-muted); }
.acm__app--price { align-content: center; background: var(--lp-text); border-color: var(--lp-text); color: #fffdf8; }
.acm__app--price b { font-size: 1.5rem; }
.acm__app--price span { color: rgba(255, 253, 248, .75); }
@media (prefers-reduced-motion: no-preference) {
  .acm__app { animation: acmIn .5s var(--lp-ease) both; }
  .acm__app:nth-child(2) { animation-delay: .05s; } .acm__app:nth-child(3) { animation-delay: .1s; }
  .acm__app:nth-child(4) { animation-delay: .15s; } .acm__app:nth-child(5) { animation-delay: .2s; }
  .acm__app:nth-child(6) { animation-delay: .25s; } .acm__app:nth-child(7) { animation-delay: .3s; }
  .acm__app:nth-child(8) { animation-delay: .35s; }
}
@keyframes acmIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) { .acm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Стенд: подбор по задаче ────────────────────────────────────────────── */
.acp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .acp { grid-template-columns: 1fr; } }

.acp__tasks { display: grid; gap: 16px; }
.acp__group-t { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-muted); }
.acp__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acp__task {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 13px;
  border-radius: 999px; border: 1.5px solid var(--lp-border); background: var(--lp-surface);
  font: inherit; font-size: .9rem; color: var(--lp-text); cursor: pointer; text-align: left;
  transition: border-color .15s var(--lp-ease), background .15s var(--lp-ease), box-shadow .15s var(--lp-ease);
}
.acp__task:hover { border-color: var(--app); }
.acp__task-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--app); flex: none; }
.acp__task[aria-pressed="true"] {
  border-color: var(--app); background: color-mix(in srgb, var(--app) 12%, var(--lp-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--app) 30%, transparent);
  font-weight: 700;
}

.acp__card {
  position: sticky; top: 90px; padding: 20px; border-radius: 20px;
  background: var(--lp-surface); border: 1px solid var(--lp-border); box-shadow: var(--lp-shadow);
  border-top: 5px solid var(--app, var(--lp-text)); scroll-margin-top: 90px;
}
.acp__card:focus { outline: none; }
.acp__card.is-empty { border-top-color: var(--lp-border); }
@media (max-width: 860px) { .acp__card { position: static; } }
.acp__hint { margin: 0 0 14px; color: var(--lp-muted); line-height: 1.55; }
.acp__dock { display: flex; flex-wrap: wrap; gap: 8px; }
.acp__dock-ic { width: 48px; height: 48px; border-radius: 12px; }

.acp__head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.acp__ic { width: 64px; height: 64px; border-radius: 16px; flex: none; }
.acp__task-name { margin: 0 0 2px; font-size: .82rem; color: var(--lp-muted); }
.acp__app { margin: 0; font-size: 1.05rem; }
.acp__app b { font-size: 1.25rem; }
.acp__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.acp__meta span { font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--app) 12%, transparent); color: var(--lp-text); }

.acp__steps-t { margin: 0 0 6px; font-weight: 700; }
.acp__steps { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 8px; }
.acp__steps li { line-height: 1.55; font-size: .94rem; }
.acp__steps li::marker { font-weight: 700; color: var(--app); }
.acp__result { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--app) 8%, transparent); font-size: .92rem; }
.acp__alt { margin: 0 0 12px; font-size: .9rem; }
.acp__alt a { color: var(--lp-primary); }
.acp__actions { display: flex; flex-wrap: wrap; gap: 10px; }