/* Tailwind via CDN; custom tweaks */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 1rem; }
.brand { font-family: 'Space Mono', monospace; color: #ED7863; }
body, html { font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: .5rem; padding: .6rem 1rem; font-weight: 700; }
.btn-primary { background: #ED7863; color: #fff; }
.btn-secondary { background: transparent; border: 1px solid rgba(125,125,125,.4); color: inherit; }
.badge { background: rgba(125,125,125,.15); border: 1px solid rgba(125,125,125,.25); padding: .25rem .5rem; border-radius: 999px; font-size: .75rem; }
.hidden { display: none !important; }
.footer-link { color: inherit; opacity: .8; text-decoration: none; }
.footer-link:hover { opacity: 1; text-decoration: underline; }
.card { border: 1px solid rgba(125,125,125,.2); border-radius: .75rem; padding: 1rem; background: rgba(0,0,0,.02); }
.dark .card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15); }
.screenshot { border-radius: .5rem; border: 1px solid rgba(125,125,125,.25); max-width: 560px; width: 100%; height: auto; margin-inline: auto; }
.cookie { position: fixed; inset-inline: 1rem; bottom: 1rem; border-radius: .75rem; }

/* Ensure anchored sections are not hidden under sticky header */
section { scroll-margin-top: 90px; }

