/* Shared by all five concepts: the Huntica brand font, logo and a few resets. Everything else is per concept. */
@font-face { font-family: "Museo Sans"; font-weight: 300; font-display: swap; src: url(brand/museo-sans-300.woff2) format("woff2"); }
@font-face { font-family: "Museo Sans"; font-weight: 500; font-display: swap; src: url(brand/museo-sans-500.woff2) format("woff2"); }

:root {
  /* Huntica brand, taken from the live site */
  --h-blue: #0A82D9;
  --h-blue-deep: #0167AC;
  --h-cyan: #00CBF3;
  --h-sky: #72C9FB;
  --h-red: #EA0D0D;          /* the dot in the logo */
  --h-green: #22C07A;        /* current "Sign up" button */
  --h-navy: #0B2545;
  --h-ink: #202020;
  --h-mist: #F2F5F7;
  --font: "Museo Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 300; color: var(--h-ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-weight: 500; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.logo { display: inline-block; height: 22px; width: auto; }
.logo img { height: 100%; width: auto; }

/* Bar shown on every concept page so the reviewer can jump between concepts */
.concept-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 999;
  display: flex; gap: 4px; align-items: center; padding: 5px; border-radius: 999px;
  background: rgba(11, 37, 69, .88); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.25);
  font: 500 12px/1 var(--font); color: #fff;
}
.concept-bar a { text-decoration: none; padding: 8px 11px; border-radius: 999px; opacity: .75; white-space: nowrap; }
.concept-bar a:hover { opacity: 1; background: rgba(255,255,255,.1); }
.concept-bar a[aria-current] { opacity: 1; background: #fff; color: var(--h-navy); }
@media (max-width: 900px) { .concept-bar { max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } .concept-bar::-webkit-scrollbar { display: none; } }
@media (max-width: 560px) { .concept-bar a span { display: none; } .concept-bar a { padding: 8px 10px; } }

/* Images still being generated show a soft brand gradient instead of a hole */
.ph { background: linear-gradient(135deg, #cfe7f8, #e8f4fb 60%, #d6eefc); background-size: cover; background-position: center; }