/* =========================================================
       SEO Slug Studio — Page-Specific Bridge
       Keeps the slug tool engine intact while using modern shell.
    ========================================================= */

    .seo-slug-modern-page .slug-app {
      color: var(--ncm-tool-text);
    }

    .seo-slug-modern-page .slug-app a {
      color: var(--ncm-tool-purple);
      text-decoration: none;
    }

    .seo-slug-modern-page .slug-app a:hover {
      text-decoration: underline;
    }

    .seo-slug-modern-page code,
    .seo-slug-modern-page pre {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .seo-slug-modern-page code {
      background: rgba(139, 44, 255, 0.08);
      border: 1px solid rgba(139, 44, 255, 0.16);
      padding: 2px 6px;
      border-radius: 8px;
      color: var(--ncm-tool-text);
      font-size: 0.92em;
      overflow-wrap: anywhere;
    }

    .seo-slug-modern-page .slug-app .layout-revised {
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: stretch;
    }

    .seo-slug-modern-page .slug-app .top-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
      gap: 22px;
      align-items: start;
    }

    .seo-slug-modern-page .slug-app .panel {
      border-radius: 24px;
      background:
        radial-gradient(circle at top right, rgba(139, 44, 255, 0.08), transparent 16rem),
        rgba(255, 255, 255, 0.97);
      color: var(--ncm-tool-text);
      border: 1px solid rgba(255, 255, 255, 0.72);
      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16);
    }

    .seo-slug-modern-page .slug-app .step-card,
    .seo-slug-modern-page .slug-app .results-card,
    .seo-slug-modern-page .slug-app .info-card {
      padding: clamp(18px, 2vw, 24px);
    }
/* =========================================================
   SEO Slug Studio Hero Layout Fix
   Desktop/tablet cleanup only. Mobile stays stacked.
========================================================= */

.seo-slug-modern-page .ncm-hero-shell {
  width: min(1480px, calc(100% - 48px));
  margin-inline: auto;
}

.seo-slug-modern-page .ncm-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 24px;
  align-items: stretch;
}


.seo-slug-modern-page .ncm-hero-copy h1 {
  max-width: 520px;
  margin-bottom: 22px;
}

.seo-slug-modern-page .ncm-hero-subtitle {
  max-width: 560px;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

.seo-slug-modern-page .ncm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 620px;
}

.seo-slug-modern-page .ncm-hero-actions .ncm-btn {
  min-width: 136px;
}

.seo-slug-modern-page .ncm-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 12px 28px;
  max-width: 560px;
  margin-top: 26px;
}

.seo-slug-modern-page .ncm-hero-visual {
  min-height: 100%;
}

.seo-slug-modern-page .ncm-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Medium screens: keep layout, but reduce crowding */
@media (max-width: 1180px) {
  .seo-slug-modern-page .ncm-hero-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-slug-modern-page .ncm-hero-copy {
    max-width: 720px;
  }

  .seo-slug-modern-page .ncm-hero-visual {
    display: none;
  }
}

