/* ============================================================
   APPINGHRM LANDING PAGE — STYLESHEET
   ============================================================ */

/* --- CSS Variables (Design Tokens) --- */
:root {
  --lp-primary:        oklch(0.52 0.22 280);
  --lp-primary-fg:     oklch(0.99 0 0);
  --lp-background:     oklch(1 0 0);
  --lp-foreground:     oklch(0.18 0.04 270);
  --lp-muted-fg:       oklch(0.48 0.03 265);
  --lp-border:         oklch(0.90 0.01 270);
  --lp-muted:          oklch(0.97 0.01 270);

  --lp-grad-primary:   linear-gradient(135deg, oklch(0.50 0.22 265) 0%, oklch(0.52 0.24 295) 100%);
  --lp-grad-hero:      radial-gradient(ellipse 70% 55% at 50% 0%,  oklch(0.55 0.22 285 / 22%), transparent 65%),
                       radial-gradient(ellipse 55% 45% at 88% 25%, oklch(0.55 0.22 265 / 18%), transparent 65%),
                       radial-gradient(ellipse 50% 40% at 10% 30%, oklch(0.60 0.20 300 / 14%), transparent 65%),
                       linear-gradient(180deg, oklch(1 0 0), oklch(0.99 0.005 270));
  --lp-grad-ai:        linear-gradient(135deg, oklch(0.42 0.24 295) 0%, oklch(0.50 0.22 270) 50%, oklch(0.45 0.24 310) 100%);

  --lp-shadow-glow:    0 20px 60px -20px oklch(0.52 0.24 295 / 35%);
  --lp-shadow-card:    0 10px 40px -12px oklch(0.30 0.10 270 / 18%);
  --lp-shadow-ai:      0 25px 80px -20px oklch(0.52 0.24 295 / 45%);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--lp-background);
  color: var(--lp-foreground);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { text-decoration: none; }
img, svg { display: block; }

/* --- Glass Utilities --- */
.glass {
  background: linear-gradient(135deg, oklch(1 0 0 / 80%), oklch(0.99 0.01 270 / 65%));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(0.52 0.22 280 / 12%);
  box-shadow: 0 8px 30px -12px oklch(0.30 0.10 270 / 12%);
}
.glass-strong {
  background: linear-gradient(135deg, oklch(1 0 0 / 95%), oklch(0.98 0.01 270 / 85%));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid oklch(0.52 0.22 280 / 16%);
  box-shadow: 0 16px 50px -18px oklch(0.30 0.10 270 / 22%);
}
.gradient-text {
  background: linear-gradient(135deg, oklch(0.50 0.22 265), oklch(0.50 0.24 300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-primary { color: var(--lp-primary); }

/* --- Animations --- */
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.animate-float { animation: lp-float 6s ease-in-out infinite; }

@keyframes lp-pulse-glow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
.animate-pulse-glow { animation: lp-pulse-glow 3s ease-in-out infinite; }

/* --- Container --- */
.lp-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .lp-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .lp-container { padding-left: 2rem;   padding-right: 2rem;   } }

/* ============================================================
   BUTTONS
   ============================================================ */
.lp-btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--lp-grad-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px -4px oklch(0.52 0.24 295 / 40%);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-btn-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px -6px oklch(0.52 0.24 295 / 55%);
  color: #fff;
}
.lp-btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, oklch(1 0 0 / 80%), oklch(0.99 0.01 270 / 65%));
  backdrop-filter: blur(20px);
  border: 1px solid oklch(0.52 0.22 280 / 15%);
  color: var(--lp-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
}
.lp-btn-glass:hover {
  background: oklch(0.98 0.01 270 / 90%);
  color: var(--lp-foreground);
}
.lp-btn-xl { font-size: 1rem !important; padding: 0.875rem 1.75rem !important; }

/* ============================================================
   NAVBAR
   ============================================================ */
.lp-navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: 1rem;
}
.lp-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
}
.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--lp-foreground);
}
.lp-logo {
  height: 2rem;
  width: 2rem;
  object-fit: contain;
  border-radius: 0.375rem;
  transition: transform 0.2s;
}
.lp-nav-brand:hover .lp-logo { transform: scale(1.1); }
.lp-brand-text { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.025em; }
.lp-nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.lp-nav-login {
  display: none;
  font-size: 0.875rem;
  color: var(--lp-muted-fg);
  padding: 0.5rem 0.75rem;
  transition: color 0.2s;
}
.lp-nav-login:hover { color: var(--lp-foreground); }
@media (min-width: 640px) { .lp-nav-login { display: inline-block; } }

/* ============================================================
   HERO SECTION
   ============================================================ */
.lp-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 4rem;
  overflow: hidden;
}
@media (min-width: 640px) { .lp-hero { padding-top: 10rem; padding-bottom: 6rem; } }

.lp-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--lp-grad-hero);
  pointer-events: none;
}
.lp-hero-center-glow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  height: 18rem;
  width: 60rem;
  max-width: 100%;
  border-radius: 50%;
  background: var(--lp-grad-ai);
  opacity: 0.20;
  filter: blur(4rem);
  pointer-events: none;
}
.lp-hero-inner {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--lp-muted-fg);
  margin-bottom: 1.5rem;
}
.lp-badge svg { width: 0.875rem; height: 0.875rem; color: var(--lp-primary); }
.lp-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
@media (min-width: 640px)  { .lp-hero-title { font-size: 3rem;    } }
@media (min-width: 1024px) { .lp-hero-title { font-size: 3.75rem; } }
.lp-hero-desc {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--lp-muted-fg);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) { .lp-hero-desc { font-size: 1.125rem; } }
.lp-hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* --- Dashboard Mockup --- */
.lp-mockup-wrap {
  margin-top: 5rem;
  position: relative;
}
.lp-mockup-glow {
  position: absolute;
  inset: -2rem;
  background: var(--lp-grad-ai);
  opacity: 0.30;
  filter: blur(3rem);
  border-radius: 3rem;
  pointer-events: none;
}
.lp-dashboard-card {
  position: relative;
  border-radius: 1rem;
  padding: 0.75rem;
  overflow: hidden;
  box-shadow: var(--lp-shadow-card);
}
@media (min-width: 640px) { .lp-dashboard-card { padding: 1rem; } }

.lp-window-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.5rem 0.75rem;
}
.lp-dot {
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 50%;
}
.lp-dot-red    { background: oklch(0.65 0.20 25  / 70%); }
.lp-dot-yellow { background: oklch(0.80 0.18 85  / 70%); }
.lp-dot-green  { background: oklch(0.65 0.20 145 / 70%); }
.lp-url-bar {
  margin-left: 0.75rem;
  height: 1.25rem;
  flex: 1;
  max-width: 16rem;
  border-radius: 0.375rem;
  background: oklch(0 0 0 / 5%);
}

.lp-dash-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .lp-dash-grid { gap: 1rem; } }

/* Sidebar */
.lp-sidebar {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  gap: 0.75rem;
}
@media (min-width: 640px) { .lp-sidebar { display: flex; } }
.lp-sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.5rem;
  background: oklch(0.52 0.22 280 / 5%);
  color: var(--lp-muted-fg);
}
.lp-sidebar-icon.active {
  background: var(--lp-grad-primary);
  color: #fff;
}
.lp-sidebar-icon svg { width: 1rem; height: 1rem; }

/* Main area */
.lp-dash-main { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .lp-dash-main { gap: 1rem; } }

/* Stats row */
.lp-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.lp-stat-card { border-radius: 0.75rem; padding: 0.75rem; }
.lp-stat-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-muted-fg); }
.lp-stat-value { margin-top: 0.25rem; font-size: 1.125rem; font-weight: 600; }
.lp-stat-trend { font-size: 0.625rem; color: oklch(0.65 0.18 145 / 80%); }

/* Schedule + AI */
.lp-mid-row { display: grid; grid-template-columns: 3fr 2fr; gap: 0.75rem; }
@media (min-width: 640px) { .lp-mid-row { gap: 1rem; } }
.lp-schedule-card { border-radius: 0.75rem; padding: 0.75rem; }
.lp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.lp-card-title  { font-size: 0.75rem; font-weight: 500; }
.lp-card-meta   { font-size: 0.625rem; color: var(--lp-muted-fg); }
.lp-week-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  font-size: 0.5625rem;
  color: var(--lp-muted-fg);
  text-align: center;
  margin-bottom: 0.25rem;
}
.lp-bar-rows { display: flex; flex-direction: column; gap: 0.375rem; }
.lp-bar-row  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.lp-bar {
  height: 1rem;
  border-radius: 0.25rem;
  background: linear-gradient(135deg,
    oklch(0.55 0.20 266) var(--h, 60%),
    oklch(0.25 0.05 270) var(--h, 60%)
  );
  opacity: 0.75;
}

/* AI mini card */
.lp-ai-mini {
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  border: 1px solid oklch(0.52 0.22 280 / 15%);
  box-shadow: var(--lp-shadow-card);
}
.lp-ai-mini-bg {
  position: absolute;
  inset: 0;
  background: var(--lp-grad-ai);
  opacity: 0.95;
}
.lp-ai-mini-content {
  position: relative;
  padding: 0.75rem;
}
.lp-ai-mini-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}
.lp-ai-mini-header svg { width: 0.75rem; height: 0.75rem; color: #fff; }
.lp-ai-mini-title { font-size: 0.75rem; font-weight: 500; color: #fff; }
.lp-chat-user {
  font-size: 0.625rem;
  border-radius: 0.5rem;
  background: oklch(1 0 0 / 20%);
  color: #fff;
  padding: 0.375rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0.375rem;
  backdrop-filter: blur(4px);
}
.lp-chat-ai {
  font-size: 0.625rem;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--lp-primary);
  font-weight: 500;
  padding: 0.375rem 0.5rem;
  width: fit-content;
  margin-left: auto;
  margin-bottom: 0.375rem;
}

/* Payroll chart */
.lp-payroll-card { border-radius: 0.75rem; padding: 0.75rem; }
.lp-payroll-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 4rem;
}
.lp-payroll-bar {
  flex: 1;
  border-radius: 0.25rem 0.25rem 0 0;
  background: var(--lp-grad-primary);
}

/* ============================================================
   SECTION COMMON
   ============================================================ */
.lp-section { position: relative; padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 640px) { .lp-section { padding-top: 7rem; padding-bottom: 7rem; } }

.lp-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(0.52 0.22 280 / 80%);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.lp-section-title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) { .lp-section-title { font-size: 2.25rem; } }
.lp-section-desc {
  margin-top: 1rem;
  color: var(--lp-muted-fg);
}
.lp-section-header {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 3.5rem;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.lp-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px)  { .lp-features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .lp-features-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-feature-card {
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.lp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-glow);
}
.lp-feature-icon {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 0.75rem;
  background: oklch(0.52 0.22 280 / 10%);
  border: 1px solid oklch(0.52 0.22 280 / 15%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border 0.3s;
}
.lp-feature-card:hover .lp-feature-icon {
  background: var(--lp-grad-primary);
  border-color: transparent;
}
.lp-feature-icon svg { width: 1.25rem; height: 1.25rem; color: var(--lp-primary); transition: color 0.3s; }
.lp-feature-card:hover .lp-feature-icon svg { color: #fff; }
.lp-feature-title { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; }
.lp-feature-desc  { margin-top: 0.5rem; font-size: 0.875rem; color: var(--lp-muted-fg); line-height: 1.6; }

/* AI Feature Banner (full-width card) */
.lp-ai-banner {
  border-radius: 1rem;
  padding: 1.5rem;
  overflow: hidden;
  position: relative;
  border: 1px solid oklch(0.55 0.24 295 / 30%);
  box-shadow: var(--lp-shadow-ai);
}
@media (min-width: 640px) { .lp-ai-banner { grid-column: 1 / -1; } }
.lp-ai-banner-bg {
  position: absolute;
  inset: 0;
  background: var(--lp-grad-ai);
  opacity: 0.90;
}
.lp-ai-banner-glow {
  position: absolute;
  top: -5rem;
  right: -5rem;
  height: 16rem;
  width: 16rem;
  border-radius: 50%;
  background: oklch(0.75 0.15 295 / 30%);
  filter: blur(3rem);
  pointer-events: none;
}
.lp-ai-banner-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .lp-ai-banner-inner {
    flex-direction: row;
    align-items: center;
  }
}
.lp-ai-badge-icon {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 1rem;
  background: oklch(1 0 0 / 15%);
  backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lp-ai-badge-icon svg { width: 1.75rem; height: 1.75rem; color: #fff; }
.lp-ai-banner-text { flex: 1; }
.lp-ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(1 0 0 / 80%);
  margin-bottom: 0.375rem;
}
.lp-ai-tag-dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 50%;
  background: #fff;
  animation: lp-pulse-glow 3s ease-in-out infinite;
}
.lp-ai-title { font-size: 1.5rem; font-weight: 700; color: #fff; }
.lp-ai-desc  { margin-top: 0.25rem; font-size: 0.875rem; color: oklch(1 0 0 / 85%); max-width: 42rem; }

/* ============================================================
   AI SECTION
   ============================================================ */
.lp-ai-section-card {
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  border: 1px solid oklch(0.55 0.24 295 / 20%);
  box-shadow: var(--lp-shadow-ai);
}
.lp-ai-section-bg {
  position: absolute;
  inset: 0;
  background: var(--lp-grad-ai);
  opacity: 0.95;
}
.lp-ai-section-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, oklch(1 0 0 / 20%), transparent 50%);
}
.lp-ai-section-inner {
  position: relative;
  display: grid;
  gap: 2.5rem;
  padding: 2rem;
}
@media (min-width: 640px) { .lp-ai-section-inner { padding: 3rem; } }
@media (min-width: 1024px) { .lp-ai-section-inner { grid-template-columns: 1fr 1fr; } }

.lp-ai-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: oklch(1 0 0 / 15%);
  backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 20%);
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: #fff;
  margin-bottom: 1.25rem;
}
.lp-ai-section-badge svg { width: 0.875rem; height: 0.875rem; }
.lp-ai-section-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .lp-ai-section-title { font-size: 2.25rem; } }
.lp-ai-section-desc {
  margin-top: 1.25rem;
  color: oklch(1 0 0 / 90%);
  line-height: 1.7;
}

.lp-ai-questions { display: flex; flex-direction: column; gap: 0.75rem; }
.lp-ai-question {
  background: linear-gradient(135deg, oklch(1 0 0 / 18%), oklch(1 0 0 / 12%));
  backdrop-filter: blur(8px);
  border: 1px solid oklch(1 0 0 / 20%);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: oklch(1 0 0 / 90%);
  transition: transform 0.2s;
}
.lp-ai-question:hover { transform: translateX(4px); }
.lp-ai-question-arrow { color: oklch(1 0 0 / 60%); margin-right: 0.5rem; }

/* ============================================================
   WORKFLOW SECTION
   ============================================================ */
.lp-workflow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
}
@media (min-width: 768px) { .lp-workflow-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-workflow-step { position: relative; }
.lp-workflow-card {
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.3s, box-shadow 0.3s;
}
.lp-workflow-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-glow);
}
.lp-workflow-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.lp-workflow-icon {
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 0.75rem;
  background: var(--lp-grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--lp-shadow-glow);
}
.lp-workflow-icon svg { width: 1.25rem; height: 1.25rem; color: #fff; }
.lp-step-num { font-size: 1.875rem; font-weight: 700; color: oklch(0.52 0.22 280 / 15%); }
.lp-workflow-title { font-size: 1.125rem; font-weight: 600; }
.lp-workflow-desc  { margin-top: 0.5rem; font-size: 0.875rem; color: var(--lp-muted-fg); }

.lp-workflow-arrow {
  display: none;
  position: absolute;
  top: 50%;
  right: -0.875rem;
  transform: translateY(-50%);
  z-index: 10;
  color: oklch(0.52 0.22 280 / 60%);
}
.lp-workflow-arrow svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) { .lp-workflow-arrow { display: block; } }

/* ============================================================
   WHY SECTION
   ============================================================ */
.lp-why-card {
  border-radius: 1.5rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) { .lp-why-card { padding: 3rem; } }
.lp-why-glow {
  position: absolute;
  top: -6rem;
  right: -6rem;
  height: 24rem;
  width: 24rem;
  border-radius: 50%;
  background: var(--lp-grad-ai);
  opacity: 0.20;
  filter: blur(3rem);
  pointer-events: none;
}
.lp-why-inner {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) { .lp-why-inner { grid-template-columns: 1fr 1fr; } }

.lp-why-cta { margin-top: 2rem; }
.lp-why-reasons { display: flex; flex-direction: column; gap: 0.75rem; }
.lp-reason {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.lp-reason svg { width: 1.25rem; height: 1.25rem; color: var(--lp-primary); margin-top: 0.125rem; flex-shrink: 0; }
.lp-reason span { font-size: 0.875rem; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.lp-cta-wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.lp-cta-card {
  border-radius: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) { .lp-cta-card { padding: 4rem; } }
.lp-cta-bg {
  position: absolute;
  inset: 0;
  background: var(--lp-grad-ai);
  opacity: 0.15;
  pointer-events: none;
}
.lp-cta-glow {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  height: 18rem;
  width: 40rem;
  border-radius: 50%;
  background: var(--lp-grad-ai);
  opacity: 0.30;
  filter: blur(3rem);
  pointer-events: none;
}
.lp-cta-content { position: relative; }
.lp-cta-title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) { .lp-cta-title { font-size: 3rem; } }
.lp-cta-desc {
  margin-top: 1.25rem;
  color: var(--lp-muted-fg);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.lp-cta-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.lp-footer {
  border-top: 1px solid var(--lp-border);
  padding: 2.5rem 0;
  margin-top: 2.5rem;
}
.lp-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .lp-footer-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}
.lp-footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.lp-footer-logo  { height: 1.75rem; width: 1.75rem; object-fit: contain; border-radius: 0.25rem; }
.lp-footer-name  { font-size: 0.875rem; font-weight: 600; }
.lp-footer-sub   { font-size: 0.75rem; color: var(--lp-muted-fg); }
.lp-footer-nav   { display: flex; align-items: center; gap: 1.5rem; }
.lp-footer-nav a {
  font-size: 0.875rem;
  color: var(--lp-muted-fg);
  transition: color 0.2s;
}
.lp-footer-nav a:hover { color: var(--lp-foreground); }

/* ============================================================
   PRICING SECTION
   ============================================================ */
.lp-pricing-section { position: relative; overflow: hidden; isolation: isolate; }
.lp-pricing-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 55% at 50% 10%, oklch(0.55 0.22 285 / 28%), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 30%, oklch(0.55 0.22 265 / 22%), transparent 65%),
    radial-gradient(ellipse 55% 45% at 12% 40%, oklch(0.60 0.20 300 / 18%), transparent 65%),
    linear-gradient(180deg, oklch(0.96 0.03 285), oklch(0.97 0.02 275));
  pointer-events: none;
}
.lp-pricing-outer { position: relative; max-width: 64rem; margin: 0 auto; }
.lp-pricing-glow {
  position: absolute;
  inset: -1px;
  border-radius: 1.5rem;
  background: var(--lp-grad-ai);
  opacity: 0.30;
  filter: blur(2rem);
  pointer-events: none;
}
.lp-pricing-card {
  position: relative;
  border-radius: 1.5rem;
  padding: 2rem;
  overflow: hidden;
}
@media (min-width: 640px) { .lp-pricing-card { padding: 3rem; } }
.lp-pricing-card-glow {
  position: absolute;
  top: -8rem;
  right: -8rem;
  height: 20rem;
  width: 20rem;
  border-radius: 50%;
  background: var(--lp-grad-ai);
  opacity: 0.25;
  filter: blur(3rem);
  pointer-events: none;
}
.lp-pricing-top {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) { .lp-pricing-top { grid-template-columns: 1.1fr 1fr; } }

.lp-pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--lp-grad-ai);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  box-shadow: var(--lp-shadow-glow);
  margin-bottom: 1rem;
}
.lp-pricing-plan-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 640px) { .lp-pricing-plan-title { font-size: 1.875rem; } }
.lp-pricing-plan-desc { margin-top: 0.75rem; color: var(--lp-muted-fg); line-height: 1.7; }
.lp-pricing-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.5rem; }
.lp-pricing-price { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 640px) { .lp-pricing-price { font-size: 4rem; } }
.lp-pricing-period { color: var(--lp-muted-fg); }
.lp-pricing-min { margin-top: 0.5rem; font-size: 0.75rem; color: var(--lp-muted-fg); }
.lp-pricing-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.lp-pricing-modules {
  border-radius: 1rem;
  border: 1px solid oklch(0.52 0.22 280 / 15%);
  background: oklch(0.52 0.22 280 / 3%);
  padding: 1.5rem;
}
.lp-pricing-modules-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: oklch(0.52 0.22 280 / 80%);
  font-weight: 600;
  margin-bottom: 1rem;
}
.lp-pricing-modules-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.25rem;
}
.lp-pricing-modules-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.lp-pricing-modules-list svg { width: 1rem; height: 1rem; color: var(--lp-primary); flex-shrink: 0; margin-top: 0.125rem; }

.lp-pricing-bottom {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .lp-pricing-bottom { grid-template-columns: 1fr 1fr; } }

