/* Demo notice. Remove this file and demo-popup.js from index.html at go-live.
   Colours come from the tokens in main.css. */
.demo-pop {
  position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--veil); opacity: 0;
  transition: opacity var(--t-micro) var(--ease-micro);
}
.demo-pop.is-open { opacity: 1; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .demo-pop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.demo-pop__panel {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100svh - 40px); overflow-y: auto;
  padding: 40px 28px 30px; border-radius: var(--radius-lg); color: var(--frost);
  background: var(--glass-dark-strong); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong), var(--depth-3);
  border-top: 6px solid var(--red);
  transform: translate3d(0, 28px, 0) scale(.98);
  transition: transform var(--t-med) var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .demo-pop__panel { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
}
.demo-pop.is-open .demo-pop__panel { transform: none; }
.demo-pop__close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--frost); cursor: pointer;
  transition: background-color var(--t-micro) var(--ease-micro);
}
.demo-pop__close svg { width: 22px; height: 22px; }
.demo-pop__close:hover { background: var(--glass-edge); }
.demo-pop__close:active { background: var(--glass-edge-strong); }
.demo-pop__tag { display: inline-block; margin-bottom: 14px; font-size: var(--fs-util); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red-tint); }
.demo-pop__title { font: 800 clamp(2.25rem, 7vw, 3.25rem)/.98 var(--font-display); text-transform: uppercase; margin-bottom: 16px; }
.demo-pop__body { font-size: 1.0625rem; line-height: 1.6; margin-bottom: 24px; }
.demo-pop__cta {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 28px; border-radius: var(--radius-sm);
  background: var(--red); color: var(--on-red); font-weight: 700; text-decoration: none; box-shadow: var(--depth-2);
  transition: background-color var(--t-micro) var(--ease-micro), box-shadow var(--t-micro) var(--ease-micro), transform var(--t-micro) var(--ease-micro);
}
.demo-pop__cta:hover { background: var(--red-deep); box-shadow: var(--depth-3); }
.demo-pop__cta:active { transform: translateY(2px); box-shadow: var(--depth-1); }
@media (min-width: 560px) { .demo-pop__panel { padding: 48px 44px 40px; } }