/* Mobile: keep the current stacked behavior */
@media (max-width: 760px) {
  .seo-slug-modern-page .ncm-hero-shell {
    width: min(100% - 24px, 1480px);
  }

  .seo-slug-modern-page .ncm-hero-copy {
    max-width: none;
    padding: 22px;
  }

  .seo-slug-modern-page .ncm-hero-actions {
    flex-direction: column;
  }

  .seo-slug-modern-page .ncm-hero-actions .ncm-btn {
    width: 100%;
  }

  .seo-slug-modern-page .ncm-trust-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
    .seo-slug-modern-page .slug-app h2,
    .seo-slug-modern-page .slug-app h3 {
      color: var(--ncm-tool-text);
      letter-spacing: -0.025em;
    }

    .seo-slug-modern-page .slug-app h2 {
      margin: 0 0 14px;
      font-size: clamp(1.3rem, 2vw, 1.7rem);
    }

    .seo-slug-modern-page .slug-app h3 {
      margin: 0 0 5px;
      font-size: 1.08rem;
    }

    .seo-slug-modern-page .step-header {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 16px;
    }

    .seo-slug-modern-page .step-badge {
      min-width: 44px;
      height: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 950;
      background: linear-gradient(135deg, var(--ncm-tool-purple), var(--ncm-tool-purple-2));
      color: #ffffff;
      box-shadow: 0 12px 24px rgba(139, 44, 255, 0.25);
    }

    .seo-slug-modern-page .step-copy p,
    .seo-slug-modern-page .help,
    .seo-slug-modern-page .tip,
    .seo-slug-modern-page .next-step-copy p,
    .seo-slug-modern-page .next-step-note {
      color: var(--ncm-tool-muted);
    }

    .seo-slug-modern-page .tabs,
    .seo-slug-modern-page .actions,
    .seo-slug-modern-page .action-toolbar,
    .seo-slug-modern-page .results-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .seo-slug-modern-page .results-toolbar {
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .seo-slug-modern-page .tab-btn,
    .seo-slug-modern-page button,
    .seo-slug-modern-page summary {
      appearance: none;
      border: 0;
      cursor: pointer;
      border-radius: 14px;
      padding: 11px 15px;
      font: inherit;
      font-weight: 850;
      transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    }

    .seo-slug-modern-page button:hover,
    .seo-slug-modern-page .tab-btn:hover,
    .seo-slug-modern-page summary:hover {
      filter: brightness(1.04);
    }

    .seo-slug-modern-page button:active,
    .seo-slug-modern-page .tab-btn:active,
    .seo-slug-modern-page summary:active {
      transform: translateY(1px);
    }

    .seo-slug-modern-page .tab-btn,
    .seo-slug-modern-page .btn-secondary,
    .seo-slug-modern-page .sample-btn {
      color: var(--ncm-tool-text);
      background: #f8fafc;
      border: 1px solid rgba(15, 23, 42, 0.12);
    }

    .seo-slug-modern-page .tab-btn.active,
    .seo-slug-modern-page .btn-primary,
    .seo-slug-modern-page .next-step-btn {
      color: #ffffff !important;
      background: linear-gradient(135deg, var(--ncm-tool-purple), var(--ncm-tool-purple-2));
      border: 1px solid rgba(139, 44, 255, 0.25);
      box-shadow: 0 14px 28px rgba(139, 44, 255, 0.22);
    }

    .seo-slug-modern-page .btn-success,
    .seo-slug-modern-page .action-btn-free {
      color: #06210f;
      background: linear-gradient(180deg, #4ade80, #22c55e);
      border: 1px solid rgba(34, 197, 94, 0.42);
      box-shadow: 0 8px 22px rgba(34, 197, 94, 0.18);
    }

    .seo-slug-modern-page .btn-danger {
      color: #991b1b;
      background: rgba(239, 68, 68, 0.10);
      border: 1px solid rgba(239, 68, 68, 0.22);
    }

    .seo-slug-modern-page .btn-warning,
    .seo-slug-modern-page .action-btn-pro,
    .seo-slug-modern-page .locked-action {
      color: #92400e;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.25);
    }

    .seo-slug-modern-page .mode-panel {
      display: none;
    }

    .seo-slug-modern-page .mode-panel.active {
      display: block;
    }

    .seo-slug-modern-page .field {
      margin-bottom: 16px;
    }

    .seo-slug-modern-page .label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .seo-slug-modern-page label {
      font-weight: 850;
      font-size: 0.95rem;
      color: var(--ncm-tool-text);
    }

    .seo-slug-modern-page textarea, .seo-slug-modern-page input[type=text], .seo-slug-modern-page input[type=url], .seo-slug-modern-page input[type=number], .seo-slug-modern-page select {
      width: 100%;
      min-height: 46px;
      background: #ffffff;
      color: var(--ncm-tool-text);
      border: 1px solid rgba(15, 23, 42, 0.14);
      border-radius: 14px;
      padding: 13px 14px;
      font: inherit;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }

    .seo-slug-modern-page textarea {
      resize: vertical;
      min-height: 138px;
    }

    .seo-slug-modern-page textarea:focus,
    .seo-slug-modern-page input:focus,
    .seo-slug-modern-page select:focus {
      border-color: rgba(139, 44, 255, 0.55);
      box-shadow: 0 0 0 3px rgba(139, 44, 255, 0.14);
    }

    .seo-slug-modern-page select {
      padding-right: 46px;
    }

    .seo-slug-modern-page .grid-2,
    .seo-slug-modern-page .grid-3,
    .seo-slug-modern-page .grid-4,
    .seo-slug-modern-page .result-grid,
    .seo-slug-modern-page .stats-grid {
      display: grid;
      gap: 14px;
    }

    .seo-slug-modern-page .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seo-slug-modern-page .grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .seo-slug-modern-page .grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .seo-slug-modern-page .checks,
    .seo-slug-modern-page .samples,
    .seo-slug-modern-page .tips {
      display: grid;
      gap: 12px;
    }

    .seo-slug-modern-page .check,
    .seo-slug-modern-page .tip,
    .seo-slug-modern-page .stat-card,
    .seo-slug-modern-page .next-step-card,
    .seo-slug-modern-page .note,
    .seo-slug-modern-page .inline-note,
    .seo-slug-modern-page .alert,
    .seo-slug-modern-page .upgrade-banner {
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.10);
      background: #f8fafc;
      color: var(--ncm-tool-muted);
    }

    .seo-slug-modern-page .check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
    }

    .seo-slug-modern-page .check input[type=checkbox] {
      margin-top: 3px;
      transform: scale(1.08);
      accent-color: var(--ncm-tool-purple);
    }

    .seo-slug-modern-page .check strong {
      display: block;
      color: var(--ncm-tool-text);
      font-size: 0.94rem;
      margin-bottom: 2px;
    }

    .seo-slug-modern-page .check span {
      color: var(--ncm-tool-muted);
      font-size: 0.87rem;
    }

    .seo-slug-modern-page details.advanced {
      border: 1px solid rgba(15, 23, 42, 0.10);
      border-radius: 16px;
      background: #f8fafc;
      overflow: hidden;
      margin-top: 10px;
    }

    .seo-slug-modern-page details.advanced summary {
      list-style: none;
      display: block;
      padding: 16px 18px;
      background: rgba(139, 44, 255, 0.06);
      color: var(--ncm-tool-text);
    }

    .seo-slug-modern-page details.advanced[open] summary {
      border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    }

    .seo-slug-modern-page details.advanced summary::-webkit-details-marker {
      display: none;
    }

    .seo-slug-modern-page .advanced-body {
      padding: 16px 18px 18px;
    }

    .seo-slug-modern-page .inline-note,
    .seo-slug-modern-page .alert,
    .seo-slug-modern-page .upgrade-banner {
      padding: 12px 14px;
      margin-top: 14px;
      font-size: 0.93rem;
    }

    .seo-slug-modern-page .alert,
    .seo-slug-modern-page .upgrade-banner {
      display: none;
      color: #92400e;
      background: rgba(245, 158, 11, 0.10);
      border-color: rgba(245, 158, 11, 0.24);
    }

    .seo-slug-modern-page .alert.show,
    .seo-slug-modern-page .upgrade-banner.show {
      display: block;
    }

    .seo-slug-modern-page .success-banner {
      display: none;
      margin-top: 14px;
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 0.93rem;
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.24);
      color: #166534;
      font-weight: 800;
    }

    .seo-slug-modern-page .success-banner.show {
      display: block;
    }

    .seo-slug-modern-page .pro-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: rgba(245, 158, 11, 0.14);
      color: #92400e;
      border: 1px solid rgba(245, 158, 11, 0.28);
      vertical-align: middle;
    }

    .seo-slug-modern-page .pro-live-inline {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(34, 197, 94, 0.35);
      background: rgba(34, 197, 94, 0.14);
      color: #166534;
      font-size: 0.92rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .seo-slug-modern-page .is-locked,
    .seo-slug-modern-page .pro-lock.is-locked {
      opacity: 0.72;
    }

    .seo-slug-modern-page .result-group {
      margin-top: 1.25rem;
    }

    .seo-slug-modern-page .result-group:first-of-type {
      margin-top: 1rem;
    }

    .seo-slug-modern-page .result-group-title {
      margin-bottom: 0.7rem;
      font-size: 0.85rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ncm-tool-purple);
    }

    .seo-slug-modern-page .result-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seo-slug-modern-page .result-card {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .seo-slug-modern-page .result-card-wide {
      grid-column: 1 / -1;
    }

    .seo-slug-modern-page .result-label {
      font-size: 0.82rem;
      font-weight: 850;
      color: var(--ncm-tool-text);
    }

    .seo-slug-modern-page .result-card textarea {
      min-height: 86px;
    }

    .seo-slug-modern-page .result-card-wide textarea {
      min-height: 118px;
    }

    .seo-slug-modern-page .locked-output textarea {
      background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0.95)),
        repeating-linear-gradient(
          -45deg,
          rgba(15, 23, 42, 0.02),
          rgba(15, 23, 42, 0.02) 10px,
          rgba(15, 23, 42, 0.04) 10px,
          rgba(15, 23, 42, 0.04) 20px
        );
    }

    .seo-slug-modern-page .char-count {
      font-size: 0.75rem;
      color: var(--ncm-tool-muted);
    }

    .seo-slug-modern-page button.action-btn {
      appearance: none;
      border-radius: 14px;
      padding: 11px 15px;
      font: inherit;
      font-weight: 900;
      line-height: 1.2;
      cursor: pointer;
    }

    .seo-slug-modern-page .stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .seo-slug-modern-page .stat-card {
      padding: 14px;
    }

    .seo-slug-modern-page .stat-label {
      display: block;
      color: var(--ncm-tool-muted);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
      font-weight: 900;
    }

    .seo-slug-modern-page .stat-card strong {
      font-size: 1.12rem;
      font-weight: 950;
      color: var(--ncm-tool-text);
    }

    .seo-slug-modern-page .next-step-card {
      margin-top: 22px;
      border-color: rgba(139, 44, 255, 0.18);
      background:
        radial-gradient(circle at top right, rgba(139, 44, 255, 0.10), transparent 14rem),
        #f8fafc;
      padding: 20px;
    }

    .seo-slug-modern-page .next-step-copy h3 {
      margin: 0 0 8px;
      font-size: 1.08rem;
    }

    .seo-slug-modern-page .next-step-eyebrow {
      display: inline-block;
      margin-bottom: 10px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ncm-tool-purple);
      background: rgba(139, 44, 255, 0.10);
      border: 1px solid rgba(139, 44, 255, 0.18);
    }

    .seo-slug-modern-page .next-step-actions {
      margin-top: 16px;
    }

    .seo-slug-modern-page .next-step-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 12px 16px;
      border-radius: 14px;
      font-weight: 900;
      text-decoration: none;
      color: #ffffff !important;
    }

    .seo-slug-modern-page .table-wrap {
      overflow: auto;
      border: 1px solid rgba(15, 23, 42, 0.10);
      border-radius: 16px;
      background: #ffffff;
    }

    .seo-slug-modern-page table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1400px;
    }

    .seo-slug-modern-page th,
    .seo-slug-modern-page td {
      text-align: left;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      vertical-align: top;
      font-size: 0.92rem;
      color: var(--ncm-tool-text);
    }

    .seo-slug-modern-page th {
      position: sticky;
      top: 0;
      background: #f8fafc;
      z-index: 2;
      color: var(--ncm-tool-text);
      font-size: 0.84rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .seo-slug-modern-page tbody tr:hover {
      background: rgba(139, 44, 255, 0.04);
    }

    .seo-slug-modern-page .pill {
      display: inline-block;
      font-size: 0.76rem;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.10);
      background: #f8fafc;
      color: var(--ncm-tool-muted);
      margin-right: 6px;
      margin-bottom: 6px;
      white-space: nowrap;
    }

    .seo-slug-modern-page .pill.warn {
      background: rgba(245, 158, 11, 0.10);
      color: #92400e;
      border-color: rgba(245, 158, 11, 0.22);
    }

    .seo-slug-modern-page .pill.bad {
      background: rgba(239, 68, 68, 0.10);
      color: #991b1b;
      border-color: rgba(239, 68, 68, 0.22);
    }

    .seo-slug-modern-page .pill.ok {
      background: rgba(34, 197, 94, 0.10);
      color: #166534;
      border-color: rgba(34, 197, 94, 0.22);
    }

    .seo-slug-modern-page .empty {
      color: var(--ncm-tool-muted);
      padding: 18px;
    }

    .seo-slug-modern-page .sample-btn {
      width: 100%;
      text-align: left;
    }

    .seo-slug-modern-page .tip {
      border-left: 4px solid rgba(139, 44, 255, 0.45);
      padding: 12px 14px;
    }

    .seo-slug-modern-page .note {
      margin-top: 18px;
      padding: 16px;
      border-color: rgba(245, 158, 11, 0.25);
      background: rgba(245, 158, 11, 0.08);
      color: #92400e;
    }

    .seo-slug-modern-page .note strong {
      display: block;
      color: var(--ncm-tool-text);
      margin-bottom: 5px;
    }

    .seo-slug-modern-page .hidden {
      display: none !important;
    }

    .seo-slug-modern-page .step-pulse {
      animation: stepPulse 1.4s ease;
    }

    @keyframes stepPulse {
      0% {
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(139, 44, 255, 0);
      }
      30% {
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16), 0 0 0 6px rgba(139, 44, 255, 0.14);
      }
      100% {
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(139, 44, 255, 0);
      }
    }

    @media (max-width: 1120px) {
      .seo-slug-modern-page .slug-app .top-grid,
      .seo-slug-modern-page .grid-2,
      .seo-slug-modern-page .grid-3,
      .seo-slug-modern-page .grid-4,
      .seo-slug-modern-page .result-grid,
      .seo-slug-modern-page .stats-grid {
        grid-template-columns: 1fr;
      }

      .seo-slug-modern-page .result-card-wide {
        grid-column: auto;
      }
    }

    @media (max-width: 760px) {
      .seo-slug-modern-page .step-card,
      .seo-slug-modern-page .results-card,
      .seo-slug-modern-page .info-card {
        padding: 18px;
      }

      .seo-slug-modern-page .actions,
      .seo-slug-modern-page .action-toolbar {
        flex-direction: column;
      }

      .seo-slug-modern-page button,
      .seo-slug-modern-page .tab-btn,
      .seo-slug-modern-page .action-btn,
      .seo-slug-modern-page .next-step-btn {
        width: 100%;
      }

      .seo-slug-modern-page table {
        min-width: 1200px;
      }

      .seo-slug-modern-page .step-header {
        align-items: center;
      }
    }