/* Accented card for prominent modules (e.g., waitlist) */
.card.accent { border-color: #ED7863; background: #FFF1ED; }
.dark .card.accent { background: rgba(237,120,99,0.20); border-color: #ED7863; }

/* Compact input style for single-line fields */
.input-compact { height: 40px; padding: 0 10px; line-height: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Make all headings in Features section orange */
#features h2, #features h3 { color: #ED7863; }
.callout { border: 1px solid #ED7863; border-radius: 14px; padding: 16px; background: linear-gradient(180deg,#FFF1ED, #FFE7E1); }
.dark .callout { background: linear-gradient(180deg, rgba(237,120,99,0.18), rgba(237,120,99,0.12)); }
.callout h3 { margin: 0; }
.callout p { margin: 0; }
.wl-section { padding: 56px 0; background: linear-gradient(180deg, #ED7863 0%, #d9624d 100%); color: #fff; }
.dark .wl-section { background: linear-gradient(180deg, #bf563f 0%, #a94534 100%); }
.wl-card { background: rgba(255,255,255,0.98); color: #1f2937; border-radius: 14px; padding: 16px; box-shadow: 0 12px 28px rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.06); }
.dark .wl-card { background: #161616; color: #e5e7eb; border-color: #2e2e2e; box-shadow: 0 12px 28px rgba(0,0,0,0.45); }
.wl-card .input-compact { background: transparent; border-color: #cbd5e1; }
.dark .wl-card .input-compact { border-color: #3f3f3f; }

/* Fallback theme colors for body to ensure background/text switch */
body[data-theme="dark"] { background-color: #18181b; color: #e4e4e7; }
body[data-theme="light"] { background-color: #ffffff; color: #111827; }


/* Light theme: header should be white and transparent */
body[data-theme="light"] header { background-color: rgba(255,255,255,0.70) !important; }

/* Dark theme: header should be dark and transparent */
body[data-theme="dark"] header { background-color: rgba(24,24,27,0.70) !important; }

/* Remove bottom border from sticky header */
header { border-bottom: 0 !important; }

/* Solid variant for secondary button (non-transparent) */
.btn-secondary.solid { background: #f4f4f5; color: #111827; border-color: rgba(125,125,125,.35); }
.dark .btn-secondary.solid { background: #27272a; color: #e5e7eb; border-color: #3f3f46; }

/* Cookie banner must be solid, not transparent */
.cookie { background-color: #ffffff !important; }
.dark .cookie { background-color: #161616 !important; }

/* Overlay: solid background per theme, and card non-transparent */
#store-ov .card { background: #ffffff !important; }
.dark #store-ov .card { background: #18181b !important; }

/* Ensure cookie banner is solid despite .card defaults */
.cookie.card { background: #ffffff !important; }
.dark .cookie.card { background: #161616 !important; }

/* Button hover/active states (subtle) */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* Primary (accent) */
.btn-primary:hover { background: #e06d58; }
.btn-primary:active { background: #d8614b; }

/* Secondary (outlined/transparent) */
.btn-secondary:hover { background: rgba(125,125,125,.08); border-color: rgba(125,125,125,.45); }
.btn-secondary:active { background: rgba(125,125,125,.12); border-color: rgba(125,125,125,.55); }
.dark .btn-secondary:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.dark .btn-secondary:active { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }

/* Secondary solid */
.btn-secondary.solid:hover { background: #eaeaec; border-color: rgba(125,125,125,.40); }
.btn-secondary.solid:active { background: #e2e2e5; border-color: rgba(125,125,125,.46); }
.dark .btn-secondary.solid:hover { background: #313135; border-color: #4a4a50; }
.dark .btn-secondary.solid:active { background: #3a3a3f; border-color: #52525b; }

/* Ensure long CTA button labels wrap on small screens */
#cta-inline .btn { display: inline-block; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }

/* Prevent horizontal scrolling on narrow viewports */
html, body { max-width: 100%; overflow-x: hidden; }

/* Ensure embeds never exceed viewport width */
img, iframe, video { max-width: 100%; height: auto; }

/* Safer wrapping for long German compounds in prose blocks */

/* Toggle Reddit screenshots for dark/light themes */
.reddit-img-dark, .reddit-img-light { display: block; }
  display: flex;
  opacity: 1;

.prose, .prose * { overflow-wrap: anywhere; word-break: break-word; }

/* German typography: allow hyphenation and safe wrapping */
html[lang="de"] :where(p, li, a, label, span, h1, h2, h3, h4, h5, h6) {
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Toggle Reddit screenshots for dark/light themes */
  display: flex;
  opacity: 1;
html:not(.dark) .reddit-img-light { display: block !important; }

/* Sticky header fallback + back-to-top + full-bleed waitlist adjustments */
header.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
  display: flex;
  opacity: 1;
header { position: sticky; top: 0; z-index: 9999; }
.wl-section { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }

/* Back to top button */
/* OLD RULES /* OLD .back-to-top {
/* OLD RULES   position: fixed;
/* OLD RULES   bottom: 2rem;
/* OLD RULES   right: 1rem !important; left: auto !important;
/* OLD RULES   z-index: 1000;
/* OLD RULES   width: 3rem;
/* OLD RULES   height: 3rem;
/* OLD RULES   border-radius: 50%;
/* OLD RULES   background: #ED7863;
/* OLD RULES   color: white !important;
/* OLD RULES   border: none;
/* OLD RULES   cursor: pointer;
/* OLD RULES   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* OLD RULES   transition: all 0.3s ease;
/* OLD RULES   display: flex;
/* OLD RULES   opacity: 1;
/* OLD RULES   justify-content: center;
/* OLD RULES }
/* OLD RULES 
/* OLD RULES /* OLD .back-to-top:hover {
/* OLD RULES   background: #e06d58;
/* OLD RULES   transform: translateY(-2px);
/* OLD RULES   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
/* OLD RULES }
/* OLD RULES 
/* OLD RULES .back-to-top:active {
/* OLD RULES   transform: translateY(0);
/* OLD RULES }
/* OLD RULES 
/* OLD RULES .back-to-top.hidden {
/* OLD RULES   opacity: 0;
/* OLD RULES   pointer-events: none;
/* OLD RULES   transform: translateY(20px);
/* OLD RULES }
/* OLD RULES 
/* OLD RULES .back-to-top.show {
/* OLD RULES   opacity: 1;
/* OLD RULES   pointer-events: auto;
/* OLD RULES   transform: translateY(0);
/* OLD RULES }
/* OLD RULES 
/* OLD RULES /* Responsive adjustments */
/* OLD RULES @media (max-width: 768px) {
/* OLD RULES   .back-to-top {
/* OLD RULES     bottom: 1.5rem;
/* OLD RULES     right: 1.5rem;
/* OLD RULES     width: 2.5rem;
/* OLD RULES     height: 2.5rem;
*/
  }
}


  display: flex;
  opacity: 1;

  background: #333;
  transform: translateY(-2px);
}

  transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
    bottom: 15px;
    right: 1rem !important; left: auto !important;
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}


  background: #333;
  color: white !important;
  text-decoration: none;
}

@media (max-width: 768px) {
    width: 35px;
    height: 35px;
    right: 1rem !important; left: auto !important;
    font-size: 14px;
  }
}

  position: fixed !important;
  bottom: 15px !important;
  right: 1rem !important;
  left: unset !important;
  margin: 0 !important;
  transform: translateX(0) translateY(0) !important;
  width: 40px !important;
  height: 40px !important;
  background: black !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  color: white !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

body #backToTop.back-to-top-btn[id='backToTop']:hover {
  background: #333 !important;
}



/* SIMPLE WORKING BACK TO TOP BUTTON */
#backToTop {
  position: fixed !important;
  bottom: 15px !important;
  right: 1rem !important;
  width: 40px !important;
  height: 40px !important;
  background: black !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  color: white !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  
  /* Initially hidden */
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Show when scrolled */
#backToTop.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Hover effect */
#backToTop:hover {
  background: #333 !important;
}

/* Mobile */
@media (max-width: 768px) {
  #backToTop {
    width: 35px !important;
    height: 35px !important;
    font-size: 14px !important;
  }
}
/* Simple solution: 1757169965 */
/* Always visible: 1757170049 */
/* Simple JS: 1757170120 */
/* ALWAYS VISIBLE - NO SCROLL TRIGGER: 1757170252 */

/* SIMPLE BACK TO TOP - CLEAN IMPLEMENTATION */
html { 
  scroll-behavior: smooth; 
}

@media (prefers-reduced-motion: reduce) {
  html { 
    scroll-behavior: auto; 
  }
}

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #ED7863;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

#backToTop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#backToTop:hover {
  background: #d9624d;
  transform: translateY(-2px);
}