/* ================= Schema Forge: its own hero =================
   The page's own JSON-LD runs down the left as a spine; the tool's name hangs off its "name" key, set huge,
   and the words sit under the name. On narrower screens the code follows the words as one block. */
.sfh {
  display: grid; grid-template-columns: minmax(0, 28.5rem) minmax(0, 1fr);
  grid-template-areas: "before name" "rest copy";
  column-gap: clamp(24px, 3vw, 56px); row-gap: clamp(28px, 3vw, 48px);
  padding: clamp(48px, 9vh, 112px) var(--m) 0;
}
.sfh-pre {
  margin: 0; font: 400 1rem/1.6 var(--f-code); /* taste-skill-ignore: real JSON-LD from this page's head */
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.sfh-k { color: var(--accent-text); }
.sfh-v { color: var(--ink); }

.sfh-before { grid-area: before; align-self: end; padding-bottom: .55em; }
.sfh-name {
  grid-area: name; align-self: end; margin-left: -.06em;
  font-size: calc((100vw - 600px) / 6.6); line-height: .9; letter-spacing: -0.045em; white-space: nowrap;
}
.sfh-q { color: var(--accent-text); }

.sfh-rest { grid-area: rest; margin: 0; }
.sfh-rest figcaption { margin-top: 20px; max-width: 34ch; font-size: var(--step-body); line-height: 1.5; color: var(--ink); }
.sfh-copy { grid-area: copy; }

.sfh-title { margin: 0; font: 400 clamp(1.75rem, 1.2rem + 1.9vw, 3rem)/1.05 var(--fd); letter-spacing: -0.02em; max-width: 22ch; }
.sfh-intro { margin: 24px 0 0; max-width: 34em; font-size: var(--step-lead); line-height: 1.5; color: var(--ink); }
.sfh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.sfh-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.sfh-actions .text-link::after { bottom: 9px; }

.sfh-facts { list-style: none; margin: 88px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 52rem; }
.sfh-facts li { display: grid; gap: 6px; align-content: start; }
.sfh-facts b { font: 400 clamp(2.5rem, 1.8rem + 2.4vw, 4.25rem)/.9 var(--fd); letter-spacing: -0.03em; color: var(--accent-text); }
.sfh-facts span { font-size: var(--step-body); line-height: 1.35; color: var(--ink); }

/* the name is struck once, like metal on the anvil: it settles from a slight lift */
@media (prefers-reduced-motion: no-preference) {
  .sfh-name { animation: sfh-strike 900ms var(--ease-out) both; }
  .sfh-before, .sfh-rest { animation: sfh-fade 700ms var(--ease-out) 200ms both; }
  @keyframes sfh-strike { from { opacity: 0; transform: translateY(.12em); } to { opacity: 1; transform: none; } }
  @keyframes sfh-fade { from { opacity: 0; } to { opacity: 1; } }
}

@media (max-width: 1024px) {
  .sfh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "copy" "before" "rest"; row-gap: 0; }
  .sfh-name { font-size: clamp(36px, 14vw, 264px); }
  .sfh-copy { margin-top: clamp(28px, 4vw, 48px); }
  .sfh-before { margin-top: clamp(56px, 8vw, 88px); padding-bottom: 0; }
}
@media (max-width: 760px) {
  .sfh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .sfh-actions .btn { width: 100%; }
}
/* stacked, the name no longer sits beside its key, so the key gets its value back in the code */
@media (max-width: 1024px) { .sfh-before code::after { content: " \"Schema Forge\","; color: var(--ink); } }