/* The top menu, the same on every page: wordmark, page links, two pill buttons. White, clean sans. */
.topbar {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  height: 64px; display: flex; align-items: center; gap: 40px;
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif; color: #fff;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
@media (min-width: 900px) { .topbar { padding-left: 32px; padding-right: 32px; } }
.topbar.scrolled { background: rgba(1, 5, 12, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.topbar .menu { display: flex; align-items: center; gap: 30px; }
.topbar .menu a { font-size: 14px; font-weight: 500; opacity: 0.92; transition: opacity 200ms ease; white-space: nowrap; }
.topbar .menu a:hover, .topbar .menu a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; font: 500 14px/1 "Inter", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.pill-dark { background: rgba(255, 255, 255, 0.1); color: #fff; }
.pill-dark:hover { background: rgba(255, 255, 255, 0.18); }
.pill-light { background: #fff; color: #000 !important; }
.pill-light:hover { background: #e6edf5; }
.pill svg { width: 12px; height: 12px; }
.menu-btn { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.drawer { display: none; }
@media (max-width: 899px) {
  .topbar .menu, .topbar .actions { display: none; }
  .menu-btn { display: inline-flex; }
  .drawer {
    position: fixed; z-index: 49; top: 64px; left: 0; right: 0;
    display: grid; gap: 4px; padding: 12px max(20px, env(safe-area-inset-left, 0px)) 20px;
    background: rgba(1, 5, 12, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease;
  }
  .drawer.open { transform: none; opacity: 1; pointer-events: auto; }
  .drawer a { color: #fff; text-decoration: none; font-size: 20px; font-weight: 500; padding: 10px 0; }
  .drawer .pill { justify-self: start; margin-top: 10px; height: 42px; padding: 0 20px; font-size: 15px; }
}

/* The page footer, the same on every page: Business Email with a Copy button, the social links, the rights.
   The homepage and For Brands draw this inside their own full-height contact section; the other pages use .site-foot. */
.site-foot {
  position: relative; z-index: 2; display: grid; gap: 22px;
  margin-top: clamp(48px, 8vh, 96px);
  padding: clamp(48px, 8vh, 80px) max(20px, env(safe-area-inset-right, 0px), 4vw) calc(env(safe-area-inset-bottom, 0px) + 40px) max(20px, env(safe-area-inset-left, 0px), 4vw);
  border-top: 1px solid rgba(169, 216, 255, 0.14);
  background: linear-gradient(to bottom, rgba(1, 5, 12, 0) 0%, rgba(1, 5, 12, 0.55) 100%);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif; color: #dce8f4; text-align: left;
}
.site-foot .label { font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8297ae; }
.site-foot .mail-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; }
.site-foot .mail { font-family: inherit; font-style: normal; font-size: clamp(1.2rem, 5.9vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; text-transform: none; color: #dce8f4; text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px solid rgba(169, 216, 255, 0.2); transition: border-color 200ms ease; }
.site-foot .mail:hover { border-color: #fff; }
.site-foot .copy { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: 14px; color: #8297ae; }
.site-foot .copy:hover { color: #fff; }
.site-foot .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; margin-top: 28px; font-size: 14px; color: #8297ae; }
.site-foot .socials { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; letter-spacing: 0; text-transform: none; }
.site-foot .socials a { text-decoration: none; color: inherit; transition: color 200ms ease; }
.site-foot .socials a:hover { color: #fff; }
.site-foot .foot-row span a { color: inherit; text-decoration: none; }
.site-foot .foot-row span a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }