/* The site sets no cookies, so this is a notice, not a consent gate. It says what actually happens.
   The page owns its bottom centre (hero CTA, chapter action, journey status), so the notice keeps
   to the bottom-left on desktop and moves to the top on narrow screens, where the bottom is full. */
.notice {
  position: fixed; z-index: 60; left: 24px; bottom: 66px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  width: min(392px, calc(100% - 48px)); padding: 16px 18px;
  border: 1.5px solid #ffffff70; border-radius: 20px;
  background: linear-gradient(180deg, #ffffff70, #ffffff24 52%, #ffffff3d);
  backdrop-filter: blur(96px) saturate(240%) brightness(1.06);
  -webkit-backdrop-filter: blur(96px) saturate(240%) brightness(1.06);
  box-shadow: 0 26px 74px #00000099, 0 6px 20px #00000052,
              inset 0 2px 0 #ffffffb0, inset 0 -2px 0 #ffffff45, inset 0 0 44px #ffffff26;
  color: #f3f4ed; font-family: "Outfit", sans-serif;
}
.notice[hidden] { display: none; }

.notice-shard {
  flex: none; width: 42px; height: 42px; object-fit: contain;
  transform: rotate(-9deg);
  filter: drop-shadow(0 4px 10px #00000073);
}

.notice-copy { flex: 1 1 220px; margin: 0; font-size: 12px; line-height: 1.55; color: #e7edf2; }
.notice-copy strong { color: #fff; font-weight: 700; }

.notice-actions { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.notice-link { font-size: 12px; font-weight: 600; color: #cfdae2; text-decoration: none; white-space: nowrap; }
.notice-link:hover { color: #fff; }
.notice-ok {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .01em;
  padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: #f3f4ed; color: #101c28;
  box-shadow: 0 4px 14px #00000052;
}
.notice-ok:hover { background: #fff; }
.notice-ok:focus-visible, .notice-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Arrival: it settles into place once the page has loaded. */
.notice { opacity: 0; transform: translateY(20px); transition: opacity 420ms cubic-bezier(.23,1,.32,1), transform 420ms cubic-bezier(.23,1,.32,1); }
.notice--in { opacity: 1; transform: translateY(0); }

/* Narrow screens: the bottom belongs to the page, so the notice sits under the navbar instead. */
@media (max-width: 620px) {
  .notice { left: 16px; right: 16px; top: 74px; bottom: auto; width: auto; gap: 12px; padding: 14px 16px; border-radius: 18px; }
  .notice-shard { width: 36px; height: 36px; }
  .notice-copy { flex: 1 1 180px; font-size: 11.5px; }
  .notice { transform: translateY(-20px); }
  .notice--in { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .notice { transition: none; transform: none; }
  .notice--in { transform: none; }
}