* {
  box-sizing:border-box
}
html {
  color-scheme:light
}
body {
  margin:0;
  background:#fffaf5;
  color:#34261f;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.75
}
a {
  color:#a64713;
  text-underline-offset:.2em
}
a:focus-visible {
  outline:3px solid #d36a26;
  outline-offset:5px
}
header,footer,main {
  max-width:1060px;
  margin:auto;
  padding:24px
}
header,footer {
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap
}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:16px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.2rem;
  font-weight:700;
  text-decoration:none;
  color:inherit
}
.brand img {
  width:48px;
  height:48px;
  border-radius:12px
}
main {
  max-width:840px
}
h1 {
  font-size:clamp(2rem,6vw,3.5rem);
  line-height:1.2;
  letter-spacing:-.03em
}
h2 {
  margin-top:40px;
  line-height:1.4
}
h3 {
  margin-top:28px;
  line-height:1.5
}
.hero {
  padding:40px 0 56px
}
.eyebrow {
  color:#a64713;
  font-weight:650
}
.card,.language-block {
  background:#fff;
  border:1px solid #eddccc;
  border-radius:22px;
  padding:clamp(20px,4vw,36px);
  margin:24px 0
}
.muted {
  color:#75645a
}
footer {
  border-top:1px solid #eddccc;
  margin-top:40px;
  font-size:.9rem
}
p,li,a {
  overflow-wrap:anywhere
}
.skip {
  position:absolute;
  left:-10000px
}
.skip:focus {
  left:20px;
  background:#fff;
  padding:12px;
  z-index:1
}
@media(max-width:520px) {
  header,footer,main {
  padding:20px
}
nav {
  gap:12px
}
.hero {
  padding:16px 0 28px
}

}