/* ═══════════════════════════════════════════════════════════════════════════
   impeccable.css — Design Foundation for Appoiint Public Pages
   Based on impeccable.style (https://github.com/pbakaus/impeccable)
   Register: Hybrid (brand hero + product functional). Default: light mode.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Design Tokens ──────────────────────────────────────────────────── */

:root {
  /* Typography: Geist Sans (off reflex-reject list) */
  --imp-font: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Type scale: 1.333x perfect fourth, fluid with clamp() */
  --imp-step-xs: clamp(0.694rem, 0.65rem + 0.15vw, 0.75rem);
  --imp-step-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem);
  --imp-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --imp-step-1: clamp(1.333rem, 1.2rem + 0.5vw, 1.5rem);
  --imp-step-2: clamp(1.777rem, 1.5rem + 1vw, 2.369rem);
  --imp-step-3: clamp(2.369rem, 1.9rem + 1.5vw, 3.157rem);
  --imp-step-4: clamp(3.157rem, 2.4rem + 2.5vw, 4.209rem);

  /* Color: tinted neutrals (never pure #000 or #fff) */
  --imp-dark: #0c0a12;
  --imp-gray-900: #131018;
  --imp-gray-800: #1e1a26;
  --imp-gray-700: #2d2838;
  --imp-gray-600: #4a4456;
  --imp-gray-500: #6b6578;
  --imp-gray-400: #948ea0;
  --imp-gray-300: #d1cdd8;
  --imp-gray-200: #e5e2ea;
  --imp-gray-100: #f2f0f5;
  --imp-gray-50: #f9f8fb;
  --imp-white: #faf9f7;

  /* Brand */
  --imp-primary: #1E3A5F;
  --imp-primary-dark: #0F2440;
  --imp-primary-light: #2a5080;
  --imp-accent-green: #10B981;
  --imp-accent-blue: #63B3ED;

  /* Semantic: light mode defaults */
  --imp-bg: var(--imp-gray-50);
  --imp-bg-alt: var(--imp-white);
  --imp-bg-card: var(--imp-white);
  --imp-bg-section-dark: var(--imp-gray-800);
  --imp-bg-nav-pill: var(--imp-gray-800);
  --imp-bg-footer: var(--imp-dark);
  --imp-text: var(--imp-gray-800);
  --imp-text-heading: var(--imp-gray-900);
  --imp-text-secondary: var(--imp-gray-600);
  --imp-text-tertiary: var(--imp-gray-500);
  --imp-text-muted: var(--imp-gray-400);
  --imp-text-on-dark: var(--imp-gray-300);
  --imp-text-on-dark-hover: var(--imp-white);
  --imp-border: var(--imp-gray-200);
  --imp-border-hover: var(--imp-primary);

  /* Motion: ease-out-quart (no bounce/elastic) */
  --imp-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --imp-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --imp-ease-leave: cubic-bezier(0.7, 0, 0.84, 0);
  --imp-dur-micro: 120ms;
  --imp-dur-normal: 200ms;
  --imp-dur-slow: 400ms;
  --imp-dur-entrance: 600ms;

  /* Spatial: 4pt grid */
  --imp-space-xs: 4px;
  --imp-space-sm: 8px;
  --imp-space-md: 16px;
  --imp-space-lg: 24px;
  --imp-space-xl: 32px;
  --imp-space-2xl: 48px;
  --imp-space-3xl: 64px;
  --imp-space-4xl: 96px;

  /* Focus */
  --imp-focus-color: var(--imp-primary-light);
  --imp-focus-offset: 3px;

  /* Touch */
  --imp-touch-min: 44px;

  /* Measure */
  --imp-measure: 65ch;
}

/* ─── 2. Dark Mode ──────────────────────────────────────────────────────── */

body.landing-dark {
  --imp-bg: var(--imp-dark);
  --imp-bg-alt: var(--imp-gray-900);
  --imp-bg-card: var(--imp-gray-800);
  --imp-bg-section-dark: var(--imp-gray-700);
  --imp-bg-nav-pill: var(--imp-gray-700);
  --imp-bg-footer: #050308;
  --imp-text: var(--imp-gray-300);
  --imp-text-heading: var(--imp-white);
  --imp-text-secondary: var(--imp-gray-400);
  --imp-text-tertiary: var(--imp-gray-500);
  --imp-text-muted: var(--imp-gray-500);
  --imp-text-on-dark: var(--imp-gray-400);
  --imp-text-on-dark-hover: var(--imp-white);
  --imp-border: var(--imp-gray-700);
  --imp-border-hover: var(--imp-primary-light);
}