.lp-compliance-card {
  border-radius: 1rem;
  border: 1px solid oklch(0.52 0.22 280 / 15%);
  background: oklch(0.52 0.22 280 / 3%);
  padding: 1.5rem;
}
.lp-compliance-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.lp-compliance-icon {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.5rem;
  background: oklch(0.52 0.22 280 / 10%);
  border: 1px solid oklch(0.52 0.22 280 / 15%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--lp-primary);
}
.lp-compliance-title { font-size: 0.9375rem; font-weight: 600; }
.lp-compliance-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.25rem;
}
.lp-compliance-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.lp-compliance-list svg { width: 1rem; height: 1rem; color: var(--lp-primary); flex-shrink: 0; }
.lp-compliance-note { margin-top: 1rem; font-size: 0.75rem; color: var(--lp-muted-fg); }

.lp-ava-card {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  border: 1px solid oklch(0.55 0.24 295 / 30%);
  box-shadow: var(--lp-shadow-ai);
}
.lp-ava-bg { position: absolute; inset: 0; background: var(--lp-grad-ai); opacity: 0.95; }
.lp-ava-glow {
  position: absolute;
  top: -4rem;
  right: -4rem;
  height: 14rem;
  width: 14rem;
  border-radius: 50%;
  background: oklch(0.80 0.15 295 / 30%);
  filter: blur(3rem);
  pointer-events: none;
}
.lp-ava-content { position: relative; padding: 1.5rem; color: #fff; }
.lp-ava-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: oklch(1 0 0 / 15%);
  backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 20%);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.75rem;
}
.lp-ava-title { font-size: 1.125rem; font-weight: 700; }
.lp-ava-desc { margin-top: 0.5rem; font-size: 0.875rem; color: oklch(1 0 0 / 90%); line-height: 1.6; }
.lp-ava-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.lp-ava-tags span {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: oklch(1 0 0 / 15%);
  backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 20%);
}
.lp-pricing-compare {
  margin-top: 2.5rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--lp-muted-fg);
}
.lp-pricing-footnotes { list-style: none; margin-top: 2rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.lp-pricing-footnotes li { display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--lp-muted-fg); margin-bottom: 0.375rem; }
.lp-pricing-bullet { color: oklch(0.52 0.22 280 / 60%); flex-shrink: 0; }

/* ============================================================
   AUTH PAGES (Login + Contact share base styles)
   ============================================================ */
.lp-auth-body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  color: oklch(0.18 0.04 270);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.lp-auth-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, oklch(0.85 0.12 280 / 35%), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 80%, oklch(0.88 0.10 295 / 30%), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, oklch(0.90 0.08 265 / 25%), transparent 70%),
    linear-gradient(180deg, #fff 0%, #faf8ff 100%);
  pointer-events: none;
  z-index: 0;
}
.lp-auth-grid {
  position: fixed;
  inset: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(to right, oklch(0.45 0.18 280) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.45 0.18 280) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.lp-auth-wrap {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
}
@media (min-width: 640px) { .lp-auth-wrap { padding: 1.5rem; } }
@media (min-width: 1024px) { .lp-auth-wrap { padding: 1.5rem 2rem; } }

.lp-auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.lp-auth-back {
  font-size: 0.875rem;
  color: oklch(0.48 0.03 265);
  transition: color 0.2s;
}
.lp-auth-back:hover { color: oklch(0.18 0.04 270); }

.lp-auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2.5rem 0 4rem;
}
@media (min-width: 1024px) { .lp-auth-main { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Left panel */
.lp-auth-left { display: none; }
@media (min-width: 1024px) { .lp-auth-left { display: block; } }

.lp-auth-left-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid oklch(0.90 0.01 270);
  background: oklch(0.98 0.005 270);
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: oklch(0.35 0.04 270);
  margin-bottom: 1.5rem;
}
.lp-auth-left-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
@media (min-width: 1280px) { .lp-auth-left-title { font-size: 3rem; } }
.lp-auth-gradient-text {
  background: linear-gradient(135deg, oklch(0.45 0.22 265), oklch(0.42 0.24 295) 50%, oklch(0.48 0.22 280));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-auth-left-desc { margin-top: 1.25rem; color: oklch(0.48 0.03 265); line-height: 1.7; max-width: 32rem; }
.lp-auth-benefits { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 28rem; }
.lp-auth-benefits li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid oklch(0.90 0.01 270);
  background: oklch(0.98 0.005 270);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: oklch(0.35 0.04 270);
}
.lp-auth-benefit-icon {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, oklch(0.92 0.05 265), oklch(0.90 0.05 295));
  border: 1px solid oklch(0.88 0.03 270);
  flex-shrink: 0;
}
.lp-auth-benefit-icon svg { width: 1rem; height: 1rem; color: oklch(0.45 0.22 265); }

