/* ==========================================================================
   WHAT IS LINK BUILDING? - GUIDE DESIGN SYSTEM (guide.css)
   Extends style.css tokens (colors, typography, spacing, shadows).
   Namespaced with "guide-" to avoid collisions with other pages.
   ========================================================================== */

/* This page's hero is much shorter than the homepage hero it borrows
   decoration from. The homepage's ambient wash (body::before) and its
   hero-glow-a both fade out over roughly the same fixed pixel distance
   regardless of hero height, so on a tall hero that fade finishes well
   before the hero ends and is invisible; on this short hero it finishes
   mid-hero instead, leaving the top of the page looking faintly tinted
   and everything below it (including the rest of the hero) looking
   flat, right around where the dark snapshot card sits. Neutralizing
   both sources here keeps this page's background one flat, consistent
   tone from the very top down, instead of relying on the fade to
   finish somewhere the eye won't notice. */
body::before { display: none; }
.guide-hero .hero-bg { display: none; }

/* --------------------------------------------------------------------
   1. HERO - Split Layout (Copy Left, Guide Snapshot Card Right)
   -------------------------------------------------------------------- */
.guide-hero {
  position: relative;
  padding: calc(var(--space-section) + 40px) 32px 50px;
  overflow: hidden;
}
.guide-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.guide-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  background: var(--surface-cream);
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.guide-hero-kicker svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-dark);
}
.guide-hero h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.12;
  margin-bottom: 22px;
  letter-spacing: -0.03em;
}
.guide-hero-sub {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.guide-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-soft);
}
.guide-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guide-meta-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-dark);
}
.guide-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Guide Snapshot Card (Right hero companion) */
.guide-snapshot-card {
  background: linear-gradient(180deg, var(--dark-softer), var(--dark));
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-dark);
  position: relative;
  overflow: hidden;
}
.guide-snapshot-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 223, 135, 0.16), transparent 70%);
  pointer-events: none;
}
.guide-snapshot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(200, 223, 135, 0.12);
  border: 1px solid rgba(200, 223, 135, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.guide-snapshot-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.guide-snapshot-sub {
  color: var(--cream-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.guide-snapshot-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guide-snapshot-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.guide-snapshot-item:hover {
  transform: translateX(3px);
  border-color: rgba(200, 223, 135, 0.3);
}
.guide-snapshot-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(200, 223, 135, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide-snapshot-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.guide-snapshot-item-text h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.guide-snapshot-item-text p {
  color: var(--cream-text-muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------
   2. MAIN GUIDE CONTAINER & TWO-COLUMN LAYOUT (TOC + ARTICLE)
   -------------------------------------------------------------------- */
.guide-section {
  padding: 30px 32px 80px;
}
.guide-container {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 56px;
  align-items: flex-start;
}

/* Sticky Table of Contents Sidebar */
.guide-sidebar {
  position: sticky;
  top: 96px;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.guide-sidebar-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-sidebar-title svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent-dark);
}
.guide-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.guide-toc-link {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1.45;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}
.guide-toc-link:hover {
  color: var(--text-primary);
  background: var(--surface-cream);
}
.guide-toc-link.active {
  color: var(--accent-dark);
  font-weight: 600;
  background: var(--surface-cream-dark);
  border-left-color: var(--accent-dark);
}

/* Guide Article Content Column */
.guide-content {
  min-width: 0;
}
.guide-block {
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}
.guide-block h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  line-height: 1.22;
}
.guide-block h3 {
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  color: var(--text-primary);
  margin: 30px 0 14px;
}
.guide-block p {
  color: var(--text-secondary);
  font-size: 16.5px;
  line-height: 1.78;
  margin-bottom: 20px;
}
.guide-block p strong {
  color: var(--text-primary);
}
.guide-block a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.guide-block a:hover {
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------
   3. VISUAL CALLOUT CARDS & TAKEAWAYS
   -------------------------------------------------------------------- */
.guide-callout {
  background: var(--surface-white);
  border-left: 4px solid var(--accent-dark);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 24px 28px;
  margin: 28px 0;
  box-shadow: var(--shadow-card);
}
.guide-callout-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.guide-callout-icon {
  width: 22px;
  height: 22px;
  stroke: var(--accent-dark);
  flex-shrink: 0;
}
.guide-callout-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.guide-callout p {
  margin-bottom: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------
   2b. LINK DIAGRAM — visual explainer for "what is a backlink"
   -------------------------------------------------------------------- */
.guide-link-diagram {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 24px 0 28px;
}
.guide-link-diagram-box {
  flex: 1;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.guide-link-diagram-a {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
}
.guide-link-diagram-b {
  background: var(--accent-light);
  border: 1px solid var(--accent-strong);
}
.guide-link-diagram-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
}
.guide-link-diagram-sub {
  font-size: 13px;
  color: var(--text-muted);
}
.guide-link-diagram-arrow {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--accent-dark);
}
.guide-link-diagram-arrow svg {
  width: 26px;
  height: 26px;
}
.guide-link-diagram-arrow span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .guide-link-diagram {
    flex-direction: column;
  }
  .guide-link-diagram-arrow {
    flex-direction: row;
    transform: rotate(90deg);
  }
  .guide-link-diagram-arrow span {
    display: none;
  }
}

/* Gut check box with warm accent */
.guide-gut-check {
  background: linear-gradient(135deg, #f7f9f0, #eef4df);
  border: 1px solid rgba(74, 112, 56, 0.2);
  border-radius: var(--radius-md);
  padding: 26px 30px;
  margin: 28px 0;
}
.guide-gut-check h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-gut-check p {
  margin-bottom: 0;
  font-size: 15.5px;
  color: #2b3d22;
  line-height: 1.65;
}

/* --------------------------------------------------------------------
   4. COMPARISON MATRIX: Good vs. Risky Backlinks
   -------------------------------------------------------------------- */
.guide-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 32px 0;
}
.guide-compare-card {
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
}
.guide-compare-card-good {
  background: var(--surface-white);
  border: 1px solid rgba(74, 112, 56, 0.25);
  position: relative;
}
.guide-compare-card-good::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-dark);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.guide-compare-card-bad {
  background: #fdfbfb;
  border: 1px solid rgba(220, 53, 69, 0.22);
  position: relative;
}
.guide-compare-card-bad::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #dc3545;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.guide-compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.guide-compare-badge-good {
  background: #eaf3e1;
  color: #315c20;
}
.guide-compare-badge-bad {
  background: #fae8e8;
  color: #b02a37;
}
.guide-compare-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text-primary);
}
.guide-compare-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide-compare-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.guide-compare-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
}
.guide-compare-card-good svg {
  stroke: #315c20;
}
.guide-compare-card-bad svg {
  stroke: #b02a37;
}