/* ─── 3. Base Resets (scoped under .imp-active) ─────────────────────────── */

body.imp-active {
  font-family: var(--imp-font);
  color: var(--imp-text);
  background-color: var(--imp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.imp-active h1,
body.imp-active h2,
body.imp-active h3,
body.imp-active h4,
body.imp-active h5,
body.imp-active h6 {
  font-family: var(--imp-font);
  line-height: 1.1;
}

/* Focus: :focus-visible (never outline:none without replacement) */
body.imp-active a:focus-visible,
body.imp-active button:focus-visible,
body.imp-active [role="button"]:focus-visible,
body.imp-active input:focus-visible,
body.imp-active textarea:focus-visible,
body.imp-active select:focus-visible {
  outline: 2px solid var(--imp-focus-color);
  outline-offset: var(--imp-focus-offset);
  border-radius: 4px;
}

/* Touch targets: min 44px globally */
body.imp-active a,
body.imp-active button {
  min-height: var(--imp-touch-min);
}

/* Entrance animation */
@keyframes impFadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 4. Navigation Overrides ───────────────────────────────────────────── */

body.imp-active .nav-header {
  background-color: var(--imp-bg);
  transition: background-color var(--imp-dur-normal) var(--imp-ease);
}

body.imp-active .nav-menu-container {
  background-color: var(--imp-bg-nav-pill);
  border-radius: 9999px !important; /* Fully rounded pill — half-circle ends */
  align-items: center !important;   /* Vertical center all children */
  transition: background-color var(--imp-dur-normal) var(--imp-ease);
}

body.imp-active .nav-menu {
  align-items: center !important;
}

body.imp-active .nav-menu li {
  display: flex;
  align-items: center;
}

body.imp-active .nav-icon {
  background-color: rgba(255, 255, 255, 0.12);
}

body.imp-active .nav-menu a,
body.imp-active .nav-menu button {
  color: var(--imp-text-on-dark);
  font-family: var(--imp-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--imp-dur-micro) var(--imp-ease),
              background-color var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .nav-menu a:hover,
body.imp-active .nav-menu button:hover {
  color: var(--imp-text-on-dark-hover);
  background-color: rgba(255, 255, 255, 0.1);
}

body.imp-active .dropdown-menu {
  background: var(--imp-bg-nav-pill);
  transition: opacity var(--imp-dur-normal) var(--imp-ease),
              visibility var(--imp-dur-normal) var(--imp-ease);
}

body.imp-active .dropdown-menu a {
  color: var(--imp-text-on-dark);
  transition: color var(--imp-dur-micro) var(--imp-ease),
              background-color var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .dropdown-menu a::before {
  color: var(--imp-text-on-dark);
}

body.imp-active .dropdown-menu a:hover {
  color: var(--imp-text-on-dark-hover);
}

body.imp-active .dropdown-menu a:hover::before {
  color: var(--imp-text-on-dark-hover);
}

/* ─── 5. Buttons ────────────────────────────────────────────────────────── */

body.imp-active .btn-signup {
  background-color: var(--imp-primary);
  color: var(--imp-white) !important;
  font-family: var(--imp-font);
  border-radius: 9999px !important; /* Match nav pill shape */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--imp-dur-normal) var(--imp-ease),
              transform var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .btn-signup:hover {
  background-color: var(--imp-primary-dark);
  transform: translateY(-1px);
}

body.imp-active .btn-primary {
  background-color: var(--imp-bg-section-dark);
  color: var(--imp-white) !important;
  font-family: var(--imp-font);
  transition: background-color var(--imp-dur-normal) var(--imp-ease),
              transform var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .btn-primary:hover {
  background-color: var(--imp-dark);
  transform: translateY(-1px);
}

body.imp-active .btn-secondary {
  background-color: var(--imp-primary);
  color: var(--imp-white) !important;
  font-family: var(--imp-font);
  transition: background-color var(--imp-dur-normal) var(--imp-ease),
              transform var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .btn-secondary:hover {
  background-color: var(--imp-primary-dark);
  transform: translateY(-1px);
}

body.imp-active .btn-white {
  background-color: var(--imp-white);
  color: var(--imp-text-heading);
  font-family: var(--imp-font);
  transition: background-color var(--imp-dur-normal) var(--imp-ease),
              transform var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .btn-white:hover {
  background-color: var(--imp-gray-50);
  transform: translateY(-1px);
}

body.imp-active .btn-dark {
  background-color: var(--imp-bg-section-dark);
  color: var(--imp-white) !important;
  font-family: var(--imp-font);
}

body.imp-active .btn-cta-white {
  background: var(--imp-white);
  color: var(--imp-primary) !important;
  font-family: var(--imp-font);
  transition: background-color var(--imp-dur-normal) var(--imp-ease),
              transform var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .btn-cta-white:hover {
  background: var(--imp-gray-50);
  transform: translateY(-1px);
}

body.imp-active .btn-cta-dark {
  background-color: var(--imp-bg-section-dark);
  color: var(--imp-white) !important;
  font-family: var(--imp-font);
  transition: background-color var(--imp-dur-normal) var(--imp-ease),
              transform var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .btn-cta-dark:hover {
  background-color: var(--imp-dark);
  transform: translateY(-1px);
}

/* ─── 6. Hero Section ───────────────────────────────────────────────────── */

body.imp-active .hero-section,
body.imp-active .pricing-hero-section {
  background-color: var(--imp-bg);
}

body.imp-active .hero-title,
body.imp-active .pricing-hero-title {
  color: var(--imp-text-heading);
  font-family: var(--imp-font);
}

body.imp-active .hero-subtitle,
body.imp-active .pricing-hero-subtitle {
  color: var(--imp-text-tertiary);
  font-family: var(--imp-font);
}

body.imp-active .hero-description,
body.imp-active .pricing-hero-description {
  color: var(--imp-text-secondary);
  font-family: var(--imp-font);
  max-width: var(--imp-measure);
}

body.imp-active .hero-visual {
  background-color: var(--imp-bg-card);
  border-color: var(--imp-border);
}

body.imp-active .pink-text {
  color: var(--imp-primary);
}

/* ─── 7. Generic Content Sections ───────────────────────────────────────── */

body.imp-active .features-section,
body.imp-active .custom-branding-section,
body.imp-active .faq-section,
body.imp-active .payg-section {
  background-color: var(--imp-bg);
}

body.imp-active .mission-section,
body.imp-active .social-proof-section {
  background-color: var(--imp-bg-alt);
}

body.imp-active .stats-section,
body.imp-active .platform-section {
  background-color: var(--imp-bg-section-dark);
}

body.imp-active .cta-section,
body.imp-active .savings-section,
body.imp-active .demo-cta {
  background-color: var(--imp-primary);
}

/* Section titles */
body.imp-active .section-title,
body.imp-active .features-text h2,
body.imp-active .feature-text h2,
body.imp-active .custom-branding-title,
body.imp-active .company-section h2,
body.imp-active .mission-card h3 {
  color: var(--imp-text-heading);
  font-family: var(--imp-font);
}

/* Section descriptions */
body.imp-active .section-description,
body.imp-active .features-text p,
body.imp-active .feature-text p,
body.imp-active .mission-card p,
body.imp-active .company-section p {
  color: var(--imp-text-secondary);
  font-family: var(--imp-font);
  max-width: var(--imp-measure);
}

/* ─── 8. Cards ──────────────────────────────────────────────────────────── */

body.imp-active .pricing-card,
body.imp-active .mission-card,
body.imp-active .contact-card,
body.imp-active .faq-item,
body.imp-active .payg-card {
  background-color: var(--imp-bg-card);
  border-color: var(--imp-border);
  transition: border-color var(--imp-dur-normal) var(--imp-ease),
              box-shadow var(--imp-dur-normal) var(--imp-ease);
}

body.imp-active .pricing-card.featured {
  border-color: var(--imp-primary);
}

body.imp-active .contact-card:hover {
  border-color: var(--imp-border-hover);
}

body.imp-active .feature-block {
  background-color: var(--imp-bg-card);
  border-color: var(--imp-primary);
}

/* Card text */
body.imp-active .pricing-card-title,
body.imp-active .pricing-card-amount,
body.imp-active .contact-card h3,
body.imp-active .faq-question h3,
body.imp-active .payg-title {
  color: var(--imp-text-heading);
  font-family: var(--imp-font);
}

body.imp-active .pricing-card-description,
body.imp-active .contact-card p,
body.imp-active .faq-answer-content,
body.imp-active .payg-description {
  color: var(--imp-text-secondary);
  font-family: var(--imp-font);
}

body.imp-active .pricing-card-period,
body.imp-active .pricing-card-billed,
body.imp-active .pricing-card-features-title {
  color: var(--imp-text-muted);
}

body.imp-active .pricing-card-savings,
body.imp-active .pricing-card-includes {
  color: var(--imp-accent-green);
}

body.imp-active .faq-icon,
body.imp-active .faq-title,
body.imp-active .pricing-link,
body.imp-active .contact-card a,
body.imp-active .progress-link,
body.imp-active .payg-label {
  color: var(--imp-primary);
}

body.imp-active .faq-question:hover {
  background: var(--imp-bg);
}

/* ─── 9. Pricing Toggle ────────────────────────────────────────────────── */

body.imp-active .pricing-toggle-container {
  background-color: var(--imp-bg-card);
}

body.imp-active .pricing-toggle-label {
  color: var(--imp-text);
}

body.imp-active .pricing-toggle-label.inactive {
  color: var(--imp-text-muted);
}

body.imp-active .pricing-toggle-recommended {
  color: var(--imp-primary);
}

body.imp-active .toggle-switch {
  background-color: var(--imp-border);
}

body.imp-active .toggle-switch.active {
  background-color: var(--imp-primary);
}

body.imp-active .toggle-slider {
  background-color: var(--imp-white);
}

/* Pricing CTAs */
body.imp-active .pricing-card-cta.primary {
  background-color: var(--imp-bg-section-dark);
  color: var(--imp-white) !important;
}

body.imp-active .pricing-card-cta.featured {
  background-color: var(--imp-primary);
  color: var(--imp-white) !important;
}

body.imp-active .pricing-card-cta.outline {
  background-color: var(--imp-bg-card);
  border-color: var(--imp-border);
  color: var(--imp-text);
}

body.imp-active .pricing-card-cta.outline:hover {
  border-color: var(--imp-primary);
  color: var(--imp-primary);
}

/* ─── 10. Stats / Dark Sections ─────────────────────────────────────────── */

body.imp-active .stat-value {
  color: var(--imp-white);
  font-family: var(--imp-font);
}

body.imp-active .stat-label {
  color: var(--imp-primary-light);
}

body.imp-active .stat-icon svg,
body.imp-active .custom-branding-icon svg,
body.imp-active .feature-list li::before {
  color: var(--imp-primary);
}

body.imp-active .platform-section h2 {
  color: var(--imp-white);
  font-family: var(--imp-font);
}

body.imp-active .platform-section p {
  color: var(--imp-text-on-dark);
}

body.imp-active .platform-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.imp-active .platform-item h4 {
  color: var(--imp-white);
  font-family: var(--imp-font);
}

body.imp-active .platform-item-replaces {
  color: var(--imp-accent-blue);
}

/* CTA text on colored backgrounds */
body.imp-active .cta-container h2,
body.imp-active .savings-container h2,
body.imp-active .demo-cta h2 {
  color: var(--imp-white) !important;
  font-family: var(--imp-font);
}

body.imp-active .cta-container p,
body.imp-active .savings-container p,
body.imp-active .demo-cta p {
  color: var(--imp-gray-300);
}

body.imp-active .demo-cta-btn {
  background-color: var(--imp-white);
  color: var(--imp-primary) !important;
}

/* ─── 11. Footer ────────────────────────────────────────────────────────── */

body.imp-active .footer {
  background-color: var(--imp-bg-footer);
}

body.imp-active .footer-section h4 {
  color: var(--imp-white);
  font-family: var(--imp-font);
}

body.imp-active .footer-section ul li a {
  color: var(--imp-gray-500);
  transition: color var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .footer-section ul li a:hover {
  color: var(--imp-primary-light);
}

body.imp-active .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.imp-active .footer-bottom p {
  color: var(--imp-gray-600);
}

body.imp-active .footer-links a {
  color: var(--imp-gray-500);
  transition: color var(--imp-dur-micro) var(--imp-ease);
}

body.imp-active .footer-links a:hover {
  color: var(--imp-primary-light);
}

/* ─── 12. FAQ ───────────────────────────────────────────────────────────── */

body.imp-active .faq-item {
  box-shadow: 0 2px 8px rgba(12, 10, 18, 0.05);
}

body.imp-active .faq-item:hover {
  box-shadow: 0 4px 16px rgba(12, 10, 18, 0.08);
}

/* ─── 13. Contact Cards ─────────────────────────────────────────────────── */

body.imp-active .contact-grid .contact-card {
  background-color: var(--imp-bg-card);
  border-color: var(--imp-border);
}

/* ─── 14. Error Page (404) ──────────────────────────────────────────────── */

body.imp-active .error-section {
  background-color: var(--imp-bg);
}

body.imp-active .error-code {
  color: var(--imp-primary);
  font-family: var(--imp-font);
}

body.imp-active .error-title {
  color: var(--imp-text-heading);
  font-family: var(--imp-font);
}

body.imp-active .error-message {
  color: var(--imp-text-tertiary);
}

/* ─── 15. Dark Mode: Logo Inversion ─────────────────────────────────────── */

body.imp-active.landing-dark .logo-img {
  filter: brightness(0) invert(1);
}

/* Dark mode: customer/partner scrolling logos → white */
body.imp-active.landing-dark .company-logo {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.8;
}

body.imp-active.landing-dark .company-logo:hover {
  filter: grayscale(0%) brightness(0) invert(1);
  opacity: 1;
}

body.imp-active.landing-dark .company-logo--light {
  filter: grayscale(100%) brightness(0) invert(1);
}

body.imp-active.landing-dark .company-logo--light:hover {
  filter: grayscale(0%) brightness(0) invert(1);
}

/* Dark mode: ALL white/light-bg buttons need dark text for contrast */
body.imp-active.landing-dark .btn-white,
body.imp-active.landing-dark .btn-cta-white,
body.imp-active.landing-dark .demo-cta-btn,
body.imp-active.landing-dark .pricing-card-cta.outline,
body.imp-active.landing-dark a[class*="btn"][style*="background:#fff"],
body.imp-active.landing-dark a[class*="btn"][style*="background:white"],
body.imp-active.landing-dark a[class*="btn"][style*="background-color:#fff"],
body.imp-active.landing-dark a[class*="btn"][style*="background-color:white"] {
  color: var(--imp-dark) !important;
}

/* Dark mode: white button hover stays dark text */
body.imp-active.landing-dark .btn-white:hover,
body.imp-active.landing-dark .btn-cta-white:hover,
body.imp-active.landing-dark .demo-cta-btn:hover {
  color: var(--imp-dark) !important;
}

/* Dark mode: logo scroll gradient fades must match dark bg */
body.imp-active.landing-dark .logo-row::before {
  background: linear-gradient(to right, var(--imp-bg), transparent) !important;
}

body.imp-active.landing-dark .logo-row::after {
  background: linear-gradient(to left, var(--imp-bg), transparent) !important;
}

/* Dark mode: hero mockup border */
body.imp-active.landing-dark .hero-visual,
body.imp-active.landing-dark .hero-mockup {
  border-color: var(--imp-gray-700);
}

/* Dark mode: nav pill needs subtle contrast */
body.imp-active.landing-dark .nav-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Dark mode: white sections must flip */
body.imp-active.landing-dark .social-proof-section,
body.imp-active.landing-dark .mission-section {
  background-color: var(--imp-bg-alt);
}

/* Dark mode: FAQs need dark cards */
body.imp-active.landing-dark .faq-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.imp-active.landing-dark .faq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ─── 16. Mode Toggle Button ────────────────────────────────────────────── */

.imp-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px !important; /* Override 44px touch target — circle must stay 36px */
  max-height: 36px;
  border-radius: 50% !important; /* Must stay circle — override focus-visible 4px */
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--imp-gray-300);
  cursor: pointer;
  transition: background-color var(--imp-dur-micro) var(--imp-ease),
              color var(--imp-dur-micro) var(--imp-ease);
  font-size: 14px;
  padding: 0;
  flex-shrink: 0;
}

.imp-mode-toggle:focus-visible {
  border-radius: 50% !important;
  outline-offset: 2px;
}

.imp-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--imp-white);
}

/* ─── 17. Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body.imp-active .hero-title,
  body.imp-active .pricing-hero-title {
    font-size: var(--imp-step-3);
  }
}

@media (max-width: 480px) {
  body.imp-active .hero-title,
  body.imp-active .pricing-hero-title {
    font-size: var(--imp-step-2);
  }
}

/* ─── 18. Print ─────────────────────────────────────────────────────────── */

@media print {
  body.imp-active {
    color: #131018;
    background: #fff;
  }
  body.imp-active .nav-header,
  body.imp-active .footer,
  body.imp-active .imp-mode-toggle {
    display: none;
  }
}