:root{
  --space-xs:.375rem;
  --space-sm:.625rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f7f8;color:#171717}
main{max-width:1180px;margin:auto;padding:48px 24px 72px}
.hero{
  background:white;
  border:1px solid #e8e8eb;
  border-radius:var(--radius-lg);
  padding:clamp(24px,5vw,48px);
  margin-bottom:24px;
}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
h1{font-size:clamp(2rem,5vw,4rem);line-height:1.02;margin:.5rem 0 1rem}
h2{margin-top:0}
.lead{max-width:760px;font-size:1.125rem;line-height:1.65}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{
  grid-column:span 4;
  background:white;
  border:1px solid #e7e7ea;
  border-radius:var(--radius-md);
  padding:24px;
  min-width:0;
}
.card.wide{grid-column:span 8}
.meta{font-size:.875rem;color:#666}
.legal-text{font-size:1rem;line-height:1.7;max-width:72ch}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:.75rem 0}
.badge{padding:6px 10px;border-radius:var(--radius-pill);background:#efeff2;font-size:.78rem;font-weight:700}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
button{
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  padding:12px 18px;
  min-height:44px;
  font-weight:700;
  cursor:pointer;
}
button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.primary{background:#171717;color:white}
.secondary{background:#ececef;color:#171717}
.preference{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 0;
  border-top:1px solid #ececef;
}
@media (max-width:1023px){
  .card,.card.wide{grid-column:span 6}
}
@media (max-width:767px){
  main{padding:24px 16px 48px}
  .card,.card.wide{grid-column:1/-1}
  .actions{flex-direction:column}
  .actions button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}