<div class="schema-stage">
  <div class="schema-card">
    <div class="schema-header">
      <div class="schema-at">@type</div>
      <div class="schema-type-name">Article</div>
      <div class="schema-valid-tag">✓ Valid JSON-LD</div>
    </div>
    <div class="schema-body">
      <div class="schema-section-label">Unlocks SERP Features</div>
      <div class="schema-chips">
        <div class="schema-chip schema-chip-rich">⬡ Rich Result</div>
        <div class="schema-chip schema-chip-snippet">★ Featured Snippet</div>
        <div class="schema-chip schema-chip-author">⌖ Author Markup</div>
        <div class="schema-chip schema-chip-date">⌚ DatePublished</div>
      </div>
      <div class="schema-section-label">Implementation Preview</div>
      <div class="schema-code-peek">
        <span class="schema-s-gray">&lt;script type="application/ld+json"&gt;</span><br>
        &nbsp;&nbsp;<span class="schema-s-gray">{</span> <span class="schema-s-key">"@context"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"https://schema.org"</span><span class="schema-s-gray">,</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="schema-s-key">"@type"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"Article"</span><span class="schema-s-gray">,</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="schema-s-prop">"headline"</span><span class="schema-s-gray">:</span> <span class="schema-s-string">"…"</span><span class="schema-s-gray">,</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;<span class="schema-s-prop">"author"</span><span class="schema-s-gray">:</span> <span class="schema-s-gray">{ … }</span> <span class="schema-s-gray">}</span><br>
        <span class="schema-s-gray">&lt;/script&gt;</span>
      </div>
    </div>
  </div>
</div>

.schema-stage {
  background: #f6f8fa;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}
.schema-card {
  background: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.schema-header {
  background: #f6f8fa;
  border-bottom: 1px solid #e0e6ed;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.schema-at {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #888;
  text-transform: uppercase;
}
.schema-type-name {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: #1a1612;
  letter-spacing: -0.01em;
}
.schema-valid-tag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1d8f4a;
  padding: 4px 10px;
  border: 1.5px solid rgba(29, 143, 74, 0.4);
  border-radius: 3px;
}
.schema-body { padding: 18px 20px; }
.schema-section-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 10px;
}
.schema-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.schema-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 3px;
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.schema-chip-rich    { color: #4285f4; background: #e8f0fe; border-color: #c5d8fd; }
.schema-chip-snippet { color: #1d8f4a; background: #e6f4ea; border-color: #b7e0c2; }
.schema-chip-author  { color: #7c4dff; background: #f3e8ff; border-color: #d9b8ff; }
.schema-chip-date    { color: #b8762d; background: #fef3e2; border-color: #fdd9a0; }
.schema-code-peek {
  background: #f6f8fa;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  padding: 10px 14px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.7;
  overflow: hidden;
}
.schema-s-key    { color: #032f62; }
.schema-s-string { color: #0d6416; }
.schema-s-gray   { color: #888; }
.schema-s-prop   { color: #5a3d99; }