/* BarFlow Design System v2 — Landing Page stylesheet
 * Sprint 8.1 — Phase 8 (Landing Page refactor)
 * Reference: design_system/HANDOFF.md
 * Spec: docs/PRD.md (Phase 8 / Sprint 8.1)
 *
 * Scope
 * -----
 * This stylesheet is exclusive to the public landing page rendered by
 * `dashboard.views.DashboardHomeView` at `/` (anonymous visitors only).
 * It MUST NOT be loaded by any authenticated shell template — isolation is
 * enforced by wiring the `<link>` inside `{% block extra_head %}` of
 * `templates/dashboard/home.html` only.
 *
 * Namespace
 * ---------
 * The ONLY valid prefix for classes defined here is `lp-*`. Variations such
 * as `landing-*` or `home-*` are FORBIDDEN — they break the grep-ability of
 * landing-only styles and risk colliding with authenticated UI. New classes
 * MUST start with `lp-` (e.g. `.lp-card-pad`, `.lp-cta-pad`, `.lp-hero-bg`).
 *
 * Consumers (templates/landing/)
 * ------------------------------
 * Partials that may import this stylesheet live in `templates/landing/`.
 * As of Sprint 8.1 that directory is empty — upcoming sprints (8.2–8.10)
 * will populate it with `_hero.html`, `_features.html`, `_pricing.html`,
 * `_contact.html`, `_footer.html` and similar. The directory is reserved.
 *
 * Token policy
 * ------------
 * All sizing/spacing values MUST resolve through tokens defined in
 * `static/css/tokens.css`. Hard-coded px/rgba values are treated as drift
 * and will be flagged in code review per HANDOFF section 10.
 */


/* =========================================================================
 * 1. UTILITIES — padding helpers that replace inline `style="padding:..."`
 *    declarations historically scattered through templates/dashboard/home.html.
 * ========================================================================= */
.lp-card-pad {
  padding: var(--space-7);
}

.lp-cta-pad {
  padding: var(--space-9) var(--space-8);
}


/* =========================================================================
 * 2. FEATURE CARDS — hover treatment (Sprint 8.2 / B1 + B4)
 *    Replaces inline `style="padding:var(--space-7);transition:background
 *    200ms ease"` that lacked a matching :hover rule. The transition now
 *    references --bf-motion-duration with a 0.2s fallback so reduced-motion
 *    consumers can override it globally in the future.
 * ========================================================================= */
.lp-card-hover {
  transition: background var(--bf-motion-duration, 0.2s) ease;
}

.lp-card-hover:hover {
  background: var(--bg-elev-3);
}


/* =========================================================================
 * 3. FINAL CTA — solid surface + accent glow (Sprint 8.2 / B2 + B3 + D6)
 *    Replaces the prior inline gradient on a card surface (HANDOFF §10
 *    anti-pattern) and removes the deprecated `--bf-primary-rgb` fallback.
 *    The background uses `--bg-elev-2` (the canonical card surface) and the
 *    border/shadow consume the accent tokens directly.
 * ========================================================================= */
.lp-cta-final {
  background: var(--bg-elev-2);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-glow);
}


/* =========================================================================
 * 4. SCROLL CUE — motion-aware bounce animation (Sprint 8.2 / B5)
 *    Replaces Tailwind's `animate-bounce` which conflicts with the
 *    `translateX(-50%)` centering trick. The keyframes preserve the
 *    horizontal offset while bouncing 8px vertically. Honored by
 *    `prefers-reduced-motion: reduce` which disables the animation
 *    entirely.
 * ========================================================================= */
.lp-scroll-cue {
  animation: lp-bounce 1.6s ease-in-out infinite;
}

@keyframes lp-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}


/* =========================================================================
 * 5. HERO — self-hosted background image + gradient overlay (Sprint 8.2 / B6)
 *    The `<picture class="lp-hero-bg">` sits at z-index 0; the gradient
 *    overlay lives on `.lp-hero-overlay::before` at z-index 1 so the hero
 *    content (z-10) stays on top. Decoupling image from overlay allows
 *    future hero swaps without touching the gradient.
 * ========================================================================= */
.lp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.lp-hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.45) 0%,
    rgba(10, 10, 10, 0.88) 100%
  );
  z-index: 1;
  pointer-events: none;
}


/* =========================================================================
 * 6. PRICING — featured card lift without clipping (Sprint 8.2 / B8 + D5)
 *    Replaces the hard-coded `rgba(251, 146, 60, 0.3)` border with the
 *    accent-line token. The featured card lifts 16px in md+ viewports and
 *    falls flat on mobile. `.lp-pricing-grid` reserves matching top padding
 *    so the lift never clips the "Mais popular" badge.
 * ========================================================================= */
