@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122;
}

:root {
  --primary: #1d4ed8;
  --primary-dark: #1e3a8a;
  --accent: #f97316;
  --accent-strong: #9a3412;
  --text: #1f2937;
  --muted: #4b5563;
  /* Changed from #6b7280 for WCAG AA compliance (8.59:1 contrast ratio) */
  --bg: #f9fafb;
  --card-bg: #ffffff;
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  --radius: 18px;
  --max-width: 1100px;
  --transition: all 0.3s ease;
}

.bg-light {
  background-color: #f1f5f9;
}

* {
  box-sizing: border-box;
}

html {
  /* Prevent horizontal scroll from full-width elements */
  /* overflow-x: hidden; REMOVED because it breaks sticky positioning */
  /* Improve smooth scrolling */
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  margin: 0;
  /* overflow-x: hidden; REMOVED strict overflow prevention globally */
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

[hidden],
.mobile-only {
  display: none !important;
}

header {
  background: var(--primary-dark);
  color: white;
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.95);
}

/* 
header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.3), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
}
*/

nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1001;
}

.brand {
  display: flex;
  align-items: center;
}

.brand a {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.brand-slogan {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.9;
  letter-spacing: 0.03em;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-weight: 500;
  align-items: center;
}

.nav-links a {
  opacity: 0.86;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.8);
}

/* Nav Dropdown */
.nav-item-dropdown {
  position: relative;
  display: inline-block;
}

.nav-link-dropdown-trigger {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  padding: 0;
  padding-bottom: 0.25rem;
  opacity: 0.86;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.nav-link-dropdown-trigger:hover,
.nav-item-dropdown:hover .nav-link-dropdown-trigger {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.8);
}

.nav-link-dropdown-trigger svg {
  margin-left: 4px;
  transition: transform 0.2s;
}

.nav-item-dropdown:hover .nav-link-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 240px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--text);
  font-size: 0.95rem;
  white-space: nowrap;
  border-bottom: none;
  opacity: 1;
}

.nav-dropdown-menu a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--primary);
  border-color: transparent !important;
}

/* Mobile adjustments for dropdown */
@media (max-width: 1100px) {
  .nav-item-dropdown {
    display: block;
    width: 100%;
  }

  .nav-link-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-align: left;
    color: var(--text);
  }

  .nav-link-dropdown-trigger:hover {
    border-color: rgba(0, 0, 0, 0.05);
    /* keep border neutral */
    background: rgba(0, 0, 0, 0.03);
  }

  /* Initially hidden on mobile? Or simple accordion? 
     Let's make it always visible or toggleable. 
     Hover doesn't work well. Let's make it expanded by default or use focus-within/click.
     For simplicity in CSS-only: list items.
  */

  .nav-dropdown-menu {
    position: static;
    /* Flow in document */
    box-shadow: none;
    background: rgba(0, 0, 0, 0.02);
    /* Slight contrast */
    border-radius: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    display: block;
    /* Expanded by default on mobile as requested */
  }

  /* Show on hover/focus/active state check? 
     Without JS toggling class, we can use :focus-within or just show it always. 
     Let's try :hover for now (works on tap on some devices) or rely on a JS toggle later if needed.
     Better: Display: block when a class is added.
     But for now, let's make it display block on .nav-item-dropdown:hover or just always visible?
     Always visible might be too much.
     Let's try the hover/focus approach. 
  */
  .nav-item-dropdown:hover .nav-dropdown-menu,
  .nav-item-dropdown:focus-within .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    padding-left: 3rem;
    /* Indent */
    font-size: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  }
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: white;
  color: var(--primary-dark);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.22);
  transition: var(--transition);
  font-size: 0.95rem;
}

/* ----------------------------------------------------
   Ghost Button Strategy:
   Default: Dark Text (Safe for light backgrounds)
   Override: White Text (For specific dark containers like hero/footer)
   ---------------------------------------------------- */
.cta-btn.ghost {
  background: transparent;
  color: var(--primary-dark);
  border: 1px solid var(--primary-dark);
  box-shadow: none;
}

.cta-btn.ghost:hover {
  background: rgba(30, 64, 175, 0.08);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Explicitly White Ghost Buttons for Dark Areas */
header .cta-btn.ghost,
.cta-banner .cta-btn.ghost,
.footer .cta-btn.ghost,
.bg-dark .cta-btn.ghost,
.bg-primary .cta-btn.ghost,
#lead-wizard .wizard-success .cta-btn.ghost {
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
}

header .cta-btn.ghost:hover,
.cta-banner .cta-btn.ghost:hover,
.footer .cta-btn.ghost:hover,
.bg-dark .cta-btn.ghost:hover,
.bg-primary .cta-btn.ghost:hover,
#lead-wizard .wizard-success .cta-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: white;
}



/* App Store Button Variant */
.cta-btn.app-store {
  background-color: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1.4rem;
}

.cta-btn.app-store:hover {
  background-color: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.cta-btn.app-store svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-bottom: 2px;
  /* Optical alignment */
  fill: currentColor;
}

/* Google Play Button Variant */
.cta-btn.google-play {
  background-color: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1.4rem;
}

.cta-btn.google-play:hover {
  background-color: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.cta-btn.google-play svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-bottom: 1px;
  fill: currentColor;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.primary-nav .nav-actions {
  align-items: center;
  gap: 0.85rem;
}

.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
  transition: var(--transition);
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  z-index: 2000;
  /* Ensure above mobile menu */
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 999px;
  transition: var(--transition);
}

.nav-profile {
  position: relative;
}

.nav-profile__button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(15, 23, 42, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
  transition: var(--transition);
}

.nav-profile__button.is-authenticated {
  background: rgba(15, 23, 42, 0.35);
}

.nav-profile__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.32);
}

.nav-profile__initials {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.nav-profile__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: white;
  color: var(--text);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  width: min(260px, 80vw);
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.25);
  z-index: 20;
}

.nav-profile__name {
  margin: 0;
  font-weight: 600;
}

