.hero { padding: var(--sp-6, 3rem) 0 var(--sp-5, 2rem); }
.hero__inner { max-width: 44rem; margin: 0 auto; text-align: center; }
.hero__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--sp-3); }
.hero__title { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.15; margin: 0 0 var(--sp-3); color: var(--color-text); }
.hero__sub { font-size: var(--text-md, 1.0625rem); color: var(--color-text-muted); margin: 0 0 var(--sp-4); }
.hero__form { display: flex; gap: var(--sp-2); align-items: stretch; text-align: left; }
.hero__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero__input { flex: 1 1 auto; min-width: 0; min-height: 3rem; padding: 0 var(--sp-3); font: inherit; color: var(--color-text); background: var(--color-surface, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius-md, 8px); }
.hero__input:focus-visible, .hero__btn:focus-visible, .hero__chip:focus-visible { outline: 2px solid var(--color-focus, var(--color-accent)); outline-offset: 2px; }
.hero__btn { min-height: 3rem; padding: 0 var(--sp-4); font: inherit; font-weight: 600; cursor: pointer; background: var(--color-accent); color: var(--color-on-accent); border: 0; border-radius: var(--radius-md, 8px); }
.hero__btn:hover { background: var(--color-accent-hover); }
.hero__examples { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.hero__chip { font: inherit; font-size: var(--text-sm); padding: var(--sp-1) var(--sp-3); cursor: pointer; color: var(--color-text); background: transparent; border: 1px solid var(--color-border); border-radius: 999px; }
.hero__chip:hover { border-color: var(--color-accent); }
.hero__match { margin: var(--sp-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); min-height: 1.5em; }
.hero__note { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 560px) { .hero__form { flex-direction: column; } }
.hero__alt { margin: var(--sp-3) 0 0; font-size: var(--text-sm); }
.hero__alt a { color: var(--color-link, var(--color-accent)); }

/* Imagery lane (2026-10-27): optional hero visual beside the text on wide screens. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-5, 2rem); align-items: center; }
.hero__grid .hero__inner { margin: 0; text-align: left; }
.hero__grid .hero__form { max-width: 34rem; }
.hero__visual img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg, 12px); border: 1px solid var(--color-border); box-shadow: var(--shadow-md, 0 6px 24px rgba(23, 29, 45, 0.10)); }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid .hero__inner { text-align: center; margin: 0 auto; }
  .hero__grid .hero__form { margin: 0 auto; }
  .hero__visual { max-width: 26rem; margin: var(--sp-4, 1rem) auto 0; }
}