/* ==================================================
   Design tokens
   ================================================== */
:root {
  --bg: #fffbfe;
  --text: #000;

  --font-main: "Montserrat", system-ui, -apple-system, sans-serif;

  --pad: 30px;

  --lh-tight: 0.7;
  --lh-normal: 1.2;
}

/* ==================================================
   Base reset
   ================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-main);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ==================================================
   Layout
   ================================================== */
.page {
  min-height: 100vh;
  padding: var(--pad);
}

/*
  This block gets scaled by JS if it would overflow.
  No wrapping, no horizontal scroll.
*/
.fit-stage {
  display: inline-block;
  white-space: nowrap;
}

/* ==================================================
   Header structure
   ================================================== */
.site-header {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ==================================================
   Typography
   ================================================== */
.brand {
  margin: 0;
  font-weight: 900;
  font-size: 46px;      /* mobile base */
  line-height: var(--lh-normal);
}

.claim {
  margin: 0;
  font-weight: 800;
  font-size: 24px;      /* mobile base */
  line-height: var(--lh-normal);
}

.note {
  margin: 0;
  font-weight: 600;
  font-size: 16px;      /* mobile base */
  line-height: var(--lh-tight);
  white-space: pre-line;
}

/* ==================================================
   Tablet
   ================================================== */
@media (min-width: 768px) {
  .site-header { gap: 50px; }

  .brand { font-size: 106px; }
  .claim { font-size: 56px; }
  .note  { font-size: 36px; }
}

/* ==================================================
   Desktop
   ================================================== */
@media (min-width: 1024px) {
  .brand { font-size: 170px; }
  .claim { font-size: 86px; }
  .note  { font-size: 60px; }
}