/* LowCodeDev — bridge.css
 * Brings pages that still use the original layout into the new design system:
 * same palette, fonts and button shape as css/style.css. Loaded after styles.css. */
:root {
  --background: 300 20% 98%; --foreground: 275 23% 10%;
  --card: 0 0% 100%; --card-foreground: 275 23% 10%; --popover: 0 0% 100%; --popover-foreground: 275 23% 10%;
  --primary: 341 66% 33%; --primary-foreground: 0 0% 100%; --ring: 341 66% 33%;
  --muted: 300 16% 95%; --muted-foreground: 280 9% 37%;
  --accent: 337 55% 95%; --accent-foreground: 341 66% 33%;
  --border: 300 14% 90%; --input: 300 14% 90%;
  --dark-bg: 272 24% 9%; --dark-card: 272 18% 14%;
  --gradient-primary: linear-gradient(135deg, #8c1d40 0%, #a8325a 100%);
  --gradient-cta: linear-gradient(135deg, #8c1d40 0%, #a8325a 100%);
  --gradient-hero: linear-gradient(180deg, #16111c 0%, #2a1220 62%, #16111c 100%);
  --shadow-button: 0 2px 8px -2px rgba(140, 29, 64, .35);
}
body, .font-sans { font-family: var(--f-body); }
.font-display, h1, h2, h3, h4 { font-family: var(--f-display); }
.bg-\[hsl\(220_25\%_8\%\)\] { background-color: #16111c !important; }

/* original pages were built for a fixed header; the shared header is sticky */
main > section:first-child,
#root > div > main > section:first-child { padding-top: clamp(2.5rem, 5vw, 4rem) !important; min-height: 0 !important; }

/* buttons: pill shape and sentence case, like the new pages */
a.bg-primary[class*="rounded"], button.bg-primary[class*="rounded"], a.bg-gradient-cta, button.bg-gradient-cta,
a.border-primary.border-2, button.border-primary.border-2,
a[class*="border-white/30"][class*="rounded"], a[class*="border-white/20"][class*="rounded"] {
  border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important;
}
/* old floating back-to-top / WhatsApp buttons stay; keep them above the sticky header layer */
[data-to-top] { z-index: 45; }

/* page heroes: the original dark banner becomes the light hero used on redesigned pages */
.lcd-hero { background: linear-gradient(180deg, var(--wine-soft), var(--paper)) !important; color: var(--ink); border-bottom: 1px solid var(--line); }
.lcd-hero .text-white, .lcd-hero .text-white\/90, .lcd-hero .text-white\/80 { color: var(--ink) !important; }
.lcd-hero [class*="text-white/"] { color: var(--muted) !important; }
.lcd-hero [class*="bg-white/"], .lcd-hero [class*="bg-black/"] { background: var(--card) !important; }
.lcd-hero [class*="border-white/"] { border-color: var(--line) !important; }
.lcd-hero [class*="bg-primary/"].text-primary-foreground, .lcd-hero [class*="bg-primary/"] .text-primary-foreground { color: var(--wine) !important; }
.lcd-hero .bg-primary, .lcd-hero .bg-primary * { color: #fff !important; }
.lcd-hero input { color: var(--ink) !important; }
.lcd-hero input::placeholder { color: var(--muted) !important; }
main.pt-20, main.pt-24, main.pt-16, main[class*="pt-"] { padding-top: 0 !important; }
main { overflow-x: clip; }
/* verify result cards on redesigned pages: follow dark mode too */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --background: 272 14% 8%; --foreground: 290 20% 94%; --card: 280 14% 11%; --card-foreground: 290 20% 94%;
    --muted: 280 10% 16%; --muted-foreground: 280 8% 66%; --border: 280 9% 19%; --primary: 343 66% 61%; }
}

:root[data-theme="dark"] { --background: 272 14% 8%; --foreground: 290 20% 94%; --card: 280 14% 11%; --card-foreground: 290 20% 94%;
  --muted: 280 10% 16%; --muted-foreground: 280 8% 66%; --border: 280 9% 19%; --primary: 343 66% 61%; }