.nav-profile__email {
  margin: 0.15rem 0 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.nav-profile__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

.nav-profile__actions .cta-btn {
  flex: 1 1 100%;
  justify-content: center;
}

.nav-profile__login {
  background: var(--primary);
  color: white;
}

.nav-profile__login:hover {
  background: var(--primary-dark);
  color: white;
}

.home-header {
  background: transparent;
  position: absolute;
  width: 100%;
  box-shadow: none;
}

.home-header::after {
  display: none;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Background now handled by .hero-bg-img for LCP detection */
  color: white;
  text-align: center;
  padding: 2rem;
  /* Pull behind header */
  padding-top: 120px;
  /* Compensate for header */
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Prevent any image repetition */
  display: block;
}

.hero-forum {
  min-height: 50vh;
  background-position: center bottom;
  background-size: cover;
  background-image: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.8)), url('../img/pictures/forum-hero.jpg');
  margin-top: -120px;
  padding-top: 140px;
  margin-bottom: 2rem;
  border-radius: 0 0 2rem 2rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.7));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero-content p {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  max-width: 700px;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-cta-group {
  margin-top: 1rem;
  justify-content: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
  width: 100%;
}

.mobile-login-link {
  display: none;
}

.hero-bullets {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero:not(.bg-white):not(.bg-light) .hero-bullets li {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-bullets li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 800;
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 8rem 1.5rem 4rem;
    background-position: center top;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .hero-bullets {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
}

@media (min-width: 1101px) {

  /* Show Web App button in nav-actions on desktop */
  .nav-actions .cta-btn.ghost {
    display: inline-flex !important;
  }
}

@media (max-width: 1100px) {
  .primary-nav {
    flex-wrap: wrap;
  }

  .primary-nav .nav-actions {
    order: 2;
    justify-content: flex-end;
    margin-top: 0;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .primary-nav .nav-links {
    order: 3;
    width: 60vw;
    /* Drawer width */
    min-width: 280px;
    height: 100vh;
    display: none;
    flex-direction: column;
    align-items: stretch;
    /* Ensure children fill width */
    gap: 0;
    position: fixed;
    top: 0;
    right: -100%;
    /* Start off-screen */
    left: auto;
    bottom: 0;
    background: var(--bg);
    /* Light background */
    padding: 5rem 0 2rem;
    /* Vertical padding only, let children handle horizontal */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    margin-top: 0;
    z-index: 1002;
    transition: right 0.3s ease;
    /* Slide transition */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent side oscillation */
    border-radius: 0;
  }

  .primary-nav.is-open .nav-links {
    display: flex;
    right: 0;
    /* Slide in */
    animation: none;
  }

  /* Stabilize body when menu is open */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Overlay for content dimming? (Optional but good practice) */
  /* For now, just the drawer */

  .primary-nav .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 2001;
    /* Ensure button stays on top */
    color: var(--text);
    /* Dark icon on light bg if needed? No, header is blue usually, but let's check */
  }

  /* Update toggle color if needed when menu is open? 
     The header is usually blue. The toggle is white. 
     If menu is white and covers header, we need dark toggle?
     Actually styling relies on fixed header. 
     The fixed menu will sit ON TOP of the header content.
     So the toggle button needs to correspond. 
     If the toggle button is in the header (blue), and z-index 2000.
     The menu (white) is z-index 1002.
     So Toggle is ON TOP of Menu.
     Toggle is White (from header styles).
     Menu is White.
     White Toggle on White Menu = Invisible?
     Yes.
  */

  .primary-nav.is-open .nav-toggle .nav-toggle__bar {
    background-color: var(--text);
    /* Dark color when open on light menu */
  }

  .primary-nav .nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .primary-nav .nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .primary-nav .nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .primary-nav .nav-links a,
  .mobile-login-link {
    /* Include login button styling */
    width: 100%;
    padding: 1.15rem 2rem;
    /* Consistent padding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Light border */
    color: var(--text);
    /* Dark text */
    opacity: 1;
    font-size: 1.125rem;
    text-align: left;
    background: transparent;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    /* Clear any margins */
  }

  /* Special case for the mobile CTA button to prevent overflow */
  .primary-nav .nav-links a.cta-btn.mobile-only {
    width: calc(100% - 4rem);
    /* Leave some space for side padding */
    margin: 1.5rem 2rem;
    /* Consistent side spacing */
    border-bottom: none;
    /* No border for button */
    border-radius: 999px;
    justify-content: center;
    align-self: center;
    background: var(--primary);
    color: white;
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.15);
  }

  .nav-item-dropdown {
    width: 100%;
  }

  .nav-link-dropdown-trigger {
    width: 100%;
    padding: 1.15rem 2rem;
    /* Consistent padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    opacity: 1;
    font-size: 1.125rem;
    color: var(--text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .nav-dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0;
    padding: 0;
    display: block;
    /* Expanded by default */
  }

  .nav-item-dropdown:hover .nav-dropdown-menu,
  .nav-item-dropdown:focus-within .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    padding-left: 3.5rem !important;
    font-size: 1rem !important;
  }

  .mobile-login-link {
    display: none;
    /* Default state overridden by specific selector below or hidden attr */
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    font-family: inherit;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    text-align: left;
    padding: 1rem 2rem;
    width: 100%;
  }

  .mobile-login-link:not([hidden]) {
    display: block !important;
  }

  .primary-nav .nav-links a:hover,
  .mobile-login-link:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--primary);
  }

  .primary-nav .nav-links a:last-child {
    border-bottom: none;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: inline-flex !important;
  }
}

@media (max-width: 720px) {


  .nav-actions>.cta-btn {
    display: none;
    /* Hide generic CTA in nav on mobile to save space, rely on hero CTA */
  }

  .nav-actions {
    width: auto;
    flex-direction: row;
    gap: 0.75rem;
  }

  .nav-profile {
    width: auto;
    display: block;
  }

  .hero {
    margin-top: 0;
  }

  .primary-nav .nav-actions {
    width: auto;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 0;
  }

  .home-header {
    position: absolute !important;
    top: 0;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
  }
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}



.hero-bullets.dark li {
  color: var(--text);
  text-shadow: none !important;
}

.hero-bullets.dark li::before {
  color: var(--primary);
}

.hero-text h1 {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.hero-text p {
  margin-bottom: 2rem;
  font-size: 1.125rem;
  opacity: 0.92;
}

.domain-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.page-hero {
  background: white;
  color: var(--text);
  padding: 8rem 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

@media (min-width: 1101px) {
  .page-hero {
    padding: 4rem 1.5rem 2.5rem;
  }
}

.page-hero .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  line-height: 1.15;
}

.page-hero p {
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0;
}

.page-hero .cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.breadcrumbs a {
  color: var(--primary-dark);
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
  border-color: var(--primary-dark);
}

.page-section {
  padding: 3.5rem 1.5rem;
  overflow: hidden;
}

.page-section:nth-of-type(even) {
  background: white;
}

.page-section .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 1.75rem;
}

.section-title {
  margin: 0;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

.section-subtitle {
  margin: -1rem 0 0;
  font-size: 1.05rem;
  color: var(--muted);
}

.persona-grid,
.feature-columns,
.case-grid,
.usecase-grid,
.resource-grid,
.article-list,
.faq {
  display: grid;
  gap: 1.5rem;
  /* Increased from 1.25rem for more breathing room */
}

@media (max-width: 768px) {
  .feature-columns {
    gap: 3rem;
    /* Significant gap between text and image on mobile */
  }
}

@media (min-width: 640px) {
  .persona-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .persona-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature-columns,
  .case-grid,
  .resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .col-span-2-lg {
    grid-column: span 2;
  }
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
  list-style: none;
}

.feature-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem;
  line-height: 1.6;
}

.feature-list li strong {
  color: var(--text);
  margin-right: 0.25rem;
}

.feature-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--primary);
  background: rgba(29, 78, 216, 0.1);
  padding: 4px;
  border-radius: 6px;
  margin-top: 2px;
}

.persona-card {
  position: relative;
  background: #1e3a8a;
  /* Fallback */
  border-radius: 8px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  border: none;
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Background Images */
.persona-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  z-index: 0;
}

.persona-card:hover::before {
  transform: scale(1.05);
}

.persona-card.tourism::before {
  background-image: url('../img/pictures/card_bg_tourism.png');
  background-image: image-set(url('../img/pictures/card_bg_tourism.webp') type('image/webp'), url('../img/pictures/card_bg_tourism.png') type('image/png'));
}

.persona-card.tourist::before {
  background-image: url('../img/pictures/card_bg_tourist.png');
  background-image: image-set(url('../img/pictures/card_bg_tourist.webp') type('image/webp'), url('../img/pictures/card_bg_tourist.png') type('image/png'));
}

.persona-card.school::before {
  background-image: url('../img/pictures/card_bg_school.png');
  background-image: image-set(url('../img/pictures/card_bg_school.webp') type('image/webp'), url('../img/pictures/card_bg_school.png') type('image/png'));
}

.persona-card.card-berlin::before {
  background-image: url('pictures/stadtrallye_berlin.png');
  background-image: image-set(url('pictures/stadtrallye_berlin.webp') type('image/webp'), url('pictures/stadtrallye_berlin.png') type('image/png'));
}

.persona-card.card-wien::before {
  background-image: url('pictures/stadtrallye_wien.png');
  background-image: image-set(url('pictures/stadtrallye_wien.webp') type('image/webp'), url('pictures/stadtrallye_wien.png') type('image/png'));
}

.persona-card.card-zurich::before {
  background-image: url('pictures/stadtrallye_zurich.png');
  background-image: image-set(url('pictures/stadtrallye_zurich.webp') type('image/webp'), url('pictures/stadtrallye_zurich.png') type('image/png'));
}

.persona-card.card-hamburg::before {
  background-image: url('pictures/stadtrallye_hamburg.png');
  background-image: image-set(url('pictures/stadtrallye_hamburg.webp') type('image/webp'), url('pictures/stadtrallye_hamburg.png') type('image/png'));
}

/* Ensure text is readable */
.persona-card h3,
.persona-card p,
.persona-card .cta-btn {
  position: relative;
  z-index: 2;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Add overlay to background images */
.persona-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
  z-index: 1;
  border-radius: 8px;
  pointer-events: none;
}

.persona-card.private::before {
  background-image: url('../img/pictures/card_bg_private.png');
  background-image: image-set(url('../img/pictures/card_bg_private.webp') type('image/webp'), url('../img/pictures/card_bg_private.png') type('image/png'));
}

/* Gradient Overlay */

@media (min-width: 1101px) {
  .primary-nav .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    margin: 0;
  }
}

.persona-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(30, 58, 138, 0.3), rgba(15, 23, 42, 0.8));
  z-index: 1;
}

.card-content {
  /* Removed position: relative so .card-link positions relative to .persona-card */
  /* z-index removed here, applied to children */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  pointer-events: none;
  /* Let clicks pass through to link if needed, though link has pointer-events: auto */
}