.lp-pricing-card {
  display: flex;
  flex-direction: column;
  /* P1 #7 — Heights are equalised by the Tailwind grid's default
     align-items: stretch. With `<ul class="flex-1">` pushing the CTA
     to the bottom of each card, the 3 CTAs land on the same horizontal line. */
  /* Override `.card { overflow: hidden }` so the .lp-popular-badge — which
     sits at top:0 with translate(-50%, -50%) — is not clipped by the parent. */
  overflow: visible;
  transition: background var(--bf-motion-duration, 0.2s) ease,
              border-color var(--bf-motion-duration, 0.2s) ease;
}

.lp-pricing-card:hover {
  background: var(--bg-elev-3);
}

.lp-pricing-card--featured {
  border-color: var(--accent-line);
  /* P3 #10 — Stronger differentiation: combine a static 2px accent ring
     (via inset box-shadow) with the existing glow halo. The ring is a
     non-colour signal (sits inside the card edge), the glow is the
     ambient halo. Together they outpunch the popular-badge alone and
     read as "this is the recommended plan" at a glance. The card's
     overflow: visible (P0 #1) keeps the badge unclipped. */
  box-shadow:
    inset 0 0 0 2px var(--accent-line),
    var(--shadow-glow);
}

/* Featured card stays accent-bordered on hover (no neutral hover wash). */
.lp-pricing-card--featured:hover {
  background: var(--bg-elev-2);
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 2px var(--accent),
    var(--shadow-glow);
}

/* P0 #2 — Featured card no longer lifts via translateY: that broke the
   horizontal alignment of the 3 CTAs (Pro CTA sat 16px above Starter /
   Enterprise). Differentiation comes purely from border-color, shadow-glow,
   the inset ring (P3 #10) and the popular badge — vertical alignment is
   now consistent across all 3 cards in every viewport, satisfying the
   acceptance criterion "três CTAs alinhados na mesma linha horizontal
   em ≥768px". */

/* CTA-row utility for the 3 pricing cards (replaces inline
   style="width:100%;justify-content:center"). */
.lp-pricing-cta {
  width: 100%;
  justify-content: center;
}

/* P3 #11 — Check-icon container for plan feature list.
   Equivalent of Tailwind's `flex items-center justify-center w-5 h-5
   rounded-full bg-orange-500/15 shrink-0` from the prompt — but using
   the design system tokens so it follows the accent preset and the
   light/dark theme automatically. The icon inside sits at 12px so the
   20px ring reads as a soft pill rather than a halo around a 16px icon. */
.lp-pricing-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}


/* =========================================================================
 * 7. ACCENT + SURFACE UTILITIES (Sprint 8.3 / D1 + D7)
 *    Replaces every hard-coded Tailwind `text-amber-*`, `bg-amber-*`,
 *    `border-amber-*`, `bg-neutral-900` and `bg-neutral-950` previously
 *    scattered across the LP template. All consumers now flow through the
 *    OKLCH-parameterised --accent* and theme-aware --bg* tokens, which
 *    unblocks the 5 accent presets and the light theme on the landing page.
 * ========================================================================= */
.text-accent        { color: var(--accent); }
.bg-accent-soft     { background: var(--accent-soft); }
.bg-accent-line     { background: var(--accent-line); }
.border-accent-line { border-color: var(--accent-line); }

.lp-bg-base    { background: var(--bg); }
.lp-bg-elev-1  { background: var(--bg-elev-1); }
.lp-bg-elev-2  { background: var(--bg-elev-2); }


/* =========================================================================
 * 8. HERO DECORATIVE BLOBS (Sprint 8.3 / D1, refined in Sprint 8.5)
 *    Sprint 8.3 replaced the `bg-amber-500/8` and `bg-amber-400/6` blobs
 *    with accent-token-driven backgrounds. Sprint 8.5 moves every visual
 *    property (position, size, blur, pointer-events) from Tailwind utility
 *    classes on the markup into static CSS rules, so the browser stops
 *    recomposing JIT classes for a decorative element on every paint and
 *    we can hint the compositor with `will-change: transform`.
 *    Opacity values come from the PRD spec (0.5 / 0.35).
 * ========================================================================= */
.lp-hero-blob-1,
.lp-hero-blob-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  pointer-events: none;
  will-change: transform;
  background: var(--accent-soft);
}