/* =========================================================
   Pro Badge Balance
   Keeps active buttons purple while making PRO badges readable
========================================================= */

.seo-slug-modern-page .pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #312e81;
  background: #eef2ff;
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow: none;
  vertical-align: middle;
}

/* When the badge is inside an active purple tab/button */
.seo-slug-modern-page .tab-btn.active .pro-badge,
.seo-slug-modern-page .btn-primary .pro-badge,
.seo-slug-modern-page .ncm-btn-primary .pro-badge {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Pro locked actions should be quiet, not loud purple */
.seo-slug-modern-page .action-btn-pro,
.seo-slug-modern-page .locked-action {
  color: #312e81;
  background: #f8fafc;
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow: none;
}

.seo-slug-modern-page .action-btn-pro:hover,
.seo-slug-modern-page .locked-action:hover {
  background: #eef2ff;
  border-color: rgba(99, 102, 241, 0.35);
}

/* Keep Pro Active green */
.seo-slug-modern-page .pro-live-inline {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.35);
}


/* =========================================================
   Needy Cat Media ToolKit CTA — SEO Slug Studio
========================================================= */

.seo-slug-modern-page .ncm-toolkit-mini-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 44, 255, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(139, 44, 255, 0.10), transparent 45%),
    #f8fafc;
  color: var(--ncm-tool-text);
}