/* --------------------------------------------------------------------
   5. 4-PILLAR EVALUATION FRAMEWORK CARDS
   -------------------------------------------------------------------- */
.guide-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 30px 0;
}
.guide-pillar-card {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.guide-pillar-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-strong);
}
.guide-pillar-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-light);
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.guide-pillar-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.guide-pillar-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------
   6. 5 PRACTICAL TACTICS CARDS
   -------------------------------------------------------------------- */
.guide-tactics-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 30px 0;
}
.guide-tactic-card {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
}
.guide-tactic-meta h3 {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.guide-tactic-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent-dark);
  background: var(--surface-cream);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
.guide-tactic-desc p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
}

/* --------------------------------------------------------------------
   7. 3-LAYER SEO PYRAMID (Links amplify, don't fix)
   -------------------------------------------------------------------- */
.guide-pyramid-wrap {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  margin: 30px 0;
}
.guide-pyramid-intro {
  margin-bottom: 20px;
}
.guide-pyramid-layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide-pyramid-layer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
}
.guide-layer-1 {
  background: #f4efe4;
  border: 1px solid #e5dccb;
}
.guide-layer-2 {
  background: #eef3e1;
  border: 1px solid #dce8c6;
}
.guide-layer-3 {
  background: linear-gradient(180deg, var(--dark-softer), var(--dark));
  color: #fff;
  border: 1px solid var(--border-dark);
}
.guide-layer-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.guide-layer-1 .guide-layer-badge { background: #dfd5c0; color: #443c2c; }
.guide-layer-2 .guide-layer-badge { background: #cfe0ad; color: #324c1e; }
.guide-layer-3 .guide-layer-badge { background: rgba(200, 223, 135, 0.2); color: var(--accent); }
.guide-layer-info h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.guide-layer-1 h4, .guide-layer-2 h4 { color: var(--text-primary); }
.guide-layer-3 h4 { color: #fff; }
.guide-layer-info p {
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
}
.guide-layer-1 p, .guide-layer-2 p { color: var(--text-muted); }
.guide-layer-3 p { color: var(--cream-text-muted); }

/* --------------------------------------------------------------------
   8. PRE-OUTREACH VETTING CHECKLIST
   -------------------------------------------------------------------- */
.guide-checklist-card {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-card);
  margin: 30px 0;
}
.guide-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.guide-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-cream);
  border-radius: var(--radius-sm);
}
.guide-checklist-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent-dark);
  stroke-width: 2.2;
  flex-shrink: 0;
  margin-top: 2px;
}
.guide-checklist-item span {
  font-size: 14.5px;
  color: var(--text-primary);
  line-height: 1.5;
  font-weight: 500;
}