.lp-hero-blob-1 {
  top: 25%;
  left: 16.66%;
  width: 384px;
  height: 384px;
  opacity: 0.5;
}

.lp-hero-blob-2 {
  bottom: 25%;
  right: 16.66%;
  width: 320px;
  height: 320px;
  opacity: 0.35;
}


/* =========================================================================
 * 9. FEATURE ICON WRAPPER (Sprint 8.3 / D1)
 *    Reusable circular icon container for the 6 feature cards and the 3
 *    whitelabel sidebar items. Hover treatment fires only when the wrapper
 *    sits inside a Tailwind `group` ancestor (e.g. `.card.group`).
 * ========================================================================= */
.lp-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--bf-motion-duration, 0.2s) ease;
}

.group:hover .lp-feature-icon {
  background: oklch(var(--accent-l) var(--accent-s) var(--accent-h) / 0.24);
}


/* =========================================================================
 * 10. POPULAR BADGE (Sprint 8.3 / D1)
 *     Replaces the Tailwind `bg-amber-500 text-neutral-900` badge that sat
 *     on top of the Pro pricing card. The new primitive consumes the
 *     accent tokens and the foreground colour automatically follows the
 *     selected preset.
 * ========================================================================= */
.lp-popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}


/* =========================================================================
 * 12. MUTED COPY UTILITY (Sprint 8.4 / A5)
 *     Replaces `text-neutral-400` on role / whitelabel / pricing cards. The
 *     `--text-muted` token resolves to #a39e94 in dark mode and #5b554d in
 *     light mode, both above the 4.5:1 WCAG AA threshold against their
 *     respective backgrounds.
 * ========================================================================= */
.text-muted {
  color: var(--text-muted);
}


/* =========================================================================
 * 13. ACCESSIBILITY — global prefers-reduced-motion override (Sprint 8.4 / A2)
 *     Supersedes the scoped Sprint 8.2 block. Applies to every element on
 *     the landing page so animations, transitions and smooth scrolling are
 *     neutralised for users who request reduced motion. Durations are
 *     clamped to 0.001ms (not 0ms) so JS listeners that depend on
 *     `animationend`/`transitionend` keep firing.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lp-scroll-cue,
  .animate-bounce {
    animation: none !important;
  }
}


/* =========================================================================
 * 14. STICKY HEADER + ANCHOR NAV (Sprint 8.7 / U1 + A1)
 *     Translucent sticky header with backdrop-blur. Anchors live in the
 *     centre and collapse below 768px; the hamburger stub appears in their
 *     place. Theme-aware background uses ~70% opacity so the hero gradient
 *     still bleeds through.
 * ========================================================================= */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 13, 12, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

html[data-theme="light"] .lp-header {
  background: rgba(250, 248, 243, 0.7);
}

.lp-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-6);
}

.lp-brand {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.lp-nav {
  display: flex;
  gap: var(--space-6);
}

.lp-nav a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 200ms ease;
}

.lp-nav a:hover,
.lp-nav a:focus-visible {
  color: var(--accent);
}

.lp-header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.lp-header-mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  cursor: pointer;
}

.lp-header-mobile-menu-btn:hover,
.lp-header-mobile-menu-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent-line);
}

@media (max-width: 768px) {
  .lp-nav { display: none; }
  .lp-header-mobile-menu-btn { display: inline-flex; }
  /* Below the mobile breakpoint we keep the primary CTA but drop the ghost
     "Entrar" button — saves horizontal room next to the hamburger. */
  .lp-header-actions .btn-ghost { display: none; }
}


/* =========================================================================
 * 15. SMOOTH SCROLL + ANCHOR OFFSET (Sprint 8.7 / U1)
 *     Smooth scrolling for anchor navigation, plus a scroll-margin offset
 *     so the sticky header (64px + 16px padding) never covers the section
 *     headings. The reduced-motion override in §13 already disables smooth
 *     scrolling for users who request it.
 * ========================================================================= */
html { scroll-behavior: smooth; }

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

#features,
#pricing,
#contato,
#whitelabel,
#sobre {
  scroll-margin-top: 80px;
}


/* =========================================================================
 * 16. RICH FOOTER (Sprint 8.7 / U9)
 *     4-column grid on desktop (2fr 1fr 1fr 1fr), single column on mobile.
 *     The first column is wider so brand + slogan + social row breathe.
 *     Hover colour flows through --accent so theme presets re-skin the
 *     footer automatically.
 * ========================================================================= */
.lp-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-9) 0 var(--space-7);
}

