/* Hallmark · page styles for this route; stamp and tokens live in site.css · hero: Settled */
.hero--settled { padding-block: var(--space-2xl); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.hero--settled .hero__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.hero--settled h1 { font-size: clamp(2.5rem, 2.9vw + 1rem, 4.25rem); max-width: 12ch; text-wrap: balance; }
.hero--settled .lead { max-width: 44ch; }
.hero--settled .actions { margin-top: var(--space-xs); }
.hero-code { grid-column: 6 / -1; margin-left: var(--space-2xl); align-self: center; min-width: 0; }
.hero-code pre { margin: 0; padding: var(--space-lg) var(--space-xl); overflow-x: auto; font-size: var(--text-sm); line-height: 1.75; color: var(--color-panel-ink); }
.hero-code__facts { margin: 0; display: grid; border-top: 1px solid var(--color-panel-rule); }
.hero-code__facts > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) var(--space-xl); border-bottom: 1px solid var(--color-panel-rule); }
.hero-code__facts > div:last-child { border-bottom: 0; }
.hero-code__facts dt { color: var(--color-panel-ink-2); }
.hero-code__facts dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-panel-ink); }
.hero-code__facts small { display: block; margin-top: var(--space-3xs); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-panel-ink-2); }

.apx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); border-top: 1px solid var(--color-rule-strong); }
.apx section { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.apx h3 { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.apx ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-md); color: var(--color-ink-2); }

.facts-list { list-style: none; display: grid; border-top: 1px solid var(--color-rule-strong); }
.facts-list li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-ink); font-weight: 500; }

.headless { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.headless__text, .events__text { display: grid; gap: var(--space-lg); align-content: center; }
.headless__text h2, .events__text h2 { font-size: var(--text-section); max-width: 16ch; text-wrap: balance; }
.headless__text .lead, .events__text .lead { max-width: 46ch; }
.headless__text { grid-column: 1 / span 5; }
.flowmap { grid-column: 7 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.flowmap h3 { margin-bottom: var(--space-sm); font: 500 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink-2); }
.flowmap ul { list-style: none; display: grid; gap: var(--space-xs); }
.flowmap__col li { position: relative; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-inner); background: var(--color-paper); color: var(--color-ink); font-weight: 500; }
.flowmap__in li::after, .flowmap__out li::before { content: ""; position: absolute; top: 50%; width: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.flowmap__in li::after { left: 100%; }
.flowmap__out li::before { right: 100%; }
.flowmap__core { padding: var(--space-lg); border-radius: var(--radius-card); }
.flowmap__core h3 { color: var(--color-panel-ink); font-weight: 500; font-size: var(--text-md); }
.flowmap__core ul { gap: 0; }
.flowmap__core li { padding-block: var(--space-xs); border-bottom: 1px solid var(--color-panel-rule); color: var(--color-panel-ink); }
.flowmap__core li:last-child { border-bottom: 0; }

.events { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.events__panel { grid-column: 1 / span 7; }
.events__text { grid-column: 9 / -1; }
.hooks { list-style: none; display: grid; padding: var(--space-xs) var(--space-lg); }
.hooks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-bottom: 1px solid var(--color-panel-rule); }
.hooks li:last-child { border-bottom: 0; }
.hooks .icon { color: var(--color-panel-ink-2); }
.hooks b { display: block; font-weight: 500; color: var(--color-panel-ink); }
.hooks small { color: var(--color-panel-ink-2); }
.hooks .ui-pill { font-family: var(--font-mono); }

.docs__lead { display: grid; gap: var(--space-lg); justify-items: start; }
.docs__lead .lead { max-width: 44ch; }
#docs .rows dd.mono { font-family: var(--font-mono); font-size: var(--text-lg); }
#docs .head { align-items: start; }

@media (max-width: 60rem) {
  .hero--settled .hero__text, .hero-code, .headless__text, .flowmap, .events__panel, .events__text { grid-column: 1 / -1; }
  .events__text { order: -1; }
  .apx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-code pre { padding: var(--space-md); }
  .hero-code__facts > div { padding-inline: var(--space-md); }
}
@media (max-width: 40rem) {
  .apx { grid-template-columns: minmax(0, 1fr); }
  .flowmap { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .flowmap__in li::after, .flowmap__out li::before { display: none; }
  .hero-code__facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

.route a:focus-visible, .facts-list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.route a:active { background: var(--color-paper-2); }
@media (max-width: 60rem) { .hero-code { margin-left: 0; } }