/* Shared by all Pr3vail concept demos: the "concept design" bar, the closing Pr3vail block and the demo toast. */
.concept-bar {
  position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1.2rem;
  padding: .55rem 1rem; background: #06112c; color: #f6f6f2; font: 500 .875rem/1.4 Manrope, system-ui, Arial, sans-serif; text-align: center;
}
.concept-bar b { color: #10e8ee; font-weight: 700; }
.concept-bar a { color: #f6f6f2; text-decoration: underline; text-underline-offset: 3px; padding: .25rem 0; white-space: nowrap; }
.concept-bar a:hover { color: #10e8ee; }

.concept-end {
  background: #06112c; color: #f6f6f2; padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem);
  font: 400 1.0625rem/1.65 Manrope, system-ui, Arial, sans-serif; position: relative; z-index: 5;
}
.concept-end > div { max-width: 52rem; }
.concept-end .ce-k { font: 500 .78rem/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #10e8ee; margin: 0 0 1rem; }
.concept-end h2 { font: 600 clamp(2rem, 5vw, 3.8rem)/1 Syne, "Trebuchet MS", sans-serif; letter-spacing: -.045em; margin: 0 0 1.2rem; color: #f6f6f2; }
.concept-end p { margin: 0 0 1rem; color: #cbd5e6; max-width: 44rem; }
.concept-end p b { color: #f6f6f2; }
.concept-end .ce-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.concept-end .ce-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.5rem; border-radius: 999px;
  background: #10e8ee; color: #06112c; font-weight: 800; text-decoration: none; border: 2px solid #10e8ee;
}
.concept-end .ce-btn.alt { background: transparent; color: #f6f6f2; border-color: rgba(255, 255, 255, .45); }
.concept-end .ce-btn:hover { background: #f6f6f2; border-color: #f6f6f2; color: #06112c; }
.concept-end .ce-fine { font-size: .875rem; color: #a9b5cc; margin-top: 1.6rem; }
.concept-end .ce-fine a { color: inherit; text-decoration: underline; }
.concept-end :focus-visible, .concept-bar :focus-visible { outline: 3px solid #10e8ee; outline-offset: 3px; }

.demo-toast {
  position: fixed; left: 50%; bottom: 1.2rem; translate: -50% 150%; z-index: 100; width: min(92vw, 30rem);
  background: #06112c; color: #f6f6f2; border: 1px solid #10e8ee; border-radius: 14px; padding: .9rem 1.1rem;
  font: 500 .95rem/1.45 Manrope, system-ui, Arial, sans-serif; box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transition: translate .35s cubic-bezier(.2, .7, .2, 1), visibility .35s; pointer-events: none; visibility: hidden;
}
.demo-toast.show { translate: -50% 0; visibility: visible; }
.demo-toast b { color: #10e8ee; }
@media (prefers-reduced-motion: reduce) { .demo-toast { transition: none; } }