.seo-slug-modern-page .ncm-toolkit-mini-cta strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ncm-tool-text);
  font-weight: 900;
}

.seo-slug-modern-page .ncm-toolkit-mini-cta span {
  display: block;
  color: var(--ncm-tool-muted);
  font-size: 0.94rem;
  line-height: 1.4;
}

.seo-slug-modern-page .ncm-toolkit-mini-cta a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--ncm-tool-purple), var(--ncm-tool-purple-2));
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(139, 44, 255, 0.18);
}

.seo-slug-modern-page .ncm-toolkit-mini-cta a:hover {
  filter: brightness(1.05);
}

@media (max-width: 760px) {
  .seo-slug-modern-page .ncm-toolkit-mini-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .seo-slug-modern-page .ncm-toolkit-mini-cta a {
    width: 100%;
  }
}

/* =========================================================
   SEO Slug Studio Hero Fix — Wider Copy, Less Cramming
========================================================= */

.seo-slug-modern-page .ncm-hero-shell {
  width: min(1480px, calc(100% - 48px));
  margin-inline: auto;
}

.seo-slug-modern-page .ncm-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 590px;
  align-items: stretch;
}

.seo-slug-modern-page .ncm-hero-copy {
  max-width: none !important;
  width: min(760px, 62%) !important;
  padding: clamp(32px, 4vw, 58px) !important;
}