/* Mini dashboard preview */
.lp-auth-preview-wrap { position: relative; margin-top: 2.5rem; max-width: 28rem; }
.lp-auth-preview-glow {
  position: absolute;
  inset: -1rem;
  border-radius: 2rem;
  background: linear-gradient(135deg, oklch(0.50 0.22 265 / 30%), oklch(0.52 0.24 295 / 30%));
  filter: blur(2rem);
  pointer-events: none;
}
.lp-auth-preview {
  position: relative;
  border-radius: 1rem;
  border: 1px solid oklch(0.88 0.02 270);
  padding: 1rem;
  box-shadow: 0 20px 60px -20px oklch(0.30 0.10 270 / 35%);
}
.lp-auth-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: oklch(0.48 0.03 265);
  margin-bottom: 0.75rem;
}
.lp-auth-preview-dots { display: flex; gap: 0.25rem; }
.lp-auth-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.lp-auth-preview-tile {
  border-radius: 0.5rem;
  border: 1px solid oklch(0.90 0.01 270);
  padding: 0.75rem 0.5rem;
  font-size: 0.6875rem;
  text-align: center;
  color: oklch(0.35 0.04 270);
}
.lp-tile-blue  { background: oklch(0.96 0.03 265); }
.lp-tile-purple { background: oklch(0.96 0.03 295); }
.lp-auth-preview-ai {
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid oklch(0.80 0.08 295);
  background: linear-gradient(135deg, oklch(0.95 0.04 265), oklch(0.95 0.04 295));
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  color: oklch(0.35 0.04 270);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Right panel: form card */
.lp-auth-right {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}
@media (min-width: 1024px) { .lp-auth-right { margin: 0 0 0 auto; } }

.lp-auth-card-wrap { position: relative; }
.lp-auth-card-glow {
  position: absolute;
  inset: -4px;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, oklch(0.55 0.22 265 / 40%), oklch(0.45 0.24 295 / 30%), oklch(0.55 0.22 295 / 40%));
  opacity: 0.60;
  filter: blur(1rem);
  pointer-events: none;
}
.lp-auth-card {
  position: relative;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 20px 80px -20px oklch(0.40 0.18 280 / 50%);
}
@media (min-width: 640px) { .lp-auth-card { padding: 2rem; } }
.lp-auth-card-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
.lp-auth-card-sub { margin-top: 0.375rem; font-size: 0.875rem; color: oklch(0.48 0.03 265); }

/* Form elements */
.lp-auth-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.lp-auth-field { display: flex; flex-direction: column; gap: 0.375rem; }
.lp-auth-label { font-size: 0.75rem; font-weight: 500; color: oklch(0.42 0.03 265); }
.lp-auth-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.88 0.02 270);
  background: oklch(0.98 0.005 270);
  padding: 0 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-auth-input-wrap:focus-within {
  border-color: oklch(0.50 0.22 280 / 60%);
  box-shadow: 0 0 0 3px oklch(0.52 0.22 280 / 18%);
  background: oklch(0.98 0.005 270);
}
.lp-auth-input-icon { width: 1rem; height: 1rem; color: oklch(0.60 0.03 265); flex-shrink: 0; transition: color 0.2s; }
.lp-auth-input-wrap:focus-within .lp-auth-input-icon { color: oklch(0.50 0.24 295); }
.lp-auth-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: oklch(0.18 0.04 270);
  font-family: inherit;
  height: 100%;
}
.lp-auth-input::placeholder { color: oklch(0.65 0.02 270); }

/* Standalone input (no icon wrap) */
input.lp-auth-input, select.lp-auth-input, textarea.lp-auth-input,
.lp-auth-field > input.lp-auth-input,
.lp-auth-field > select.lp-auth-input,
.lp-auth-field > textarea.lp-auth-input {
  width: 100% !important;
  height: 2.75rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid oklch(0.88 0.02 270) !important;
  background-color: oklch(0.98 0.005 270) !important;
  padding: 0 0.875rem !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  color: oklch(0.18 0.04 270) !important;
  line-height: normal !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Direct children of lp-auth-field: disable flex growth so height is respected */
.lp-auth-field > input.lp-auth-input,
.lp-auth-field > select.lp-auth-input {
  flex: none !important;
  min-height: 2.75rem !important;
}
input.lp-auth-input:focus, select.lp-auth-input:focus, textarea.lp-auth-input:focus,
.lp-auth-field > input.lp-auth-input:focus,
.lp-auth-field > select.lp-auth-input:focus,
.lp-auth-field > textarea.lp-auth-input:focus {
  border-color: oklch(0.50 0.22 280 / 60%) !important;
  box-shadow: 0 0 0 3px oklch(0.52 0.22 280 / 18%) !important;
  outline: none !important;
}
select.lp-auth-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem !important;
}
textarea.lp-auth-textarea,
.lp-auth-field > textarea.lp-auth-textarea {
  height: auto !important;
  min-height: 8rem !important;
  padding: 0.75rem 0.875rem !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

.lp-pwd-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: oklch(0.60 0.03 265);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.2s;
}
.lp-pwd-toggle:hover { color: oklch(0.18 0.04 270); }
.lp-pwd-toggle svg { width: 1rem; height: 1rem; }

.lp-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}
.lp-auth-remember { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: oklch(0.48 0.03 265); }
.lp-auth-remember input { accent-color: oklch(0.50 0.24 295); }
.lp-auth-forgot { color: oklch(0.45 0.22 265); font-size: 0.875rem; transition: color 0.2s; }
.lp-auth-forgot:hover { color: oklch(0.18 0.04 270); }

.lp-auth-submit {
  width: 100%;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, oklch(0.55 0.22 265), oklch(0.50 0.24 280), oklch(0.52 0.24 295));
  box-shadow: 0 10px 30px -10px oklch(0.50 0.22 280 / 70%);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 15px 40px -10px oklch(0.52 0.24 295 / 80%);
}
.lp-auth-submit:disabled { opacity: 0.70; cursor: not-allowed; }

.lp-auth-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: oklch(0.60 0.02 265);
  margin-top: -0.25rem;
}
.lp-auth-secure svg { flex-shrink: 0; }