.lp-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.lp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.lp-footer-brand .lp-brand {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.lp-footer-slogan {
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 300;
  margin-bottom: var(--space-5);
  max-width: 28ch;
}

.lp-footer-social {
  display: flex;
  gap: var(--space-3);
}

.lp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color 200ms ease, border-color 200ms ease;
}

.lp-footer-social a:hover,
.lp-footer-social a:focus-visible {
  color: var(--accent);
  border-color: var(--accent-line);
}

.lp-footer-col-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: var(--space-4);
}

.lp-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lp-footer-links a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 200ms ease;
}

.lp-footer-links a:hover,
.lp-footer-links a:focus-visible {
  color: var(--accent);
}

.lp-footer-legal {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
}

.lp-footer-copyright {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

@media (max-width: 768px) {
  .lp-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* =========================================================================
 * 17. PRICING CYCLE TOGGLE + FEATURE MATRIX + FAQ (Sprint 8.8 / Phase 8)
 *     Three sub-blocks that together flesh out the pricing section:
 *       • .lp-cycle-toggle — 2 chips that drive landing-pricing.js
 *       • .lp-price-value  — fade-in transition target on cycle change
 *       • .lp-feature-matrix-wrap — horizontal scroll on mobile (<768px)
 *       • .lp-faq-item / .lp-faq-heading — native <details> styling
 *     `.sr-only` is defined here once for the matrix's a11y labels (no
 *     Tailwind-utility dependency on the rendered HTML path).
 * ========================================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Cycle toggle (Mensal / Anual) ─────────────────────────────────────────── */
/* The toggle is rendered as a block-level element with auto horizontal
   margins so it centres under the section heading. `width: max-content`
   keeps it sized to its 2 chips, and `margin-bottom` reserves space before
   the pricing grid below. */
.lp-cycle-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  margin: var(--space-4) auto var(--space-10);
}

.lp-cycle-toggle .chip {
  gap: var(--space-2);
}

.lp-cycle-toggle .badge {
  margin-left: var(--space-1);
}

/* P0 #3 — Reinforce active state with a non-colour signal (inset ring) so
   the toggle reads unambiguously even when the design system's `--accent-rgb`
   fallback in `.chip.is-active` resolves to a transparent black border. Pairs
   with `aria-pressed="true|false"` already on the buttons in
   `_lp_pricing.html` — together they satisfy WCAG 1.4.1 (Use of Color). */
.lp-cycle-toggle .chip.is-active {
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

/* Price value fade-in (200ms) ───────────────────────────────────────────── */
.lp-price-value {
  display: inline-block;
  transition: opacity 200ms ease;
}

.lp-price-value.is-changing {
  opacity: 0;
}

/* P2 #8 — Price slot baseline normalisation.
   Three plans render different copy patterns:
     - Starter / Pro: "R$ XXX" + "/mês"
     - Enterprise:    "Sob consulta" (no suffix)
   Without a shared min-height the visual baseline drifts. The wrapper below
   reserves 80px on all 3 cards and aligns children on their baseline so the
   text sits on the same line regardless of suffix presence. */
.lp-price-block {
  min-height: 80px;
  display: flex;
  align-items: baseline;
}

/* Feature matrix wrapper — horizontal scroll on narrow viewports ────────── */
/* P1 #5 — ≥96px of breathing room between pricing cards and the matrix in
   desktop; mobile keeps a tighter 64px so the single column doesn't feel
   stretched. */
.lp-feature-matrix-wrap {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  background: var(--bg-elev-1);
}

@media (min-width: 768px) {
  .lp-feature-matrix-wrap {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
  }
}

.lp-feature-matrix {
  min-width: 680px; /* Triggers horizontal scroll on narrow viewports; relaxed
                       from 720px so 768px-wide tablets render without scroll. */
}

.lp-feature-matrix th[scope="row"] {
  font-weight: 500;
  color: var(--text);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.875rem;
}

.lp-feature-matrix tbody td {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.lp-feature-matrix tbody td svg {
  vertical-align: middle;
}

/* FAQ — native <details> styling ────────────────────────────────────────── */
.lp-faq-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--space-6);
}

.lp-faq-heading {
  text-align: center;
  margin-bottom: var(--space-6);
  font-family: var(--font-display, inherit);
  font-weight: 500;
}

.lp-faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}

.lp-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  gap: var(--space-4);
  color: var(--text);
}

.lp-faq-item summary::-webkit-details-marker {
  display: none;
}

.lp-faq-item summary::marker {
  display: none;
}