/* --------------------------------------------------------------------
   9. FAQ SECTION IN GUIDE
   -------------------------------------------------------------------- */
.guide-faq-wrap {
  margin-top: 20px;
}
.guide-faq-wrap .faq-item {
  background: var(--surface-white);
  border-color: var(--border-light);
}
.guide-faq-wrap .faq-question {
  color: var(--text-primary);
}
.guide-faq-wrap .faq-icon {
  background: var(--surface-cream);
  color: var(--accent-dark);
}
.guide-faq-wrap .faq-item.open .faq-icon {
  background: var(--accent-light);
  color: var(--text-primary);
}
.guide-faq-wrap .faq-answer p {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------
   10. AUTHOR SPECIALIST CARD (E-E-A-T Signal)
   -------------------------------------------------------------------- */
.guide-author-card {
  background: linear-gradient(180deg, var(--dark-softer), var(--dark));
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-dark);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  align-items: center;
  margin: 50px 0 30px;
}
.guide-author-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  box-shadow: 0 0 20px rgba(200, 223, 135, 0.25);
  flex-shrink: 0;
}
.guide-author-info h3 {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 4px;
}
.guide-author-role {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 12px;
}
.guide-author-bio {
  color: var(--cream-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------
   11. BOTTOM HIGH-CONVERTING CTA CARD
   -------------------------------------------------------------------- */
.guide-bottom-cta {
  background: linear-gradient(180deg, #1f2518, #0d120a);
  border: 1px solid rgba(200, 223, 135, 0.2);
  border-radius: var(--radius-xl);
  padding: 56px 40px;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}
.guide-bottom-cta::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(200, 223, 135, 0.2), transparent 70%);
  pointer-events: none;
}
.guide-bottom-cta h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  margin-bottom: 16px;
}
.guide-bottom-cta p {
  color: var(--cream-text-muted);
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.68;
}
.guide-bottom-cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------------
   12. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .guide-container {
    grid-template-columns: 240px 1fr;
    gap: 36px;
  }
  .guide-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .guide-snapshot-card {
    max-width: 600px;
  }
}

@media (max-width: 860px) {
  .guide-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .guide-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 30px;
    /* On mobile, make the TOC visually distinct as a "contents" block */
    border-left: 3px solid var(--accent-dark);
    border-radius: var(--radius-sm);
  }
  .guide-sidebar-title {
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  .guide-toc-link {
    font-size: 14px;
    padding: 9px 14px;
  }
  .guide-tactic-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .guide-compare-grid {
    grid-template-columns: 1fr;
  }
  .guide-author-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .guide-checklist-grid {
    grid-template-columns: 1fr;
  }
  .guide-pillars-grid {
    grid-template-columns: 1fr;
  }
  .guide-block {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 640px) {
  .guide-hero {
    padding-top: 120px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .guide-section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .guide-bottom-cta {
    padding: 38px 22px;
  }
  .guide-snapshot-card {
    padding: 24px 20px;
  }
}
/* ============================================================
   SEO fixes (2026-09-25): semantic lists, definition, table,
   FAQ question headings, author name
   ============================================================ */
ul.guide-snapshot-list,
ul.guide-compare-list,
ul.guide-tactics-grid,
ul.guide-checklist-grid,
ul.guide-bullets { list-style: none; }

.guide-snapshot-item-title {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.guide-snapshot-title { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; }

.guide-block p.guide-definition {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--surface-cream);
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radius-xs);
  padding: 18px 22px;
}

.guide-bullets { margin: 16px 0 24px; }
.guide-bullets li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-size: 16.5px;
  line-height: 1.7;
}
.guide-bullets li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
}