.lp-auth-error {
  background: oklch(0.96 0.04 25);
  border: 1px solid oklch(0.80 0.12 25);
  color: oklch(0.50 0.18 25);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.lp-auth-switch {
  text-align: center;
  font-size: 0.875rem;
  color: oklch(0.48 0.03 265);
  margin-top: 1rem;
}
.lp-auth-switch a {
  font-weight: 500;
  background: linear-gradient(135deg, oklch(0.45 0.22 265), oklch(0.50 0.24 295));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.2s;
}
.lp-auth-switch a:hover { opacity: 0.80; }

.lp-auth-footer {
  border-top: 1px solid oklch(0.90 0.01 270);
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: oklch(0.60 0.02 265);
}
@media (min-width: 640px) {
  .lp-auth-footer { flex-direction: row; justify-content: space-between; }
}
.lp-auth-footer-nav { display: flex; gap: 1.25rem; }
.lp-auth-footer-nav a { color: oklch(0.60 0.02 265); transition: color 0.2s; }
.lp-auth-footer-nav a:hover { color: oklch(0.18 0.04 270); }

/* auth_oauth "- or -" em → styled as our clean divider */
.lp-auth-form em.d-block {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  font-style: normal;
  font-size: 0.75rem;
  color: oklch(0.60 0.02 265);
  margin: 0.5rem 0 !important;
}
.lp-auth-form em.d-block::before,
.lp-auth-form em.d-block::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.88 0.02 270);
}

/* OAuth provider buttons (Google, etc.) */
.o_auth_oauth_providers { margin: 0 !important; padding: 0; }
.o_auth_oauth_providers .list-group-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 2.75rem;
  width: 100%;
  border-radius: 0.75rem !important;
  border: 1px solid oklch(0.88 0.02 270) !important;
  background: oklch(0.98 0.005 270) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.25 0.04 270) !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 0.5rem;
}
.o_auth_oauth_providers .list-group-item:hover {
  background: oklch(0.95 0.01 270) !important;
  border-color: oklch(0.82 0.02 270) !important;
  color: oklch(0.18 0.04 270) !important;
}
.o_auth_oauth_providers .fa {
  font-size: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.o_auth_oauth_providers .fa-google {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}

/* Pricing offer badge */
.lp-pricing-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  background: linear-gradient(to right, oklch(0.546 0.245 263), oklch(0.558 0.288 302));
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px oklch(0 0 0 / 10%), 0 2px 4px -2px oklch(0 0 0 / 10%);
}

/* --- Pricing: 4-tier layout --- */
.lp-pricing-promo-wrap { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.lp-pricing-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px)  { .lp-pricing-tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-pricing-tiers { grid-template-columns: repeat(4, 1fr); } }
.lp-pricing-tier {
  position: relative;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-pricing-tier:hover { transform: translateY(-0.25rem); }
.lp-pricing-tier-normal {
  background: linear-gradient(135deg, oklch(1 0 0 / 80%), oklch(0.99 0.01 270 / 65%));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(0.52 0.22 280 / 12%);
}
.lp-pricing-tier-normal:hover { box-shadow: var(--lp-shadow-card); }
.lp-pricing-tier-highlighted {
  background: linear-gradient(to bottom, oklch(1 0 0), oklch(0.97 0.02 240 / 60%));
  border: 2px solid oklch(0.52 0.22 280 / 40%);
  box-shadow: 0 0 40px -12px oklch(0.52 0.22 280 / 35%);
}
.lp-pricing-tier-best-badge {
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
.lp-pricing-tier-best-badge span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  background: var(--lp-grad-ai);
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--lp-shadow-glow);
}
.lp-pricing-tier-best-badge svg { width: 0.75rem; height: 0.75rem; }
.lp-pricing-tier-headcount {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--lp-muted-fg);
  font-size: 0.875rem;
}
.lp-pricing-tier-headcount svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.lp-pricing-tier-title { font-size: 1.125rem; font-weight: 700; }
.lp-pricing-tier-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.lp-pricing-tier-price { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
.lp-pricing-tier-unit { font-size: 0.8125rem; color: var(--lp-muted-fg); }
.lp-pricing-tier-tag {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--lp-muted-fg);
  background: oklch(0.94 0.01 270);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.lp-pricing-custom-quote {
  max-width: 48rem;
  margin: 2rem auto 0;
}
.lp-pricing-custom-quote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 1rem;
  border: 1px solid oklch(0.52 0.22 280 / 20%);
  background: oklch(0.52 0.22 280 / 5%);
  backdrop-filter: blur(8px);
  padding: 1.25rem 1.5rem;
}
@media (min-width: 640px) {
  .lp-pricing-custom-quote-inner { flex-direction: row; justify-content: space-between; }
}
.lp-pricing-custom-quote-left { display: flex; align-items: center; gap: 0.75rem; }
.lp-pricing-custom-quote-icon {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border-radius: 9999px;
  background: oklch(0.52 0.22 280 / 10%);
  border: 1px solid oklch(0.52 0.22 280 / 20%);
  display: flex; align-items: center; justify-content: center;
  color: var(--lp-primary);
}
.lp-pricing-custom-quote-text { font-size: 0.875rem; font-weight: 500; color: var(--lp-foreground); }
.lp-pricing-custom-quote-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--lp-grad-ai);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem; font-weight: 600; color: #fff;
  box-shadow: var(--lp-shadow-glow);
  transition: opacity 0.2s;
  text-decoration: none;
}
.lp-pricing-custom-quote-btn:hover { opacity: 0.88; }

.lp-pricing-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}
.lp-pricing-all-plans { max-width: 56rem; margin: 0 auto; }
.lp-pricing-all-plans-inner { border-radius: 1.25rem; padding: 2rem 2.5rem; }
.lp-pricing-all-plans-title {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.lp-pricing-all-plans-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.5rem;
}
@media (min-width: 640px)  { .lp-pricing-all-plans-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-pricing-all-plans-grid { grid-template-columns: 1fr 1fr 1fr; } }
.lp-pricing-all-plans-grid li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; }
.lp-pricing-all-plans-grid svg { width: 1rem; height: 1rem; color: var(--lp-primary); flex-shrink: 0; margin-top: 0.125rem; }
.lp-pricing-bottom-standalone { max-width: 56rem; margin-left: auto; margin-right: auto; }