.seo-slug-modern-page .ncm-hero-copy h1 {
  max-width: 560px !important;
  margin-bottom: 24px;
}

.seo-slug-modern-page .ncm-hero-subtitle {
  max-width: 540px !important;
  font-size: clamp(1.05rem, 1.15vw, 1.18rem);
  line-height: 1.6;
}

.seo-slug-modern-page .ncm-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: 560px !important;
}

.seo-slug-modern-page .ncm-hero-actions .ncm-btn {
  width: auto !important;
  min-width: 135px;
}

.seo-slug-modern-page .ncm-trust-strip {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  gap: 12px 28px !important;
  max-width: 560px !important;
  margin-top: 26px !important;
}

/* Keep the Start Here panel beside the hero */
.seo-slug-modern-page .ncm-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: stretch;
}

.seo-slug-modern-page .ncm-hero-main {
  grid-column: 1;
}

.seo-slug-modern-page .ncm-start-panel {
  grid-column: 2;
}

/* Workflow panel stays full width below */
.seo-slug-modern-page .ncm-workflow-panel {
  grid-column: 1 / -1;
}

/* Medium screens: stack cleanly */
@media (max-width: 1080px) {
  .seo-slug-modern-page .ncm-hero-shell {
    grid-template-columns: 1fr;
  }

  .seo-slug-modern-page .ncm-hero-main,
  .seo-slug-modern-page .ncm-start-panel,
  .seo-slug-modern-page .ncm-workflow-panel {
    grid-column: auto;
  }

  .seo-slug-modern-page .ncm-hero-copy {
    width: min(760px, 100%) !important;
  }
}

/* Mobile: keep current good stacked layout */
@media (max-width: 760px) {
  .seo-slug-modern-page .ncm-hero-shell {
    width: min(100% - 24px, 1480px);
  }

  .seo-slug-modern-page .ncm-hero-main {
    min-height: auto;
  }

  .seo-slug-modern-page .ncm-hero-copy {
    width: 100% !important;
    padding: 22px !important;
  }

  .seo-slug-modern-page .ncm-hero-actions {
    flex-direction: column !important;
  }

  .seo-slug-modern-page .ncm-hero-actions .ncm-btn {
    width: 100% !important;
  }

  .seo-slug-modern-page .ncm-trust-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ToolKit note polish inside SEO Slug hero */
.seo-slug-modern-page .ncm-hero-toolkit-note {
  display: inline-flex;
  max-width: 640px !important;
  margin: 14px 0 0 !important;
  padding: 10px 13px;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.34);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .seo-slug-modern-page .ncm-hero-toolkit-note {
    display: block;
    max-width: none !important;
    font-size: 0.9rem;
  }
}