/* /ghiduri/<slug> article — marketing design language (tokens). */
.mkt-guide__top { background: linear-gradient(180deg, #ffe8e8 0%, transparent 100%); padding: var(--space-7, 1.75rem) var(--space-6, 1.5rem) var(--space-2, 0.5rem); }
.mkt-guide__top > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.mkt-guide__crumbs { font-size: var(--font-size-sm, 0.8125rem); color: var(--color-text-muted); margin-bottom: 1.125rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.mkt-guide__crumbs a { color: var(--color-text-muted); text-decoration: none; }
.mkt-guide__crumbs a:hover { color: var(--color-brand-red); }
.mkt-guide__crumb-sep { opacity: .5; }
.mkt-guide .mkt-guide__title { text-transform: none; font-family: var(--font-brand); font-weight: var(--font-weight-bold, 800); font-size: 2.125rem; line-height: 1.25; color: #1b1b1b; margin: 0 auto 1.25rem; }
.mkt-guide__lead { background: var(--color-surface, #fff); border-left: 4px solid var(--color-brand-red); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .05); padding: 1.125rem 1.375rem; font-size: var(--font-size-lg, 1.0625rem); font-weight: var(--font-weight-semibold, 600); color: #1b1b1b; }
.mkt-guide__article { max-width: 46rem; margin: 0 auto; padding: var(--space-8, 1.875rem) var(--space-6, 1.5rem) 0; line-height: 1.7; }
.mkt-guide__prose h2, .mkt-guide__prose h3 { text-transform: none; font-family: var(--font-brand); font-weight: var(--font-weight-semibold, 600); }
.mkt-guide__prose h2 { font-size: 1.375rem; margin: 2.125rem 0 0.75rem; }
.mkt-guide__prose p { margin: 0 0 1rem; color: var(--color-text-secondary, #232323); }
.mkt-guide__prose ul, .mkt-guide__prose ol { margin: 0 0 1.125rem 1.25rem; }
.mkt-guide__prose li { margin-bottom: 0.5rem; }
.mkt-guide__prose img { max-width: 100%; height: auto; border-radius: var(--radius-md, 8px); }
.mkt-guide__steps { list-style: none; counter-reset: s; margin: 1.375rem 0; padding: 0; }
.mkt-guide__steps li { counter-increment: s; position: relative; padding: 0.875rem 1rem 0.875rem 3.75rem; margin-bottom: 0.625rem; background: var(--color-surface-alt, #FAFAFB); border: 1px solid var(--color-border-subtle, #E2E2EA); border-radius: var(--radius-sm, 12px); }
.mkt-guide__steps li::before { content: counter(s); position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-brand-red); color: #fff; font-family: var(--font-brand); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; }
.mkt-guide__faq { max-width: 46rem; margin: 0.625rem auto 0; padding: 0 var(--space-6, 1.5rem); }
.mkt-guide__faq h2 { text-transform: none; font-family: var(--font-brand); font-weight: var(--font-weight-semibold, 600); font-size: 1.375rem; margin: 1.75rem 0 0.5rem; }
.mkt-guide__faq-item { border-bottom: 1px solid var(--color-border-subtle, #E2E2EA); padding: 0.875rem 0; }
.mkt-guide__faq-item summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mkt-guide__faq-item summary::-webkit-details-marker { display: none; }
.mkt-guide__faq-item summary::after { content: "+"; color: var(--color-brand-red); font-size: 1.375rem; font-weight: 700; }
.mkt-guide__faq-item[open] summary::after { content: "–"; }
.mkt-guide__faq-item p { margin-top: 0.625rem; color: var(--color-text-muted); }
.mkt-guide__cta { max-width: 46rem; margin: 2.25rem auto 0; padding: 0 var(--space-6, 1.5rem); }
.mkt-guide__cta-inner { background: var(--color-surface-dark, #1b1b1b); border-radius: 20px; padding: 2.125rem; text-align: center; color: #fff; }
.mkt-guide__cta-title { text-transform: none; font-family: var(--font-brand); font-weight: 700; font-size: 1.375rem; margin: 0 0 1rem; color: #fff; }
.mkt-guide__cta-btn { display: inline-block; background: var(--color-brand-red); color: #fff; font-family: var(--font-brand); font-weight: 700; padding: 0.875rem 2.125rem; border-radius: var(--radius-full, 9999px); font-size: var(--font-size-sm, 0.9375rem); text-decoration: none; }
.mkt-guide__cta-btn:hover { opacity: .9; }
.mkt-guide__related { max-width: 76rem; margin: 3.5rem auto 0; padding: 0 var(--space-6, 1.5rem); }
.mkt-guide__related .mkt-guide__related-title { text-transform: none; font-family: var(--font-brand); font-weight: var(--font-weight-semibold, 600); font-size: 1.25rem; margin: 0 0 1.125rem; }
.mkt-guide__related-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.125rem; }
.mkt-guide__related-card { border: 1px solid var(--color-border-subtle, #E2E2EA); border-radius: 16px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.mkt-guide__related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .07); border-color: var(--color-brand-red); }
.mkt-guide__related-card a { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem; color: inherit; text-decoration: none; }
.mkt-guide__related-card h4 { text-transform: none; font-family: var(--font-brand); font-weight: var(--font-weight-semibold, 600); font-size: 0.9375rem; line-height: 1.35; margin: 0; }
.mkt-guide__back { max-width: 76rem; margin: 2.125rem auto 0; padding: 0 var(--space-6, 1.5rem) var(--space-16, 4rem); }
.mkt-guide__back a { color: var(--color-brand-red); font-weight: 700; text-decoration: none; }

/* GFM comparison tables inside guide bodies. `display:block; overflow-x:auto` turns the
   table into a horizontal scroll container so a wide table never forces page overflow on
   mobile. Scoped to `.mkt-guide__prose table`, so table-less guides are unaffected. */
.mkt-guide__prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}
.mkt-guide__prose th,
.mkt-guide__prose td {
  border: 1px solid var(--color-border, #c2c2c2);
  padding: 0.625rem 0.875rem;
  text-align: left;
  vertical-align: top;
}
.mkt-guide__prose thead th {
  background: var(--color-surface-alt, #fafafb);
  font-family: var(--font-brand);
  font-weight: 700;
  white-space: nowrap;
}
.mkt-guide__prose tbody tr:nth-child(even) { background: var(--color-surface-alt, #fafafb); }