.persona-card h3 {
  position: relative;
  /* To sit above overlay */
  z-index: 2;
  color: white;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Ensure alignment if titles have different lengths */
  min-height: 3.5rem;
  /* Reserve space for 2 lines to align buttons if titles wrap */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.persona-card p {
  display: none;
  /* Ensure it's hidden if any remains */
}

.card-link {
  color: white;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.2s ease;

  /* Absolute positioning to ensure same level across all cards */
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  z-index: 2;
  /* Ensure above overlay */
  pointer-events: auto;
}

.card-link:hover {
  gap: 0.5rem;
  text-decoration: underline;
}

.article-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.05);
  text-align: left;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.article-card .category {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.article-card h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--text);
  font-weight: 700;
}

.article-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  flex-grow: 1;
}

.article-card .card-link {
  margin-top: 0.5rem;
  color: var(--primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
}

/* Newspaper style mobile optimization for blog cards */
@media (max-width: 768px) {
  .article-card {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  .article-card h3 {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .article-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .article-card .meta {
    margin-top: -0.25rem;
  }
}

/* Stretched Link Pattern */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.card-icon {
  display: inline-flex;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.cta-btn.primary {
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
  align-self: flex-start;
}

.cta-btn.primary:hover {
  background: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(29, 78, 216, 0.3);
}

.cta-btn.small {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}

.pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  background: rgba(29, 78, 216, 0.12);
  color: var(--primary-dark);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.keyword-cloud span {
  background: rgba(30, 64, 175, 0.1);
  color: var(--primary-dark);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-weight: 500;
}

.split-layout {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 900px) {
  .split-layout {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

.accent-card {
  background: linear-gradient(140deg, rgba(29, 78, 216, 0.18), rgba(14, 165, 233, 0.15));
  border-radius: var(--radius);
  padding: 1.75rem;
  display: grid;
  gap: 1.25rem;
}

.accent-card h3 {
  margin: 0;
}

.accent-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.65rem;
  color: inherit;
}

.contact-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, rgba(29, 78, 216, 0.95), rgba(14, 165, 233, 0.9));
  color: white;
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}

.contact-bar strong {
  font-size: 1.1rem;
}

.faq {
  gap: 1rem;
}

.faq-item {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08);
}

.faq-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}

.article-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-card a {
  color: var(--primary-dark);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.article-card a::after {
  content: '→';
  font-size: 0.95rem;
}

.metrics-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric {
  background: rgba(14, 165, 233, 0.14);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: grid;
  gap: 0.4rem;
  color: var(--primary-dark);
  overflow-wrap: break-word;
  hyphens: auto;
}

.metric strong {
  font-size: 1.8rem;
}

.timeline {
  border-left: 3px solid rgba(29, 78, 216, 0.2);
  padding-left: 1.25rem;
  display: grid;
  gap: 1.25rem;
}

.timeline-step strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.timeline-step span {
  display: inline-block;
  background: rgba(29, 78, 216, 0.18);
  color: var(--primary-dark);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

.table thead {
  background: rgba(29, 78, 216, 0.12);
  color: var(--primary-dark);
}

.table th,
.table td {
  padding: 1rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quote-card {
  background: rgba(255, 255, 255, 0.9);
  border-left: 4px solid var(--accent);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.1);
}

.quote-card strong {
  display: block;
  margin-top: 0.75rem;
  color: var(--primary-dark);
}

.cta-banner {
  background: linear-gradient(120deg, rgba(30, 64, 175, 0.95), rgba(59, 130, 246, 0.9));
  color: white;
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  display: grid;
  gap: 1rem;
  text-align: center;
  box-shadow: 0 25px 45px rgba(30, 64, 175, 0.28);
}

.cta-banner h2 {
  margin: 0;
  font-size: clamp(1.9rem, 2.5vw, 2.4rem);
}

.cta-banner p {
  margin: 0 auto;
  max-width: 680px;
  font-size: 1.05rem;
}

.cta-banner .cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.seo-meta {
  background: rgba(29, 78, 216, 0.08);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.seo-meta strong {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.domain-note strong {
  color: white;
}

.hero-mockup {
  display: grid;
  gap: 1rem;
}

.mockup-card {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.25rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18);
}

.mockup-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.mockup-card span {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.section {
  max-width: var(--max-width);
  margin: -2rem auto 4rem;
  padding: 0 1.5rem;
}

.section-light {
  background: rgba(15, 23, 42, 0.02);
  padding: 3.5rem 1.5rem;
  border-radius: 36px;
}

.section+.section {
  margin-top: 0;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: rgba(29, 78, 216, 0.08);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.section p.lead {
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 700px;
}

.feature-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.feature-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(29, 78, 216, 0.18), transparent 70%);
  transform: rotate(35deg);
}

.feature-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.feature-card p {
  color: var(--muted);
}

.feature-card strong {
  color: var(--primary-dark);
}

.metrics-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.metric strong {
  display: block;
  font-size: 2rem;
  color: var(--primary-dark);
}

.metric span {
  color: var(--muted);
  font-weight: 500;
}

.steps {
  background: white;
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 1.5rem;
}

.step {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr;
  align-items: start;
}

.step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(29, 78, 216, 0.1);
  color: var(--primary-dark);
  font-weight: 600;
}

.step p {
  margin: 0;
  color: var(--muted);
}

.split {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}

.accent-card {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.95), rgba(99, 102, 241, 0.9));
  color: white;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.accent-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.highlight {
  display: grid;
  gap: 1rem;
}

.highlight div {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1.25rem;
}

.usecase-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.usecase-card,
.case-card {
  background: white;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: var(--transition);
}

.usecase-card:hover,
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pill {
  background: rgba(29, 78, 216, 0.1);
  color: var(--primary-dark);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.testimonial-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 2rem;
}

.testimonial {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  display: grid;
  gap: 1rem;
}

.testimonial blockquote {
  margin: 0;
  font-style: italic;
  color: var(--text);
}

.testimonial figcaption {
  color: var(--muted);
  font-size: 0.9rem;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  background: white;
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.trust-list span {
  font-weight: 600;
  color: var(--primary-dark);
}

.trust-list ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.benefit-list li {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  color: var(--muted);
}

.benefit-list strong {
  color: var(--primary-dark);
}

.support-card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  display: grid;
  gap: 1.5rem;
}

.support-card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.support-card .cta-btn {
  justify-self: start;
  background: rgba(29, 78, 216, 0.12);
  color: var(--primary-dark);
}

.support-card .cta-btn:hover {
  background: rgba(29, 78, 216, 0.18);
}

.faq-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.faq-item {
  background: white;
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.faq-item h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
}

.final-cta {
  margin-bottom: 6rem;
}

.final-cta-card {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.95), rgba(14, 165, 233, 0.9));
  color: white;
  border-radius: 28px;
  padding: 3rem;
  box-shadow: 0 35px 65px rgba(15, 23, 42, 0.35);
  display: grid;
  gap: 2rem;
}

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.final-cta .cta-btn {
  box-shadow: none;
}

.final-cta .cta-btn.ghost {
  border-color: rgba(255, 255, 255, 0.7);
}

.final-cta .cta-btn,
.final-cta .cta-btn.ghost {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}

.final-cta .cta-btn:hover,
.final-cta .cta-btn.ghost:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.24);
}

.cta-btn.teal {
  background: #0d9488;
  /* Teal-600 */
  color: white;
}

.cta-btn.teal:hover {
  background: #0f766e;
  /* Teal-700 */
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 148, 136, 0.3);
}

.final-cta .cta-btn:first-child {
  background: white;
  color: var(--primary-dark);
}

.final-cta .cta-btn:first-child:hover {
  background: #f8fafc;
}

.footer {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.75);
  padding: 3rem 1.5rem;
  min-height: 400px;
  /* Ensure footer has enough height to show content */
}

.footer .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.footer a {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 720px) {
  header {
    padding-bottom: 4rem;
  }

  .nav-links {
    display: none;
  }



  .steps {
    padding: 1.75rem;
  }

  .section-light {
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
  }

  .trust-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .final-cta-card {
    padding: 2rem;
  }

  .final-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.subpage-header {
  padding-bottom: 3.5rem;
}

.subpage-hero {
  margin-top: 2rem;
}

.legal-content {
  max-width: 840px;
  margin: 3rem auto 5rem;
  padding: 0 1.5rem 2rem;
  display: grid;
  gap: 2.5rem;
}

.legal-content section {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  padding: 2rem;
}

.legal-content h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}

.legal-content ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.legal-content li {
  margin-bottom: 0.35rem;
}

.legal-note {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.08), rgba(14, 165, 233, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.25);
}

@media (max-width: 720px) {
  .legal-content {
    margin: 2rem auto 4rem;
    padding: 0 1rem 1.5rem;
  }

  .legal-content section {
    padding: 1.5rem;
  }
}