.lp-faq-item summary svg {
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.lp-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.lp-faq-item p {
  color: var(--text-muted);
  margin-top: var(--space-3);
  line-height: 1.6;
}


/* =========================================================================
 * N. CONTACT FORM — commercial lead capture (Sprint 8.9)
 *    Lives inside ``#contato`` / ``.lp-cta-final`` and posts to
 *    ``commercial-lead-create``. The honeypot field is positioned off-screen
 *    so it remains invisible to humans but available to dumb bots.
 * ========================================================================= */
.lp-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-align: left;
  margin-top: var(--space-4);
}

.lp-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .lp-contact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lp-contact-grid-full {
    grid-column: 1 / -1;
  }
}

.lp-contact-actions {
  display: flex;
  justify-content: center;
}

/* Honeypot — must remain invisible but discoverable in the DOM. */
.lp-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Feedback slot — server response surfaces here. */
.lp-form-feedback {
  min-height: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: var(--r-md);
  transition: background 200ms ease, color 200ms ease, padding 200ms ease;
}

.lp-form-feedback:empty {
  padding: 0;
}

.lp-form-feedback.lp-feedback-success {
  background: rgba(34 197 94 / 0.12);
  color: rgb(74 222 128);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(34 197 94 / 0.3);
}

.lp-form-feedback.lp-feedback-error {
  background: rgba(239 68 68 / 0.12);
  color: rgb(248 113 113);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(239 68 68 / 0.3);
}

/* Per-field error label, injected dynamically by landing-contact.js. */
.lp-field-error {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: rgb(248 113 113);
}

.lp-contact-form .field.has-error .input,
.lp-contact-form .field.has-error textarea,
.lp-contact-form .field.has-error select {
  border-color: rgba(239 68 68 / 0.6);
  box-shadow: 0 0 0 3px rgba(239 68 68 / 0.15);
}

/* Submit button loading state — opacity dim + cursor wait. */
.lp-contact-form .btn.is-loading {
  opacity: 0.7;
  cursor: wait;
}

/* Reduced motion — disable transitions on the feedback slot when the user
 * prefers reduced motion. The form receives ``.lp-no-motion`` from
 * landing-contact.js when ``prefers-reduced-motion: reduce`` matches. */
.lp-contact-form.lp-no-motion .lp-form-feedback,
.lp-contact-form.lp-no-motion .btn,
.lp-contact-form.lp-no-motion .input {
  transition: none;
}


/* =========================================================================
 * 18. SCROLL-TRIGGER REVEAL (Sprint 8.10 / Polish)
 *     Elements decorated with ``data-reveal`` fade-in + slide-up 16px when
 *     they enter the viewport. The companion JS (``landing-reveal.js``)
 *     adds ``.is-revealed`` to flip the transition state, then unobserves.
 *     Users who request reduced motion bypass the animation entirely —
 *     the second @media block neutralises opacity/transform/transition so
 *     content settles instantly regardless of JS execution order.
 * ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal][data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="300"] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================================
 * 19. WHITELABEL MINI CARDS (Sprint 8.10 / U7)
 *     Lightweight rows used by the whitelabel section's left column. Hover
 *     surface lifts to ``--bg-elev-3`` so the trio reads as an interactive
 *     summary alongside the branding editor mockup on the right.
 * ========================================================================= */
.lp-mini-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--r-md);
  transition: background 200ms ease;
}

.lp-mini-card:hover {
  background: var(--bg-elev-3);
}


/* =========================================================================
 * 20. BRANDING MOCKUP IMAGE (Sprint 8.10 / U7)
 *     Wrapper for the manually captured ``/tenants/branding/`` screenshot.
 *     Uses ``--shadow-lg`` to lift the image off the page and ``--r-xl`` to
 *     match the radius of the surrounding ``.card`` primitives.
 * ========================================================================= */
.lp-branding-mockup {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}


/* =========================================================================
 * 21. SOCIAL PROOF (Sprint 8.10 / U6)
 *     A short testimonial, a row of four client-logo placeholders and a
 *     numeric metric. All tokens flow through the design system so light
 *     theme and accent presets re-skin automatically.
 * ========================================================================= */
.lp-social-proof-quote {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  font-weight: 300;
  font-style: italic;
}

.lp-social-proof-quote cite {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: normal;
  font-weight: 400;
}

.lp-social-proof-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  justify-items: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
}

@media (min-width: 768px) {
  .lp-social-proof-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lp-social-proof-logos img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.lp-social-proof-logos img:hover {
  opacity: 1;
}

.lp-social-proof-metric {
  text-align: center;
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 720px;
}

.lp-social-proof-metric strong {
  color: var(--accent);
  font-weight: 600;
}