main { color: var(--ivory); background: var(--anthracite); }
.hero { min-height: calc(100svh - 6rem); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center; gap: clamp(3rem,6vw,6rem); padding-block: 4rem; }
h1 { max-width: 15ch; margin-bottom: 1.5rem; color: var(--champagne); font-size: clamp(2.75rem,4.7vw,4rem); line-height: 1.12; letter-spacing: -.03em; }
.lead { max-width: 55ch; margin: 0; color: rgb(242 239 230 / 82%); font-size: 1.08rem; }
.lead code { color: var(--champagne); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.text-link { min-height: 3.1rem; display: inline-flex; align-items: center; padding-block: .6rem; color: var(--ivory); font-size: .84rem; font-weight: 600; }
main :focus-visible { outline-color: var(--champagne); }
main .button:hover { border-color: var(--champagne); color: var(--anthracite); background: color-mix(in srgb, var(--champagne) 88%, var(--anthracite)); }
.brand-panel { margin: 0; padding: clamp(2rem,5vw,5rem); display: grid; place-items: center; aspect-ratio: 1; background: var(--surface); border-radius: var(--ld-radius-panel); }
.brand-panel img { width: min(100%,20rem); height: auto; }
@media(max-width:52rem) {
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 3rem; padding-block: 3rem; }
  .brand-panel { width: min(100%,30rem); justify-self: center; }
}
@media(max-width:40rem) {
  h1 { font-size: 2.8rem; }
  .actions { align-items: stretch; flex-direction: column; gap: 1rem; }
  .actions .button, .text-link { width: 100%; justify-content: center; }
  .brand-panel { padding: 3rem; }
}