/* Palette and type from assets/new_logo_rank_active_03.png ("Lagoon & Blush").
   Wordmark: Fredoka 700. Tagline and body: Nunito. Shared by index.html and
   privacy.html. */
body { background-color: #FFFFFF; color: #284F60; font-family: 'Nunito', sans-serif; }
a { color: #284F60; text-decoration: underline; }
a:hover { color: #1B3742; }
.wordmark { font-family: 'Fredoka', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.hero { padding: 3rem 0 2.5rem; }
.hero-content { position: relative; z-index: 1031; }
.hero-content > img, .hero-content .wordmark, .hero-content .tagline { transform-origin: 0 0;
  will-change: transform; }
.hero.is-measuring .hero-content * { animation: none !important; }
.hero.is-docked .hero-content { visibility: hidden; }
.hero-mark { width: 9rem; height: 9rem; }
.hero .wordmark { font-size: 4.5rem; line-height: 1; margin: 0; }
.tagline { font-weight: 700; font-size: 1.75rem; margin: 0.25rem 0 0; }
.lead { font-size: 1.2rem; }
.love { border-radius: 1rem; padding: 1.25rem 1rem; height: 100%; font-weight: 700; font-size: 1.1rem; text-align: center; }
.love-blush { background-color: #FDE6EC; }
.love-lagoon { background-color: #E3F3F8; }
.love-seafoam { background-color: #E5F3ED; }
.soon { display: inline-block; background-color: #284F60; color: #FFFFFF; border-radius: 2rem; padding: 0.6rem 1.5rem; font-weight: 700; }
footer { color: #6B8A98; font-size: 0.9rem; }
footer a { color: #6B8A98; }

/* Compact header: logo, name and tagline, centered. On other pages it is a
   normal, always-visible header. On the landing page it is fixed at the top:
   its background (.site-header-bg) fades in as the hero's logo, name and
   tagline glide up into the slots its own (hidden) copies hold, and once they
   arrive the header's copies take over. The script in index.html drives this
   with the dock-* animations below on a scroll timeline; the .is-docked rules
   are the end state for reduced motion. */
.site-header { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem;
  background-color: #FFFFFF; text-align: left; }
.site-header, .site-header:hover { color: #284F60; text-decoration: none; }
.site-header img { width: 2.5rem; height: 2.5rem; margin-right: 0.6rem; }
.site-header .wordmark { font-size: 1.5rem; line-height: 1; }
.site-header .tagline { font-size: 0.85rem; margin: 0.1rem 0 0; }
.site-header-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background-color: transparent; pointer-events: none; }
.site-header-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background-color: #FFFFFF; box-shadow: 0 1px 6px rgba(40, 79, 96, 0.12); }
.site-header-bg, .site-header-fixed img, .site-header-fixed .wordmark,
.site-header-fixed .tagline { opacity: 0; }
.site-header-fixed.is-docked { pointer-events: auto; }
.is-docked .site-header-bg, .site-header-fixed.is-docked img, .site-header-fixed.is-docked .wordmark,
.site-header-fixed.is-docked .tagline { opacity: 1; }
@keyframes dock-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dock-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }

.policy-title { text-align: center; padding: 3.5rem 1rem 3rem; margin-bottom: 1rem;
  background: linear-gradient(#E3F3F8, #FFFFFF); }
.policy-title h1 { font-size: 3.5rem; line-height: 1.05; margin: 0 0 0.5rem; }
.policy-title p { font-size: 1.25rem; font-weight: 700; color: #6B8A98; margin: 0; }
.policy { max-width: 46rem; font-size: 1.1rem; line-height: 1.7; }
.policy h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.75rem;
  margin: 2.5rem 0 0.75rem; }
.policy li { margin-bottom: 0.25rem; }

@media (max-width: 575.98px) {
  .hero-mark { width: 6rem; height: 6rem; }
  .hero .wordmark { font-size: 3rem; }
  .tagline { font-size: 1.3rem; }
  .policy-title h1 { font-size: 2.5rem; }
}