/* UI Showcase */
.ui-showcase .ui-gallery {
  margin: 2.5rem auto 0;
  max-width: min(1000px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.ui-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: clamp(1.25rem, 3vw, 1.75rem);
  background: linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .88));
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 24px 68px rgba(15, 23, 42, .32);
  overflow: hidden;
  color: #f8fafc;
}

.ui-card::before {
  content: "";
  position: absolute;
  inset: -45% -35% auto auto;
  height: 220%;
  width: 220%;
  background: radial-gradient(circle at 10% 10%, rgba(125, 211, 252, .25), transparent 60%);
  transform: rotate(8deg);
  opacity: .65;
}

.ui-card>* {
  position: relative;
  z-index: 1;
}

.ui-card figcaption {
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.ui-card h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  color: #f8fafc;
}

.ui-card p {
  margin: 0;
  color: rgba(226, 232, 240, .92);
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  line-height: 1.55;
}

.device-shell {
  flex: 0 0 clamp(210px, 32vw, 320px);
  width: clamp(210px, 32vw, 320px);
  height: var(--slide-img-height, auto);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  border-radius: clamp(.9rem, 2vw, 1.15rem);
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
  position: relative;
  overflow: hidden;
}

.device-shell::after {
  content: none;
}

.device-shell img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

/* Footer Layout Fixes & Clean Button Styles */
/* Footer Layout Fixes */
.footer .inner.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  background: transparent;
  /* Background is on parent .footer */
  color: white;
  position: relative;
  z-index: 50;
  padding: 0;
  margin-top: 2rem;
  width: 100%;
}

/* Ensure text visibility in footer */
.footer .inner.footer-grid h3,
.footer .inner.footer-grid h4 {
  color: white;
  margin-top: 0;
}

.footer .inner.footer-grid p,
.footer .inner.footer-grid p a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.8;
}

.footer .inner.footer-grid p a:hover {
  color: #fff;
  text-decoration: underline;
}


/* Force CTA buttons in footer to behave correctly */
.footer .cta-banner-dark .app-buttons {
  align-items: center;
  /* Prevent stretching */
  justify-content: center;
  flex-direction: row;
}

.footer .cta-banner-dark .store-badge {
  width: auto !important;
  display: inline-flex !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  background: white !important;
  color: black !important;
}

/* Force inner text colors for inverse badges */
.footer .cta-banner-dark .store-badge .sub,
.footer .cta-banner-dark .store-badge .main {
  color: black !important;
}

.footer-badge {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: black;
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  color: white;
}

.footer-badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

/* Ensure footer buttons don't shrink */
.footer-badge-content {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
  flex-shrink: 0;
  /* Prevent text clipping */
}

.footer-badge .sub {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9) !important;
  /* Brighter white */
}

.footer-badge .main {
  font-size: 1.1rem;
  font-weight: 700;
  color: white !important;
  /* Force white */
}

.footer-badge.web-app .main {
  color: black !important;
}

.footer-badge-content.center {
  align-items: center;
  text-align: center;
  width: 100%;
}


.footer-badge.web-app {
  background: white;
  color: black;
  margin-top: 0.5rem;
}

.footer-badge.web-app:hover {
  background: #f1f5f9;
  color: black;
}

.footer-badge.web-app .main {
  width: 100%;
  text-align: center;
}

/* Ensure Resources column handles the buttons */
.footer div:nth-child(3) {
  display: flex;
  flex-direction: column;
}

/* Add Responsive adjustments */
@media (max-width: 900px) {
  .footer .inner.footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 1.5rem;
  }
}

@media (max-width: 600px) {
  .footer .inner.footer-grid {
    grid-template-columns: 1fr;
    text-align: left;
    /* Keep left aligned for readability */
    gap: 2.5rem;
  }
}

/* Hero screenshots */
.hero-shot {
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(15, 23, 42, .18);
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Fix image distortion & hero sizing --- */
img {
  max-width: 100%;
  height: auto;
}

.hero-mockup {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero-mockup {
    grid-template-columns: 1fr 1fr;
  }
}

.hero-shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--card-bg);
  display: block;
}

.hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* show the full screenshot without cropping */
}

/* --- end fix --- */

/* --- HERO: ensure visual matches the copy height --- */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hero-frame {
  margin: 0;
  width: 100%;
  flex: 1 1 auto;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-frame img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  /* show whole screenshot without cropping */
}

@media (min-width: 960px) {
  .hero-visual {
    flex: 0 0 auto;
    width: min(520px, 45vw);
    align-self: stretch;
    align-items: center;
    justify-content: center;
  }

  .hero-frame {
    min-height: 520px;
    height: 100%;
    max-height: 80vh;
  }

  .hero-frame img {
    height: 100%;
    width: auto;
  }
}

@media (max-width: 959px) {
  .hero-frame {
    height: auto;
    max-height: 82vh;
  }

  .hero-frame img {
    height: auto;
    max-height: 82vh;
  }
}

/* --- end HERO patch --- */


/* UI Carousel */
.ui-carousel {
  --slide-width: min(100%, clamp(360px, 82vw, 760px));
  --slide-height: clamp(360px, 68vw, 520px);
  --slide-shift: calc(var(--slide-width) * 0.78);
  --ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: clamp(.75rem, 3vw, 1.25rem) clamp(1.5rem, 6vw, 3.5rem) clamp(2.75rem, 6vw, 3.5rem);
  touch-action: pan-y;
  overflow-x: hidden;
  overflow-y: visible;
}

.ui-carousel .ui-track {
  position: relative;
  width: 100%;
  height: var(--slide-height);
  max-width: var(--slide-width);
  margin: 0 auto;
  touch-action: pan-y;
}

.ui-carousel .slide {
  --offset: 0;
  --abs-offset: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--slide-width);
  height: var(--slide-height);
  display: flex;
  align-items: center;
  border-radius: clamp(1.25rem, 3vw, 1.75rem);
  transform: translate(-50%, -50%) translateX(calc(var(--offset) * var(--slide-shift) + var(--drag, 0px))) scale(calc(1 - min(var(--abs-offset) * .12, .25)));
  opacity: calc(1 - min(var(--abs-offset) * .65, .88));
  filter: saturate(calc(1 - min(var(--abs-offset) * .28, .6))) brightness(calc(1 - min(var(--abs-offset) * .09, .22)));
  transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
  pointer-events: none;
  z-index: calc(20 - var(--abs-offset));
  will-change: transform;
}

.ui-carousel .slide.is-center {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  box-shadow: 0 30px 72px rgba(15, 23, 42, .36);
}

.ui-carousel.is-dragging .slide {
  transition: none;
}

.ui-carousel.no-animate .slide {
  transition: none;
}

.ui-carousel .ui-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 20px 40px rgba(15, 23, 42, .28);
  color: #f8fafc;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.ui-carousel .ui-nav:hover {
  background: rgba(30, 41, 59, .95);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 26px 55px rgba(15, 23, 42, .35);
}

.ui-carousel .ui-nav:active {
  transform: translateY(-50%) scale(.94);
}

.ui-carousel .ui-nav.prev {
  left: clamp(.25rem, 3vw, 2.75rem);
}

.ui-carousel .ui-nav.next {
  right: clamp(.25rem, 3vw, 2.75rem);
}

.ui-carousel .ui-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.ui-carousel .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(148, 163, 184, .55);
  transition: transform .3s var(--ease), background .3s var(--ease);
  cursor: pointer;
}

.ui-carousel .dot:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ui-carousel .dot.active {
  background: #f8fafc;
  transform: scale(1.3);
}

.ui-carousel:not(.is-ready) .slide {
  opacity: 0;
}

@media (max-width: 960px) {
  .ui-carousel {
    --slide-width: min(100%, clamp(320px, 86vw, 620px));
    --slide-height: clamp(480px, 118vw, 640px);
    --slide-shift: calc(var(--slide-width) * 0.84);
  }
}

@media (max-width: 720px) {
  .ui-showcase .ui-gallery {
    margin-top: 2rem;
  }

  .ui-card {
    flex-direction: column;
    text-align: center;
    gap: clamp(1rem, 4vw, 1.5rem);
    padding: clamp(1.25rem, 6vw, 1.85rem);
  }

  .device-shell {
    flex: 0 0 auto;
    width: clamp(160px, 58vw, 210px);
  }

  .ui-card h3 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  .ui-carousel {
    padding: clamp(.5rem, 4vw, 1rem) clamp(1.5rem, 8vw, 2.5rem) clamp(2.5rem, 10vw, 3.5rem);
  }

  .ui-carousel .ui-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .ui-carousel .ui-dots {
    gap: .6rem;
  }
}

/* Forum */
.cta-btn {
  border: none;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}

.cta-btn.small {
  padding: 0.65rem 1.15rem;
  font-size: 0.95rem;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.15);
}