/* ============================================================
   LEGAL PAGES (Privacy Policy / Terms of Use)
   ============================================================ */
.lp-legal-hero {
  padding: 7rem 0 3rem;
  text-align: center;
  background: linear-gradient(180deg, oklch(0.97 0.02 285), oklch(0.99 0.005 270));
}
.lp-legal-hero-inner { max-width: 40rem; margin: 0 auto; }
.lp-legal-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 1rem 0 0.75rem;
  color: var(--lp-foreground);
}
.lp-legal-subtitle { font-size: 1.0625rem; color: var(--lp-muted-fg); }
.lp-legal-body { padding: 3rem 0 6rem; }
.lp-legal-content {
  max-width: 52rem;
  margin: 0 auto;
  border-radius: 1.25rem;
  padding: 3rem 3.5rem;
}
.lp-legal-placeholder-note {
  text-align: center;
  color: var(--lp-muted-fg);
  font-size: 1rem;
  padding: 2rem 0;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.lp-contact-page { position: relative; z-index: 1; }
.lp-contact-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(20px);
  background: oklch(1 0 0 / 70%);
  border-bottom: 1px solid oklch(0.90 0.01 270);
}
.lp-contact-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.lp-contact-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.lp-contact-nav-links a:not(.lp-btn-hero) {
  display: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: oklch(0.48 0.03 265);
  transition: color 0.2s;
}
.lp-contact-nav-links a:not(.lp-btn-hero):hover { color: oklch(0.18 0.04 270); }
@media (min-width: 640px) { .lp-contact-nav-links a:not(.lp-btn-hero) { display: inline-block; } }

.lp-contact-hero {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) { .lp-contact-hero { padding-top: 6rem; } }
.lp-contact-hero-title {
  margin-top: 1.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
@media (min-width: 640px)  { .lp-contact-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .lp-contact-hero-title { font-size: 3.75rem; } }
.lp-contact-hero-desc {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: oklch(0.48 0.03 265);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
@media (min-width: 640px) { .lp-contact-hero-desc { font-size: 1.125rem; } }

.lp-contact-body { padding-bottom: 5rem; }
.lp-contact-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .lp-contact-grid { grid-template-columns: 2fr 3fr; gap: 2rem; } }

.lp-contact-left { display: flex; flex-direction: column; gap: 1.5rem; }
.lp-contact-info-card { border-radius: 1rem; padding: 1.5rem; }
.lp-contact-card-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.25rem; }
.lp-contact-info-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.lp-contact-info-list li { display: flex; align-items: center; gap: 0.75rem; }
.lp-contact-info-icon {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, oklch(0.92 0.05 265), oklch(0.90 0.05 295));
  border: 1px solid oklch(0.88 0.03 270);
  flex-shrink: 0;
  color: oklch(0.45 0.22 265);
}
.lp-contact-info-icon svg { width: 1rem; height: 1rem; }
.lp-contact-info-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: oklch(0.60 0.02 265); }
.lp-contact-info-value { font-size: 0.875rem; color: oklch(0.25 0.04 270); }
a.lp-contact-info-value { transition: color 0.2s; }
a.lp-contact-info-value:hover { color: oklch(0.45 0.22 265); }

.lp-contact-existing-note {
  margin-top: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(0.82 0.06 295);
  background: linear-gradient(135deg, oklch(0.96 0.03 265), oklch(0.96 0.03 295));
  padding: 0.875rem 1rem;
  font-size: 0.75rem;
  color: oklch(0.40 0.04 270);
  line-height: 1.6;
}
.lp-contact-existing-label { color: oklch(0.50 0.24 295); font-weight: 500; }

.lp-contact-help-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.lp-contact-help-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: oklch(0.35 0.04 270); }
.lp-contact-help-list svg { width: 1rem; height: 1rem; color: oklch(0.45 0.22 265); flex-shrink: 0; margin-top: 0.125rem; }

.lp-contact-right { width: 100%; }
.lp-contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .lp-contact-form-grid { grid-template-columns: 1fr 1fr; } }

.lp-contact-success {
  text-align: center;
  padding: 3rem 1rem;
}
.lp-contact-success-icon {
  display: grid;
  place-items: center;
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.92 0.05 265), oklch(0.90 0.05 295));
  border: 1px solid oklch(0.88 0.03 270);
  margin: 0 auto 1.25rem;
  color: oklch(0.65 0.18 145);
}
.lp-contact-success-icon svg { width: 1.75rem; height: 1.75rem; }
.lp-contact-success h3 { font-size: 1.25rem; font-weight: 600; }
.lp-contact-success p { margin-top: 0.5rem; font-size: 0.875rem; color: oklch(0.48 0.03 265); max-width: 24rem; margin-left: auto; margin-right: auto; }

/* FAQ */
.lp-contact-faq { margin-top: 5rem; }
.lp-faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.lp-faq-item { border-radius: 0.75rem; overflow: hidden; }
.lp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  color: oklch(0.18 0.04 270);
  font-family: inherit;
}
.lp-faq-chevron { width: 1rem; height: 1rem; color: oklch(0.60 0.02 265); flex-shrink: 0; transition: transform 0.2s; }
.lp-faq-a {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.875rem;
  color: oklch(0.48 0.03 265);
  line-height: 1.7;
}