*, *::before, *::after { box-sizing: border-box; }
/* Height of the sky band above the content, and the gap under it — shared so the homepage hero and the legal pages start their text at the same Y */
:root { --sky-height: clamp(240px, 40vh, 300px); --sky-gap: 16px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  line-height: 1.6;
  color: #111;
}
html:has(body.home), body.home {
  height: 100%;
  overflow: hidden;
}
.page { max-width: 680px; margin: 40px auto; padding: 0 20px; }
nav { margin-bottom: 32px; }
nav a { margin-right: 16px; }
.legal-sky {
  position: relative;
  height: var(--sky-height);
  overflow: hidden;
  background: linear-gradient(180deg, #7fc8ff 0%, #bde2fb 65%, #ffffff 100%);
}
.legal-sky + .page { margin-top: var(--sky-gap); }
.legal-clouds {
  position: absolute;
  left: 0;
  bottom: -55%;
  width: 100%;
  aspect-ratio: 1440 / 887;
  background: url("assets/home/cloud-blob-bottom.svg") no-repeat bottom center / 100% auto;
}
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid #ddd; }
.page-footer { margin-top: 48px; font-size: 14px; color: #555; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; color: #555; background: #f0f0f0; border-radius: 4px; padding: 2px 8px; margin-left: 8px; }
.cta-button { display: inline-block; margin-top: 8px; padding: 8px 16px; background: #111; color: #fff; text-decoration: none; border-radius: 6px; font-size: 14px; }
.cta-button:hover { background: #333; }

/* Hero (homepage) — one fluid design, scales continuously with viewport, no breakpoints */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(155deg, #c2e9ff 6%, #7fc8ff 60%, #9edbff 108%);
}
.hero-clouds { position: absolute; left: 0; width: 100%; pointer-events: none; opacity: 0.75; }
.hero-clouds--top {
  top: 0;
  height: clamp(150px, 40dvh, 560px);
  background: url("assets/home/cloud-blob.svg") no-repeat top center / 100% 100%;
  transform: translateY(-6%);
}
.hero-clouds--bottom {
  bottom: 0;
  height: clamp(150px, 40dvh, 560px);
  background: url("assets/home/cloud-blob-bottom.svg") no-repeat bottom center / 100% 100%;
  transform: translateY(14%);
}
.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(12px, 4vmin, 48px);
  width: 100%;
  max-width: min(90vw, 720px);
  margin: 0 auto;
  /* Top padding mirrors the legal pages' sky band + gap, so the h1 starts at the same Y on every page */
  padding: calc(var(--sky-height) + var(--sky-gap)) 20px clamp(16px, 5vmin, 80px);
  text-align: center;
}
/* Sits outside the content column on every page — a direct child of .hero / .legal-sky, so it never affects how the text below centers, and its Y is the same everywhere */
.balloon {
  position: absolute;
  top: clamp(120px, 14vmin, 130px);
  left: 50%;
  width: clamp(102px, 12vmin, 120px);
  aspect-ratio: 174 / 244;
  transform-origin: 50% 0%;
  animation: balloon-sway 5.2s ease-in-out infinite alternate;
  animation-delay: -2.6s;
}
.balloon-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Ambient sway, exaggerated a bit past the plugin's welcome-screen version (rotation -1.5→1.5, x -4→4) for more presence on the marketing page — translateX(-50%) keeps it horizontally centered under the absolute positioning above */
@keyframes balloon-sway {
  0% { transform: translateX(-50%) rotate(-3deg) translateX(-8px); }
  100% { transform: translateX(-50%) rotate(3deg) translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .balloon { animation: none; }
}
.hero h1, .page h1 {
  width: 100%;
  max-width: 720px;
  margin: 0;
  font-size: clamp(26px, 10vmin, 84px);
  font-weight: 600;
  letter-spacing: clamp(-4px, -0.03em, -1px);
  line-height: 1.2;
  color: #012039;
  overflow-wrap: break-word;
}
.page h1 { text-align: center; margin: 0 auto clamp(12px, 4vmin, 48px); }
.hero-lead {
  width: 100%;
  margin: 0;
  font-size: clamp(20px, 2.4vmin, 24px);
  max-width: min(90vw, 480px);
  color: #012039;
  overflow-wrap: break-word;
}
.hero-cta {
  display: inline-block;
  padding: clamp(10px, 1.6vmin, 15px) clamp(20px, 3vmin, 32px);
  background: #189eff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: clamp(14px, 1.8vmin, 18px);
  font-weight: 500;
  border-radius: 8px;
  flex-shrink: 0;
}
.hero-cta:hover { background: #0f8ce8; }
header.hero-footer { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.hero-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  max-width: min(90vw, 720px);
  margin: 0 auto;
  padding: clamp(16px, 5vmin, 80px) clamp(20px, 3vmin, 40px) clamp(16px, 3vmin, 40px);
  flex-shrink: 0;
  gap: 16px;
}
.hero-logo {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vmin, 12px);
  color: #012039;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(16px, 2vmin, 24px);
  white-space: nowrap;
}
.hero-logo img { width: clamp(24px, 3vmin, 36px); height: clamp(24px, 3vmin, 36px); }
.hero-footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(13px, 1.3vmin, 14px);
  color: #012039;
  margin-bottom: 0;
}
.hero-footer-links a { color: inherit; text-decoration: none; white-space: nowrap; }
.hero-footer-links a:hover { text-decoration: underline; }