.forum-hero {
  background: linear-gradient(120deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.92));
  color: white;
  border-bottom: none;
}

.forum-hero .breadcrumbs,
.forum-hero .breadcrumbs a {
  color: rgba(255, 255, 255, 0.85);
}

.forum-hero h1,
.forum-hero p {
  color: inherit;
}

.forum-hero .cta-btn.ghost {
  border-color: rgba(255, 255, 255, 0.4);
}

.forum-hero .forum-hero-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.85);
}

.forum-hero .forum-hero-list li {
  background: rgba(15, 23, 42, 0.25);
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

.forum-main {
  padding: 0 1.5rem 4rem;
  background: var(--bg);
}

.forum-topbar {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
  text-align: center;
}

.forum-topbar>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.forum-topbar .cta-btn,
.forum-topbar button,
.forum-topbar-actions {
  display: none !important;
}

.forum-topbar h1 {
  margin: 0.4rem 0 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
}

.forum-topbar p {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

.forum-topbar-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.forum-layout {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 2rem;
  align-items: flex-start;
}

.forum-sidebar,
.forum-sidebar-left,
.forum-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}



.forum-card {
  background: white;
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
}

.forum-card--sticky {
  position: sticky;
  top: 8rem;
  z-index: 10;
}

.forum-card--sticky-guidelines {
  position: sticky;
  top: 25rem;
  z-index: 9;
}

.forum-card-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.forum-card-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.forum-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  margin: 0 0 0.35rem;
  color: var(--muted);
}

.forum-auth-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.forum-auth-card h2 {
  margin: 0;
}

.forum-auth-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.forum-category-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.forum-category {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.95);
  transition: var(--transition);
}

.forum-category.is-active {
  border-color: rgba(29, 78, 216, 0.5);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.12);
}

.forum-category__title {
  margin: 0 0 0.2rem;
  font-weight: 600;
}

.forum-category__description {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.forum-category__count {
  font-size: 0.85rem;
  color: var(--primary-dark);
  font-weight: 600;
}

.forum-guidelines {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.forum-guidelines li {
  padding-left: 1.2rem;
  position: relative;
}

.forum-guidelines li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.forum-board {
  background: white;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 30px 65px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.forum-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  align-items: center;
}

.forum-toolbar>div:first-child {
  min-width: 0;
}

.forum-toolbar h2 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-toolbar-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.forum-search {
  flex: 1 1 240px;
}

.forum-search .text-input-mini {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.2s;
  background: #f9fafb;
  color: var(--text);
}

.text-input-mini:focus {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

.text-input-mini::placeholder {
  color: #9ca3af;
}

/* Forum Layout Redesign */
.forum-board-columns {
  display: block;
  /* Removed grid */
}

.forum-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Modal for Thread Detail */
/* Modal for Thread Detail */
.forum-modal__dialog--large {
  width: min(1000px, 95vw);
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* Reset padding for full bleed */
  background: white;
  background-image: none !important;
  overflow: hidden;
}

.forum-modal__dialog--large .forum-modal__header {
  padding: 1.5rem 1.5rem 0 1.5rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.forum-modal__dialog--large .forum-thread-detail {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  /* Transfer padding to content */
  border: none;
  background: transparent;
  height: auto;
}

/* Override sticky position for reply form inside large modal since we use flex column */
.forum-modal__dialog--large .forum-reply-form {
  margin: 0;
  border-top: 1px solid #e2e8f0;
  padding: 1rem 1.5rem;
  position: static;
  background: white;
  width: 100%;
}

.forum-modal__dialog--large .forum-reply-form .forum-reply-input-wrapper {
  margin: 0;
}

.forum-thread-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(248, 250, 252, 0.7);
  transition: var(--transition);
  cursor: pointer;
}

.forum-thread-card:hover {
  border-color: rgba(29, 78, 216, 0.4);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.forum-thread-card.is-active {
  border-color: rgba(29, 78, 216, 0.6);
  background: rgba(59, 130, 246, 0.08);
}

.forum-thread-card h3 {
  margin: 0 0 0.35rem;
}

.forum-thread-card__summary {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.forum-thread-card__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.forum-thread-card__badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.forum-thread-card__badges span {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  font-size: 0.85rem;
}

.forum-thread-panel {
  background: white;
  /* Changed from semi-transparent */
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: auto;
}

.forum-thread-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1rem;
  background: white;
  color: var(--text);
  position: static;
  /* Removed sticky if it was there implicitly or explicitly */
}

.forum-thread-meta h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text);
}

.forum-thread-meta__details {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.forum-eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.forum-post-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.forum-post {
  background: white;
  border-radius: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.forum-post__meta {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.forum-post__body {
  margin: 0;
  white-space: pre-line;
}

.forum-post__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.forum-attachment {
  flex: 0 0 auto;
  width: 140px;
  text-align: center;
}

.forum-attachment img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
}

.forum-attachment figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.forum-empty {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.03);
  margin: 0;
  text-align: center;
  color: var(--muted);
}

.forum-empty.is-error {
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #b91c1c;
  background: rgba(248, 113, 113, 0.1);
}

.forum-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.forum-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.forum-form input,
.forum-form textarea,
.forum-form select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: white;
  font: inherit;
  color: inherit;
}

.forum-form input[type='file'] {
  padding: 0.65rem;
}

.forum-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.forum-form-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.forum-alert {
  margin: 0;
  font-size: 0.9rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.03);
  color: var(--muted);
}

.forum-alert.is-error {
  background: rgba(248, 113, 113, 0.1);
  color: #b91c1c;
}

.forum-alert.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.forum-alert.is-info {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-dark);
}

.forum-reply-form.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.forum-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.forum-modal[hidden] {
  display: none;
}

.forum-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.forum-modal__dialog {
  position: relative;
  background: #ffffff;
  background-image: none;
  /* Prevention against rogue gradients */
  border-radius: 1.25rem;
  padding: 1.75rem;
  width: min(800px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 35px 65px rgba(15, 23, 42, 0.3);
  z-index: 1;
}

.forum-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  /* Reset inherited global header styles */
  background: none;
  padding: 0;
  position: static;
  box-shadow: none;
  color: var(--text);
}

.forum-modal__header::after {
  content: none;
}

.forum-modal__header h2 {
  margin: 0.2rem 0;
  color: var(--text);
  font-size: 1.5rem;
}

.forum-modal__close {
  background: rgba(15, 23, 42, 0.06);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.15rem;
  cursor: pointer;
}

.forum-modal-open {
  overflow: hidden;
}

.forum-modal__divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: #576574;
  /* Improved contrast from #94a3b8 for accessibility */
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.forum-modal__divider::before,
.forum-modal__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.forum-modal__divider span {
  padding: 0 1rem;
}

.forum-modal__oauth-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.forum-modal__oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.forum-modal__oauth:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.forum-modal__oauth-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.forum-modal__legal-notice {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #64748b;
  margin: 0.5rem 0 1rem;
}

.forum-modal__legal-notice a {
  color: var(--primary);
  text-decoration: underline;
}

.forum-modal__legal-notice a:hover {
  color: var(--primary-dark);
}

.forum-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #475569 !important;
  /* Slate 600 - explicit dark color */
  margin-bottom: 0.25rem;
}

.forum-form label span {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.forum-form input {
  color: #1e293b !important;
  /* Slate 800 - dark text */
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  /* Slate 300 - visible border */
}

.forum-form input::placeholder {
  color: #576574;
  /* Slate 400 */
}

.forum-modal .forum-form-hint a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 960px) {
  .forum-layout {
    grid-template-columns: 1fr;
    /* Stack order on mobile: 
       By default DOM order is Categories -> Board -> Guidelines.
       This is acceptable. The board is second. 
    */
  }

  .forum-sidebar,
  .forum-sidebar-left,
  .forum-sidebar-right,
  .forum-card--sticky,
  .forum-card--sticky-guidelines {
    position: static;
  }

  .forum-board-columns {
    grid-template-columns: 1fr;
  }

  .forum-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .forum-toolbar-actions {
    width: 100%;
  }

  .forum-search {
    width: 100%;
  }
}

/* App Screen Carousel (Infinite Auto-Scroll) */
.app-showcase {
  padding: 4rem 0;
  background-color: #fff;
  overflow: hidden;
}

.app-showcase .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  gap: 1.5rem;
}