.guide-table-wrap {
  overflow-x: auto;
  margin: 8px 0 28px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-white);
  box-shadow: var(--shadow-card);
}
.guide-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; min-width: 560px; }
.guide-table caption {
  text-align: left;
  padding: 16px 20px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
}
.guide-table th, .guide-table td { text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--border-light); vertical-align: top; color: var(--text-secondary); }
.guide-table thead th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-cream); }
.guide-table tbody th { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.guide-table tbody tr:last-child th, .guide-table tbody tr:last-child td { border-bottom: none; }

.guide-block .faq-q-heading { margin: 0; padding: 0; font: inherit; letter-spacing: normal; line-height: inherit; color: inherit; }

.guide-author-info .guide-author-name {
  font-family: var(--font-display);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
@media (max-width: 640px) {
  .guide-table { min-width: 0; }
  .guide-table thead { display: none; }
  .guide-table tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--border-light); }
  .guide-table tbody tr:last-child { border-bottom: none; }
  .guide-table th, .guide-table td { display: block; padding: 2px 0; border: none; white-space: normal; }
  .guide-table tbody th { margin-bottom: 4px; }
  .guide-table td:nth-of-type(2)::before { content: "Effort: "; font-weight: 600; color: var(--text-primary); }
  .guide-table td:nth-of-type(3)::before { content: "Best for: "; font-weight: 600; color: var(--text-primary); }
}

/* Real client campaign (proof) */
.guide-case {
  margin: 32px 0 8px;
  padding: 28px;
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.guide-case-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-light);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: 12px;
}
.guide-block .guide-case h3 { margin: 0 0 12px; }
.guide-case-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 8px 0 22px;
}
.guide-case-stats li {
  background: var(--surface-cream);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.guide-case-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.15;
}
.guide-case-stats span { display: block; font-size: 13px; line-height: 1.4; color: var(--text-muted); margin-top: 4px; }
.guide-case-figure { margin: 0 0 20px; }
.guide-case-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.guide-case-figure figcaption { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-top: 10px; }
.guide-block .guide-case-figure a { text-decoration: none; }
.guide-block .guide-case p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .guide-case { padding: 20px; }
  .guide-case-stats { grid-template-columns: 1fr 1fr; }
}

/* Small phones (≤400px) */
@media (max-width: 400px) {
  .guide-case-stats { grid-template-columns: 1fr; }
  .guide-pyramid-layer { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Definition box: white card so it stands out from the cream page background */
.guide-block p.guide-definition { background: var(--surface-white); box-shadow: var(--shadow-card); }

/* ------------------------------------------------------------
   Web 2.0 Backlinks guide additions (2026-09-29)
   ------------------------------------------------------------ */
.w2-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  line-height: 1.5;
}
.w2-pill-good { background: var(--accent-light); color: var(--accent-dark); }
.w2-pill-bad  { background: #f6dedb; color: #9a2f22; }
.w2-pill-warn { background: #f7ecd2; color: #7a5a12; }

.guide-block .w2-card-title,
.guide-block .w2-pyramid-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.guide-block .w2-pyramid-title { margin-bottom: 6px; }
.w2-pyramid-sub { font-size: 14.5px; color: var(--text-muted); margin: 0; }
.w2-service-buttons { margin-top: 28px; }
.guide-block .guide-case-figure { margin: 24px 0; }

/* Mobile tables: label each cell from its data-label attribute */
@media (max-width: 640px) {
  .guide-table.has-labels td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--text-primary);
  }
  .guide-table.has-labels td { padding: 3px 0; }
}
.w2-checklist-bad .guide-checklist-item svg { stroke: #b3372a; }
.guide-block .w2-service-buttons a.btn { text-decoration: none; color: var(--text-primary); }
.guide-callout p + p { margin-top: 12px; }