:root {
      --purple: #673ab7;
      --purple-light: #ede7f6;
      --purple-hover:#6936f5;
      --green: #0f9d58;
      --green-light: #e6f4ea;
      --red: #d93025;
      --surface: #fff;
      --bg: #f8f9fa;
      --text-primary: #202124;
      --text-secondary: #5f6368;
      --text-hint: #80868b;
      --border: #dadce0;
      --shadow-sm: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px rgba(60,64,67,.15);
      --shadow-md: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px rgba(60,64,67,.15);
      --shadow-lg: 0 2px 6px rgba(60,64,67,.3), 0 8px 24px rgba(60,64,67,.15);
      --radius: 8px;
      --radius-lg: 16px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



    /* ── LAYOUT ── */
    .page { max-width: 900px; margin: 0 auto; padding: 0; }

    /* ── H1 SECTION ── */
    .page-header {
      padding: 26px 0;
    }
    .page .breadcrumbs {
      padding: 26px 0 0;
    }
    .page-header h1 {
      font-size: 40px;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .page-header p {
      font-size: 16px;
      color: var(--text-secondary);
      max-width: 680px;
      line-height: 1.75;
    }

    /* ── DIVIDER ── */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 32px 0;
    }

    /* ── HERO BLOCK ── */
    .hero-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 340px;
      margin-bottom: 48px;
    }
    .hero-content {
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--green-light);
      color: var(--green);
      font-size: 12px;
      font-weight: 500;
      border-radius: 12px;
      padding: 4px 12px;
      width: fit-content;
      margin-bottom: 16px;
      letter-spacing: .3px;
    }
    .hero-content h2 {
      font-size: 28px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .hero-caption {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.7;
    }
    .hero-actions {
      margin-top: 28px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .btn-primary {
      background: var(--purple);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      border: none;
      border-radius: 4px;
      padding: 10px 24px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: box-shadow .15s, background .15s;
    }
    .btn-primary:hover { background: var(--purple-hover); box-shadow: var(--shadow-sm); }
    .btn-outline {
      background: transparent;
      color: var(--purple);
      font-size: 14px;
      font-weight: 500;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px 24px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background .15s;
    }
    .btn-outline:hover { background: var(--purple-light); }

    .hero-image-wrap {
      background: linear-gradient(135deg, #e8eaf6 0%, #fce4ec 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    /* Имитация превью формы внутри hero */
    .form-preview {
      display: block;
      cursor: pointer;
    }
    .form-preview img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* ── TEXT BLOCK ── */
    .section { margin-bottom: 48px; }
    .section strong {
      font-weight: bold;
    }
    .section table + p {
      margin-top: 20px;
    }
    .section h2,
    .section-title {
      font-size: 22px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 16px;
    }
    .section p {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 16px;
    }
    .section ul {
      list-style: none;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .section ul li {
      position: relative;
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
      padding-left: 27px;
    }
    .section p a,
    .section ul a {
      font-size: inherit;
      color: var(--purple);
    }
    .section ul li::before {
      content: '';
      width: 20px; height: 20px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      background: var(--purple-light);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237c4dff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-size: contain;
      margin-top: 2px;
    }

    /* Table */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .data-table th {
      background: #f1f3f4;
      font-weight: 500;
      color: var(--text-secondary);
      text-align: left;
      padding: 12px 16px;
      font-size: 13px;
      letter-spacing: .2px;
      border-bottom: 1px solid var(--border);
    }
    .data-table td {
      padding: 12px 16px;
      line-height: 1.2;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .data-table tr:last-child td { border-bottom: none; }
    .data-table tr:hover td { background: #f8f9fa; }
    .badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500;
    }
    .badge-green { background: var(--green-light); color: var(--green); }
    .badge-blue  { background: var(--green-light); color: var(--green); }
    .badge-purple{ background: var(--green-light); color: var(--green); }

    /* ── TABS SECTION (Инструкция) ── */
    .tabs-section { margin-bottom: 48px; }
    .tabs-section .section-title { margin-bottom: 8px; }
    .tabs-section > p {
      font-size: 15px;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    .tabs-bar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
    }
    .tab-btn {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
      background: none;
      border: none;
      padding: 12px 24px;
      cursor: pointer;
      position: relative;
      transition: color .15s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tab-btn::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: transparent;
      transition: background .15s;
    }
    .tab-btn.active { color: var(--purple); }
    .tab-btn.active::after { background: var(--purple); }
    .tab-btn:hover { color: var(--purple); background: var(--purple-light); }

    .tab-panel {
      display: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 var(--radius) var(--radius);
      padding: 28px 32px;
    }
    .tab-panel.active { display: block; }

    /* STEPS */
    .steps-list { display: flex; flex-direction: column; gap: 20px; }
    .step-row { display: flex; gap: 20px; align-items: flex-start;}
    .step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--purple-light); color: var(--purple);  font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
    .step-content h3 {  font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
    .step-content p { font-size: 13px;  line-height: 1.2;   color: var(--text-secondary); }
    .step-content p a {color: #6936f5; font-size: inherit;}

    /* ── OTHER TEMPLATES ── */
    .templates-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .template-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      transition: box-shadow .15s, transform .1s;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .template-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .template-thumb {
      display: block;
      position: relative;
      border-bottom: 1px solid var(--border);
    }
    .template-thumb--badge {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 2;
    }
    .template-thumb--btn {
      position: absolute;
      top: 50%;
      left: 50%;
      line-height: 22px;
      z-index: 2;
      text-align: center;
      height: 24px;
      background-color: #ffffff;
      width: 84px;
      font-size: 14px;
      border-radius: 5px;
      color: var(--purple);
      margin: -10px 0 0 -50px;
      border: 1px solid var(--purple);
      opacity: 0;
      transition: opacity .1s;
    }
    .template-actions--btn {
      display: block;
      padding: 7px;
      background-color: var(--purple);
      font-size: 14px;
      line-height: 1.2;
      color: #fff;
      text-align: center;
      text-decoration: none;
      border-radius: 4px;
      margin: 9px 0 0;
    }
    .template-thumb img {
      display: block;
      height: auto;
      width: 100%;
      transition: opacity .1s;
    }
    .template-thumb.purple { background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%); }
    .template-thumb.blue   { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); }
    .template-thumb.green  { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); }
    .template-thumb.orange { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); }
    .template-thumb.pink   { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); }
    .template-thumb.teal   { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%); }
    .template-info { display: block;padding: 14px 16px; }
    .template-card_cat:hover img {
      opacity: 0.8;
    }
    .template-card_cat:hover .template-thumb--btn {
      opacity: 1;
    }
    .template-name {
      font-size: 16px;
      line-height: 1.2;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .template-desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
            .web-note {
        background: #fff; border: 1px solid #dadce0; border-radius: 8px;
        padding: 20px 24px; display: flex; gap: 16px; align-items: flex-start;
        margin-top: 16px;
      }
      .web-note-icon {
        flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
        background: #e6f4ea; display: flex; align-items: center; justify-content: center;
        font-size: 18px;
      }
      .web-note h3 { font-size: 14px; font-weight: 500; color: #202124; margin-bottom: 4px; }
      .web-note p { font-size: 13px; color: #5f6368; margin: 0; line-height: 1.6; }

      .cta-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
      .btn-filled-g {
        height: 40px; padding: 0 24px; border-radius: 4px; border: none;
        background: #673ab7; 
        font-size: 14px; font-weight: 500; color: #fff;
        cursor: pointer; display: flex; align-items: center; gap: 7px;
        text-decoration: none; transition: background .15s;
      }
      .btn-out-g {
        height: 40px; padding: 0 24px; border-radius: 4px;
        border: 1px solid #dadce0; background: #fff;
        font-size: 14px; font-weight: 500;
        color: #673ab7; cursor: pointer; display: flex; align-items: center; gap: 7px;
        text-decoration: none; transition: background .15s;
      }
      .btn-out-g:hover { background: #673ab7; }

      .auth-note {
        font-size: 12px; color: #5f6368;
        display: flex; align-items: center; gap: 5px;
      }
      .auth-dot { width: 6px; height: 6px; border-radius: 50%; background: #34a853; flex-shrink: 0; }
.step-content_nav {
  margin-top: 7px;
}
      .step-content_nav .btn-filled-g {
    display: inline-block;
      line-height: 26px;
      height: 26px;
}
.qr-promo {
    width: 230px !important;
}
    @media (max-width: 700px) {
      .page{
        padding: 0 20px;
      }
      .hero-card { grid-template-columns: 1fr; }
      .hero-image-wrap { height: 200px; }
      .templates-grid { grid-template-columns: repeat(2, 1fr); }
      .page-header h1 { font-size: 28px; }
    }
@media (max-width: 400px) {

    .templates-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 768px) {
  .responsive-table {
        display: block;
        width: 100%;
        box-shadow: none;
        border: none;
  }
  
  .responsive-table thead {
    display: none;
  }
  
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }
  
  .responsive-table tr {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .responsive-table td {
    display: grid;
    grid-template-columns: 35% 65%;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .responsive-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
  }
  
  .responsive-table td:last-child {
    border-bottom: none;
  }
}