.app-showcase .section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.carousel-container {
  width: 100%;
  overflow-x: auto;
  /* Enable native scrolling */
  overflow-y: hidden;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  /* Indicate interactivity */
  /* Hide scrollbar */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.carousel-container::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.carousel-track {
  display: inline-flex;
  /* Changed from flex to inline-flex for horizontal scrolling context */
  gap: 1.5rem;
  /* Animation removed, handled by JS */
  will-change: transform;
  transition: none;
}



.app-screen {
  height: 500px;
  width: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  pointer-events: none;
  /* Prevent image dragging interfering with container drag */
}

.app-screen {
  height: 500px;
  width: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  /* Prevent shrinking */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .app-showcase {
    padding: 3rem 0;
  }

  .carousel-track {
    gap: 1rem;
    animation-duration: 40s;
    /* Faster on mobile if needed, or keep same */
  }

  .app-screen {
    height: 350px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .app-screen {
    height: 280px;
  }
}

/* --- Station Type Carousel --- */
.station-carousel-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 2rem;
  padding: 0 40px;
  /* Space for arrows */
  box-sizing: border-box;
  overflow: hidden;
  /* Prevent visual overflow */
}

.station-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2rem 1rem;
  /* Padding for shadow and vertical space */
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbar IE/Edge */
  width: 100%;
  scroll-behavior: smooth;
  /* Prevent horizontal overlap of arrows on very narrow screens */
  mask-image: none;
  -webkit-mask-image: none;
}

.station-track::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar Chrome/Safari */
}

.station-track .interaction-card {
  min-width: 320px;
  max-width: 320px;
  scroll-snap-align: center;
  /* Center snap */
  flex-shrink: 0;
  transition: all 0.3s ease;
  opacity: 0.85;
  transform: scale(0.96);
  filter: grayscale(30%);
  cursor: pointer;
}

.text-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.2s;
  background: #f9fafb;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.text-input:focus {
  border-color: var(--primary);
  background: white;
}

.station-track .interaction-card:not(.active)>* {
  pointer-events: none;
  /* Prevent interaction with children (buttons, inputs) */
}

.station-track .interaction-card.active {
  opacity: 1;
  transform: scale(1);
  filter: grayscale(0%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border-color: var(--primary);
  cursor: default;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1005;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex !important;
  /* Force visible on mobile */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary);
  font-size: 1.5rem;
  transition: all 0.2s;
}

@media (max-width: 768px) {
  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    background: white;
  }

  .carousel-arrow.prev {
    left: 8px;
  }

  .carousel-arrow.next {
    right: 8px;
  }

  .station-carousel-container {
    padding: 0 5px;
    /* Tighter padding for mobile */
  }
}

.carousel-arrow.prev {
  left: 20px;
}

.carousel-arrow.next {
  right: 20px;
}

.carousel-arrow:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 768px) {
  .carousel-arrow {
    display: none;
    /* Hide arrows on mobile, use swipe */
  }
}

/* Audio Player */
.audio-placeholder {
  background: #f3f4f6;
  border-radius: 8px;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 1rem;
  cursor: pointer;
}

.play-icon-audio {
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.audio-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  flex-grow: 1;
}

.audio-wave span {
  display: block;
  width: 3px;
  background: #cbd5e1;
  border-radius: 2px;
  height: 100%;
  animation: none;
}

.audio-placeholder.playing .audio-wave span {
  background: var(--primary);
  animation: wave 1s infinite ease-in-out;
}

.audio-placeholder.playing .audio-wave span:nth-child(1) {
  animation-delay: 0.0s;
}

.audio-placeholder.playing .audio-wave span:nth-child(2) {
  animation-delay: 0.1s;
}

.audio-placeholder.playing .audio-wave span:nth-child(3) {
  animation-delay: 0.2s;
}

.audio-placeholder.playing .audio-wave span:nth-child(4) {
  animation-delay: 0.3s;
}

.audio-placeholder.playing .audio-wave span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes wave {

  0%,
  100% {
    height: 20%;
  }

  50% {
    height: 100%;
  }
}

