:root {
  color-scheme: dark;
  background: #0a101b;
  color: #eef4ff;
  font: 100%/1.65 system-ui, sans-serif;
}

body { margin: 0; }
a { color: #a6d9ff; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #f5d68f; outline-offset: 4px; }
.wrap { width: min(100% - 2.5rem, 49rem); margin-inline: auto; }
.mast, .footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1rem; }
.mast { justify-content: space-between; border-bottom: 1px solid #324057; }
.brand { color: inherit; font-weight: 800; text-decoration: none; }
.brand span, .eyebrow { color: #a6d9ff; letter-spacing: .08em; text-transform: uppercase; }
.hero, .policy { padding-block: clamp(2rem, 6vw, 4rem); }
h1, h2 { line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 8vw, 4.8rem); letter-spacing: -.045em; margin-block: .15em .35em; }
h2 { font-size: 1.35rem; }
.eyebrow { font-weight: 750; font-size: .82rem; }
.lead { color: #d0dced; font-size: clamp(1.05rem, 2.5vw, 1.3rem); max-width: 40rem; }
.button { display: inline-block; border-radius: .4rem; background: #a6d9ff; color: #0a101b; font-weight: 750; padding: .62rem .95rem; }
.panel { border: 1px solid #324057; border-radius: .65rem; padding: clamp(1rem, 4vw, 2rem); background: #121d2d; }
.panel h2 { margin-top: 0; }
.arabic { margin-block: 1.6rem 2.5rem; color: #d0dced; }
.policy h2 { margin-top: 2rem; }
code { overflow-wrap: anywhere; }
.footer { border-top: 1px solid #324057; font-size: .95rem; }