@font-face {
  font-family: Oswald;
  src: url('assets/oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url('assets/roboto.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  color: #f5f7fc;
  background: radial-gradient(ellipse at top, #183b54, #081625 65%);
  font: 400 16px/1.5 Roboto, sans-serif;
}
main {
  max-width: 620px;
  margin: 0 auto;
  padding: max(26px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.eyebrow { font: 500 12px/1.4 Oswald, sans-serif; letter-spacing: 2px; color: #ffd15c; }
h1 { margin: 12px 0; font: 700 clamp(42px, 10vw, 68px)/1 Oswald, sans-serif; }
h1 span { color: #ffd15c; }
h2 { margin: 8px 0; font: 500 28px/1.2 Oswald, sans-serif; }
.intro { margin: 18px 0 26px; color: #cad5e1; }
section { padding: 22px; border: 1px solid #8197b14a; border-radius: 10px; background: #081625b3; }
section p { margin: 0 0 16px; }
section > p:not(.eyebrow) { color: #c0cddd; font-size: 14px; }
a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px; text-decoration: none; border-radius: 5px; font: 500 17px Oswald, sans-serif; touch-action: manipulation; }
a:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.primary { background: #ffd15c; color: #081625; justify-content: space-between; }
.primary span { font-size: 27px; }
.secondary { margin-top: 12px; border: 1px solid #ffd15c80; color: #ffd15c; }
.note { color: #a4b6c9; font-size: 12px; margin-top: 20px; }
@media (max-width: 360px) {
  main { padding: 20px 16px; }
  section { padding: 18px; }
  .intro { font-size: 14px; margin-bottom: 20px; }
}
@media (max-height: 650px) {
  main { padding-top: 12px; padding-bottom: 12px; }
  .eyebrow { margin-top: 0; margin-bottom: 10px; }
  .intro { margin-top: 14px; margin-bottom: 16px; }
  section { padding-top: 14px; padding-bottom: 14px; }
  .note { margin-top: 14px; margin-bottom: 0; }
}