/* Audio Player Advanced */
.audio-player-advanced {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.audio-controls-top {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.play-icon-audio {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s;
}

.play-icon-audio:hover {
  transform: scale(1.05);
}

.audio-time {
  font-family: monospace;
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.audio-progress {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #d1d5db;
  outline: none;
  cursor: pointer;
}

.audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  transition: transform 0.1s;
}

.audio-progress::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* --- Interactive Demo Stations --- */
.interaction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  position: relative;
}

@media (max-width: 720px) {
  .interaction-grid {
    display: block;
    /* Stack behavior */
    position: relative;
    min-height: 400px;
    /* Reserve space */
  }

  .interaction-card {
    /* Hide all by default on mobile */
    display: none;
    width: 100%;
    animation: fadeIn 0.5s ease;
  }

  /* Show the first one that is NOT completed and NOT locked (active) */
  /* Logic: 
     - If it's the first card and not completed, show it.
     - If it's locked, it's hidden.
     - If it's unlocked (no .locked) and previous is completed, show it.
     
     Actually, simpler:
     The JS unlocks the next station.
     So we just need to show the *first* card that is NOT .completed.
     But wait, locked cards are also not completed.
     So we show the first card that is NOT .completed AND NOT .locked?
     No, because initially only card 1 is unlocked.
     Card 2 and 3 are locked.
     So if we show "not completed", we show all 3 (1 unlocked, 2 locked).
     We want to hide locked ones.
     So: Show .interaction-card:not(.locked):not(.completed)
     BUT: We only want to show ONE.
     If multiple are unlocked (e.g. if we unlock all), we'd see all.
     But in this flow, we unlock sequentially.
     So at any time, there is exactly one "current" station (unlocked, not completed).
     Exceptions:
     - Finished state: All completed? Then maybe show a "Done" message or the last one?
     - Reset state: First one unlocked.
  */

  .interaction-card:not(.locked):not(.completed) {
    display: flex;
  }

  /* If a card is completed, hide it */
  .interaction-card.completed {
    display: none;
  }

  /* If a card is locked, hide it (on mobile only, desktop shows blurred) */
  .interaction-card.locked {
    display: none;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.interaction-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: auto;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ... existing styles ... */

@media (max-width: 720px) {
  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .persona-card {
    min-height: 200px;
    /* Reduced height */
    padding: 1rem;
  }

  .persona-card h3 {
    font-size: 1rem;
    /* Smaller text */
    min-height: 2.5rem;
  }

  .card-link {
    font-size: 0.85rem;
    bottom: 1rem;
  }
}

.interaction-card.locked .interaction-content,
.interaction-card.locked .app-header {
  filter: blur(4px);
  pointer-events: none;
  opacity: 0.5;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(255, 255, 255, 0.3);
}

.interaction-card.locked .locked-overlay {
  display: flex;
}

.lock-icon {
  font-size: 4rem;
  font-weight: 800;
  color: var(--muted);
  opacity: 0.5;
}

/* App Header Look */
.app-header {
  background: var(--primary);
  color: white;
  padding: 1rem 1.5rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.app-header .points {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
}

.interaction-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-question {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

/* Quiz Styles */
.quiz-option {
  background: #f3f4f6;
  border: 2px solid transparent;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

.quiz-option:hover {
  background: #e5e7eb;
}

.quiz-option.selected {
  border-color: var(--primary);
}

.quiz-option.correct {
  background: #d1fae5;
  /* Green-100 */
  border-color: #10b981;
  /* Green-500 */
  color: #065f46;
}

.quiz-option.wrong {
  background: #ffe4e6;
  /* Red-100 */
  border-color: #f43f5e;
  /* Red-500 */
  color: #9f1239;
  animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Photo Styles */
.photo-placeholder {
  background: #f3f4f6;
  border-radius: 16px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.photo-ui {
  position: absolute;
  inset: 0;
  background: #1f2937;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.photo-ui.active {
  opacity: 1;
}

.photo-ui.success {
  background: #10b981;
}

.photo-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.photo-btn {
  width: 100%;
  padding: 0.8rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.photo-btn:hover {
  background: var(--primary-dark);
}

/* Slider Styles */
.slider-container {
  text-align: center;
  padding: 1rem 0;
}

.slider-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  display: block;
  margin-bottom: 1rem;
}

.estimation-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: #e5e7eb;
  outline: none;
}

.estimation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.submit-estimation {
  margin-top: 1rem;
  width: 100%;
  padding: 0.8rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

.submit-estimation:hover {
  background: var(--accent-strong);
}

.submit-estimation.mini {
  margin-top: 0.5rem;
  padding: 0.6rem;
  font-size: 0.85rem;
}

.slider-result {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  background: #f0fdf4;
  border-radius: 12px;
  color: #166534;
}

/* Feedback & Confetti */
.interaction-feedback {
  margin-top: 0.5rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.interaction-feedback.visible {
  opacity: 1;
  transform: translateY(0);
}

.interaction-feedback.success {
  color: #10b981;
}

.interaction-feedback.error {
  color: #f43f5e;
}

.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
}

/* QR Overlay Styles */
.qr-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.qr-overlay {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  margin-top: 0.75rem;
  opacity: 0;
  transition: all 0.3s ease;
  height: 0;
  overflow: hidden;
  font-weight: 500;
}

.qr-placeholder.scanning .qr-overlay {
  opacity: 1;
  height: auto;
  margin-top: 0.5rem;
}

/* --- Sticky Scroll Steps --- */
.scroll-steps-section {
  height: 125vh;
  /* Aggressively reduced for compact feel */
  position: relative;
  background: white;
  z-index: 10;
  margin-bottom: 2rem;
}

.scroll-steps-sticky {
  position: sticky;
  top: 110px;
  height: auto;
  min-height: 400px;
  /* Reduced min-height */
  display: flex;
  align-items: flex-start;
  overflow: visible;
  padding-bottom: 1rem;
}

.scroll-steps-sticky .inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
}

.steps-grid {
  display: flex;
  justify-content: center;
  gap: 4rem;
  /* Reduced gap slightly */
  align-items: center;
  /* Center vertically */
  max-width: 1000px;
  width: 100%;
  /* Ensure full width */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Left: Visual Timeline */
.steps-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  flex: 0 0 80px;
  /* Fixed narrow width */
  align-items: center;
  /* Center markers */
}

.timeline-line {
  position: absolute;
  left: 50%;
  /* Center in column */
  top: 20px;
  bottom: 20px;
  width: 4px;
  background: #e5e7eb;
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 4px;
}

.timeline-progress {
  width: 100%;
  background: var(--primary);
  height: 0%;
  /* Animated via JS */
  border-radius: 4px;
  transition: height 0.1s linear;
}

.step-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.step-item.active {
  opacity: 1;
}

.step-marker {
  width: 40px;
  height: 40px;
  background: white;
  border: 4px solid #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.3s;
}

.step-item.active .step-marker {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

.step-label-visual {
  display: none;
  /* Hide label in visual column, keep it clean */
}

/* Right: Content */
.steps-content-container {
  position: relative;
  min-height: 450px;
  flex: 1;
  /* Allow to grow */
  min-width: 300px;
  /* Prevent crushing */
  text-align: left;
  /* Align text left for readability */
}

.step-text-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  pointer-events: none;
}

.step-text-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.step-text-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.step-text-card p {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.step-image-placeholder {
  height: 160px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .scroll-steps-section {
    height: 140vh;
    /* Keep scrollable on mobile */
  }

  .scroll-steps-sticky {
    position: sticky;
    /* Keep sticky */
    top: 80px;
    height: auto;
    min-height: 500px;
    padding: 0;
  }

  .steps-grid {
    gap: 1.5rem;
    /* Smaller gap */
    padding: 0 1rem;
    align-items: flex-start;
    /* Align top */
    margin-top: 2rem;
    /* Space for header */
  }

  .steps-visual {
    flex: 0 0 50px;
    /* Narrower visual column */
    gap: 3rem;
  }

  .timeline-line {
    left: 50%;
    width: 3px;
  }

  .step-marker {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    border-width: 3px;
  }

  .steps-content-container {
    min-width: 0;
    /* Allow shrinking */
    height: auto;
    /* Auto height for content */
    min-height: 480px;
    /* Ensure space for absolute children */
    position: relative;
  }

  .step-text-card {
    position: absolute;
    /* Keep absolute for transitions */
    transform: translateY(10px);
  }

  .step-text-card h3 {
    font-size: 1.3rem;
    /* Smaller heading */
    margin-bottom: 0.5rem;
  }

  .step-text-card p {
    font-size: 0.95rem;
    /* Smaller body text */
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  .step-image-placeholder {
    height: 120px;
    /* Smaller image */
    font-size: 1.2rem;
  }
}

/* Fix reset button visibility */
#reset-interactions.cta-btn.ghost {
  color: var(--primary-dark);
  border-color: rgba(29, 78, 216, 0.3);
}

#reset-interactions.cta-btn.ghost:hover {
  background: rgba(29, 78, 216, 0.08);
}

/* Final Demo Animation Overlay */


.demo-finished-content {
  background: white;
  padding: 2.5rem;
  border-radius: 24px;
  text-align: center;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(0.9);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.demo-finished-overlay.visible .demo-finished-content {
  transform: scale(1);
}

.demo-finished-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.final-score {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f0f9ff;
  border-radius: 16px;
  border: 1px solid #bae6fd;
}

.final-score span {
  display: block;
  font-size: 0.9rem;
  color: #0369a1;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.final-score strong {
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  color: #0284c7;
}

/* Fireworks Canvas */
#fireworks-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================
   Tourist Landing Page (B2C) - Redesign
   ========================================= */

/* Hero Section */
.tourist-hero {
  position: relative;
  height: 100vh;
  /* Fill exact viewport height */
  max-height: 1000px;
  /* Cap on ultra-tall screens if needed, mostly 100vh is good */
  background-image: image-set(url('../img/pictures/hero-stadtrallyes.webp') type('image/webp'), url('../img/pictures/hero-stadtrallyes.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding-top: 80px;
  /* Slight offset for header */
  overflow: hidden;
  /* Ensure no scroll within hero */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.7));
  z-index: 1;
}

.hero-content-center {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 1.5rem;
}

.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tourist-hero h1 {
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.tourist-hero p {
  font-size: 1.25rem;
  opacity: 0.95;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* App Store Badges */
.app-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: black;
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.store-badge svg {
  flex-shrink: 0;
}

.store-badge div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.store-badge .sub {
  font-size: 0.65rem;
  text-transform: uppercase;
}

.store-badge .main {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Inverse for dark footer/sections */
.store-badge.inverse {
  background: white;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.store-badge.inverse:hover {
  background: #f5f5f5;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Google Play Badge Variant */
.store-badge.google-play svg {
  width: 1.3rem;
  /* Slightly larger for Play Triangle */
}

/* Features Grid (B2C) */
.features-b2c {
  padding: 5rem 1.5rem;
  background: #fff;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  text-align: center;
  padding: 2rem 0;
}

.usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  /* Soft colored backgrounds */
}

.icon-circle.bg-blue {
  background: #eff6ff;
  color: #2563eb;
}

.icon-circle.bg-orange {
  background: #fff7ed;
  color: #ea580c;
}

.icon-circle.bg-teal {
  background: #f0fdfa;
  color: #0d9488;
}

.usp-item h3 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.usp-item p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
}

/* Cruise Section */
.cruise-section {
  padding: 6rem 1.5rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  position: relative;
  overflow: hidden;
}

.cruise-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  /* Content above image in mobile */
}

.cruise-content h2 {
  font-size: 2.5rem;
  margin: 0;
}

.badge-pill {
  display: inline-block;
  background: #0284c7;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  align-self: flex-start;
  text-transform: uppercase;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.cruise-image img {
  width: 100%;
  height: auto;
  /* Fill container */
  min-height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(3, 105, 161, 0.15);
  transform: rotate(2deg);
  transition: transform 0.4s ease;
}

.cruise-image img:hover {
  transform: rotate(0deg) scale(1.02);
}

.split-layout.reverse-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Ensure cruise image has height even if empty on desktop, though img usually provides it */
.cruise-image {
  min-height: 400px;
  display: flex;
}

@media (max-width: 900px) {
  .cruise-section {
    padding: 6rem 1.5rem;
    /* More padding for mobile breathing room */
    position: relative;
    color: white;
    /* Ensure text is white on mobile */
    overflow: hidden;
    /* Ensure rounded corners if wanted, or just clean edges */
  }

  .split-layout.reverse-mobile {
    display: block;
    /* Stack */
    position: relative;
  }

  /* Make image behave as background */
  .cruise-image {
    position: absolute;
    inset: -6rem -1.5rem;
    /* Stretch nicely */
    z-index: 0;
    min-height: 0;
    /* reset */
    display: block;
  }

  .cruise-image img {
    border-radius: 0;
    transform: none;
    filter: brightness(0.35);
    /* Darker for better text readability */
    height: 100%;
    width: 100%;
    object-position: center;
  }

  .cruise-content {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }

  .cruise-content h2 {
    font-size: 2.2rem;
  }

  .badge-pill {
    background: white;
    color: #0284c7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  .split-layout.reverse-mobile .cruise-image {
    order: -1;
  }
}

/* How It Works - Steps Row */
.steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}

.step-card {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 2rem;
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.step-card:hover {
  transform: translateY(-5px);
}

.step-num {
  width: 50px;
  height: 50px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 16px rgba(29, 78, 216, 0.25);
}

.step-arrow {
  font-size: 2rem;
  color: var(--muted);
  align-self: center;
  font-weight: 300;
}

@media (max-width: 768px) {
  .how-it-works {
    padding: 3rem 1rem;
    /* Reduced padding on section */
  }

  .steps-row {
    flex-direction: column;
    gap: 1rem;
    /* Much tighter gap */
    margin-top: 1.5rem;
  }

  .step-arrow {
    transform: rotate(90deg);
    display: none;
    /* Remove arrows on mobile to save space */
  }

  .step-card {
    display: flex;
    flex-direction: row;
    /* Ensure horizontal layout */
    align-items: center;
    text-align: left;
    padding: 1.25rem;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
  }

  .step-num {
    margin: 0;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.15);
  }

  .step-card h3 {
    margin: 0 0 0.15rem 0;
    font-size: 1.15rem;
    font-weight: 700;
  }

  .step-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--muted);
  }
}

/* City Grid */
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.city-card {
  position: relative;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: white;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.city-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

img.city-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.85));
  z-index: 1;
}

.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.city-card:hover .city-bg {
  transform: scale(1.1);
}

.city-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  width: 100%;
}

.city-content h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.city-content span {
  font-size: 0.9rem;
  opacity: 0.8;
  display: block;
  margin-top: 0.25rem;
}

/* City Highlight (Ravensburg) */
.city-rv .city-content::after {
  content: '★ Beliebt';
  position: absolute;
  top: -240px;
  right: 0;
  background: var(--accent);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* FAQ B2C */
.faq-grid {
  display: flex;
  /* Changed from grid to flex column for better stack */
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

.faq-detail {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}

.faq-detail:hover {
  border-color: var(--primary);
  background: #f8fafc;
}

.faq-detail summary {
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
  /* Hide default triangle */
  position: relative;
  padding-right: 2rem;
  cursor: pointer;
}

.faq-detail summary::marker {
  display: none;
}

.faq-detail summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 300;
}

.faq-detail[open] summary::after {
  content: '-';
}

.faq-detail p {
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* CTA Banner Dark */
.cta-banner-dark {
  background: #0f172a;
  /* Slate 900 */
  color: white;
  text-align: center;
  padding: 5rem 1.5rem;
}

.cta-banner-dark h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-banner-dark p {
  font-size: 1.25rem;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* --- Interaction Cards & Demo (Universal) --- */
.interaction-card {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.interaction-card.locked {
  filter: grayscale(1);
  opacity: 0.7;
  pointer-events: none;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

/* CTA Inner Layout to prevent grid conflict */
.cta-inner {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  text-align: center;
  display: block;
}

/* Ensure footer allows stacking and has dark background */
.footer {
  display: block;
  width: 100%;
  /* Ensure full width */
  background-color: #0f172a;
  /* Slate 900 to match CTA */
  color: white;
  padding: 4rem 1.5rem 2rem;
  /* Add padding */
  position: relative;
  z-index: 10;
}

.interaction-card.locked .locked-overlay {
  display: flex;
  pointer-events: all;
}

.lock-icon {
  background: white;
  padding: 1rem;
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--muted);
}

.demo-finished-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(5px);
  border-radius: var(--radius);
}

.demo-finished-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.mini-feedback {
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.2rem;
}

.confetti {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 100;
  border-radius: 50%;
}

/* Forum Editor Tabs */
.forum-editor-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
}

.forum-tab-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.forum-tab-btn:hover {
  color: var(--primary);
}

.forum-tab-btn.is-active {
  color: var(--primary);
  border-color: var(--primary);
}

.forum-preview-area {
  min-height: 200px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

/* Modern Reply Form */
.forum-reply-form {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 1rem;
  border-top: 1px solid #e2e8f0;
  margin: 0 -1.75rem -1.75rem -1.75rem;
  /* Negative margin to span full width of modal padding */
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.forum-reply-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1.5rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.forum-reply-input-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
  background: white;
}

.forum-reply-textarea {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.6rem 0;
  font-family: inherit;
  font-size: 0.95rem;
  resize: none;
  outline: none;
  min-height: 24px;
  max-height: 200px;
  line-height: 1.5;
}

.forum-send-btn {
  background: var(--primary);
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s, background-color 0.2s;
  flex-shrink: 0;
}

.forum-send-btn:hover {
  background: var(--primary-dark);
}

.forum-send-btn:active {
  transform: scale(0.95);
}

.forum-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
}

.forum-edit-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(15, 23, 42, 0.03);
}

.forum-send-btn svg {
  margin-left: -2px;
  /* Visual centering adjustment for send icon */
}

.forum-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
  flex-shrink: 0;
  margin-bottom: 2px;
  /* Align with input */
}

.forum-upload-btn:hover {
  color: var(--primary);
  background: rgba(15, 23, 42, 0.05);
  border-radius: 50%;
}

.forum-reply-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0;
}

.forum-file-badge {
  font-size: 0.75rem;
  background: #f1f5f9;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Aggressive Gradient Removal */
.forum-modal__dialog,
.forum-modal__dialog--large,
.forum-modal__header {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
}

.forum-modal__dialog::before,
.forum-modal__dialog::after,
.forum-modal__header::before,
.forum-modal__header::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* Adjustments for posted comments to look clean */
.forum-post {
  padding: 1rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.forum-post:last-child {
  border-bottom: none;
}

.markdown-body {
  line-height: 1.6;
  color: var(--text);
}

.markdown-body p {
  margin-bottom: 1rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 {
  font-size: 1.5rem;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h2 {
  font-size: 1.3rem;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h3 {
  font-size: 1.1rem;
}

.markdown-body h4 {
  font-size: 1rem;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
  margin-bottom: 1rem;
  list-style-type: disc;
  /* Ensure bullets show */
}

.markdown-body ol {
  list-style-type: decimal;
}

.markdown-body li {
  margin-bottom: 0.25rem;
}

.markdown-body li::before {
  content: none;
  /* Remove custom checkmarks from other lists if they bleed in */
}

.markdown-body blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 4px solid #dfe2e5;
  color: #6a737d;
}

.markdown-body img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.markdown-body strong {
  font-weight: 700;
  color: var(--primary-dark);
  /* Highlight key terms slightly */
}

.markdown-body a {
  color: var(--primary);
  text-decoration: underline;
}

.markdown-body code {
  background: rgba(27, 31, 35, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 85%;
  font-family: monospace;
}

.markdown-body pre {
  background: #f6f8fa;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
}

/* --- School Account Generator Showcase --- */
.showcase-section {
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.showcase-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--primary-dark);
}

.showcase-content p {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.generator-mockup {
  background: white;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.generator-mockup header {
  background: transparent;
  color: var(--text);
  padding: 0;
  margin-bottom: 1.5rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.generator-mockup h3 {
  margin: 0;
  font-size: 1.25rem;
}

.generator-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}

.input-mock {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--text);
  background: #f8fafc;
}

.generate-btn {
  background: var(--primary);
  color: white;
  padding: 1rem;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.generate-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.accounts-preview {
  margin-top: 2rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
  display: none;
}

.accounts-preview.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

.account-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem;
  background: #f1f5f9;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-family: monospace;
  font-size: 0.9rem;
}

.export-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.export-btn {
  flex: 1;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  font-size: 0.9rem;
}

.export-btn.print {
  background: #10b981;
  color: white;
  border: none;
}

.export-btn.csv {
  background: white;
  color: var(--text);
  border: 1px solid #e2e8f0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
}

/* Process Steps Redesign */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.process-step {
  background: white;
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
  height: 100%;
  /* Ensure equal height */
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Arrows */
.process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -2.5rem;
  width: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  font-weight: 300;
  z-index: 10;
  opacity: 0.4;
  pointer-events: none;
}

.process-step__number {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 6px rgba(29, 78, 216, 0.25);
}

.process-step__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.process-step__desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.process-step__options {
  text-align: left;
  font-size: 0.9rem;
  width: 100%;
  margin-top: auto;
  /* Push to bottom if flex column */
  padding-top: 1rem;
}

.process-step__options ul {
  padding-left: 1.25rem;
  margin: 0;
  color: var(--muted);
}

.process-step__options li {
  margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .process-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Lead Modal Styles
   ========================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: white;
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-overlay.is-visible .modal-container {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.5rem;
  z-index: 10;
}

.modal-close:hover {
  color: #111827;
}

.modal-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #111827;
  font-weight: 700;
}

.modal-header p {
  margin: 0.5rem 0 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.lead-form {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group small {
  font-size: 0.8rem;
  color: #6b7280;
}

.form-status {
  margin: 0;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-status.success {
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.form-status.error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Loader in button */
.btn-loader {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .modal-container {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}