/* ──────────────────────────────────────────────────────────────────
   Sukkan — Falcon-flavoured Bootstrap theme
   Hand-rolled stylesheet that sits on top of stock Bootstrap 5.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --bs-primary: #2C7BE5;
  --bs-primary-rgb: 44, 123, 229;
  --bs-link-color: #2C7BE5;
  --bs-link-hover-color: #1956a8;

  --bs-body-bg: #F9FAFD;
  --bs-body-color: #5E6E82;
  --bs-heading-color: #344050;
  --bs-secondary-color: #748194;
  --bs-tertiary-color: #9DA9BB;

  --bs-border-color: #EDF2F9;
  --bs-border-color-translucent: rgba(34, 51, 80, 0.075);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.75rem;

  /* Falcon-specific tokens */
  --falcon-soft-shadow: 0 .125rem .25rem rgba(43, 45, 80, .04);
  --falcon-soft-shadow-lg: 0 .5rem 1rem rgba(43, 45, 80, .08);
  --falcon-ink: #344050;
  --falcon-ink-soft: #5E6E82;
  --falcon-ink-mute: #748194;
  --falcon-bg-soft: #F9FAFD;
  --falcon-bg-card: #FFFFFF;
  --falcon-border: #EDF2F9;
  --falcon-accent: #2C7BE5;
  --falcon-accent-soft: #E5EEFB;
  --falcon-success: #00B96B;
  --falcon-warning: #F5803E;
  --falcon-danger: #E63757;

  /* Sidebar */
  --falcon-sidebar-width: 15rem;
  --falcon-sidebar-bg: #FFFFFF;
  --falcon-topbar-height: 4rem;
}

/* ── Typography ─────────────────────────────────────────────────── */
html, body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bs-heading-color);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--bs-heading-color);
  letter-spacing: -0.02em;
  font-weight: 700;
}
small, .small { font-size: .8125rem; }
.text-soft { color: var(--falcon-ink-mute); }
.fw-medium { font-weight: 500; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--falcon-soft-shadow);
  background: var(--falcon-bg-card);
}
.card-hover {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-hover:hover {
  border-color: #DFE6F1;
  box-shadow: var(--falcon-soft-shadow-lg);
  transform: translateY(-1px);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--falcon-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--bs-heading-color);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--bs-border-radius);
  padding: .5rem 1rem;
}
.btn-primary {
  background-color: var(--falcon-accent);
  border-color: var(--falcon-accent);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #1956a8;
  border-color: #1956a8;
}
.btn-soft-primary {
  background-color: var(--falcon-accent-soft);
  color: var(--falcon-accent);
  border: 1px solid transparent;
}
.btn-soft-primary:hover {
  background-color: #d6e4f7;
  color: #1956a8;
}
.btn-outline-secondary {
  color: var(--falcon-ink-soft);
  border-color: var(--falcon-border);
  background: #fff;
}
.btn-outline-secondary:hover {
  background: #f5f7fb;
  color: var(--falcon-ink);
  border-color: #DFE6F1;
}

/* ── Forms ──────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--falcon-border);
  color: var(--bs-heading-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--falcon-accent);
  box-shadow: 0 0 0 .2rem rgba(44, 123, 229, .15);
}
.form-label { color: var(--bs-heading-color); font-weight: 500; }

/* ── Badges (soft Falcon-style) ─────────────────────────────────── */
.badge { font-weight: 500; padding: .25em .55em; border-radius: var(--bs-border-radius); }
.badge-soft-primary { background: var(--falcon-accent-soft); color: var(--falcon-accent); }
.badge-soft-success { background: rgba(0, 185, 107, .12); color: #047a48; }
.badge-soft-warning { background: rgba(245, 128, 62, .14); color: #b85e22; }
.badge-soft-danger  { background: rgba(230, 55, 87, .12);  color: #b8294a; }
.badge-soft-secondary { background: #EDF2F9; color: var(--falcon-ink-soft); }

/* ── Public navbar (Bootstrap navbar enhancements) ──────────────── */
.public-navbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--falcon-border);
}
.public-navbar .navbar-brand {
  color: var(--bs-heading-color);
  font-weight: 600;
}
.public-navbar .nav-link {
  color: var(--falcon-ink-soft);
  font-size: .9375rem;
  font-weight: 500;
}
.public-navbar .nav-link:hover,
.public-navbar .nav-link.active {
  color: var(--bs-heading-color);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-heading-color);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  margin-right: .5rem;
}
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--falcon-accent-soft);
  color: var(--falcon-accent);
  font-weight: 600;
  font-size: .8125rem;
}
.public-navbar .dropdown-menu {
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--falcon-soft-shadow-lg);
  padding: .375rem;
  min-width: 14rem;
}
.public-navbar .dropdown-item {
  padding: .5rem .75rem;
  border-radius: var(--bs-border-radius);
  font-size: .875rem;
  color: var(--falcon-ink-soft);
}
.public-navbar .dropdown-item:hover {
  background: #f5f7fb;
  color: var(--bs-heading-color);
}
.public-navbar .dropdown-item.text-danger:hover {
  background: rgba(230, 55, 87, .08);
  color: var(--falcon-danger);
}

/* ── App-mode navbar (waffle launcher + profile) ────────────────── */
.app-navbar {
  background: #fff;
  border-bottom: 1px solid var(--falcon-border);
  padding: .5rem 0;
  min-height: var(--falcon-topbar-height);
}
.app-navbar .navbar-brand {
  color: var(--bs-heading-color);
  font-weight: 600;
  font-size: .9375rem;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--falcon-ink-soft);
  padding: 0;
  font-size: 1.125rem;
}
.btn-icon:hover,
.btn-icon[aria-expanded="true"] {
  background: var(--falcon-bg-soft);
  color: var(--bs-heading-color);
  border-color: var(--falcon-border);
}
.app-navbar .dropdown-menu {
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--falcon-soft-shadow-lg);
  padding: .375rem;
  min-width: 14rem;
}
.app-navbar .dropdown-item {
  padding: .5rem .75rem;
  border-radius: var(--bs-border-radius);
  font-size: .875rem;
  color: var(--falcon-ink-soft);
}
.app-navbar .dropdown-item:hover {
  background: var(--falcon-bg-soft);
  color: var(--bs-heading-color);
}
.app-navbar .dropdown-item.text-danger:hover {
  background: rgba(230, 55, 87, .08);
  color: var(--falcon-danger);
}
.app-waffle {
  width: 18rem;
  padding: .75rem !important;
}
.waffle-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .875rem .25rem;
  border-radius: var(--bs-border-radius);
  text-decoration: none;
  color: var(--falcon-ink-soft);
  transition: background .15s ease, color .15s ease;
  text-align: center;
}
.waffle-tile i {
  font-size: 1.5rem;
  color: var(--falcon-accent);
}
.waffle-tile span {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.1;
}
.waffle-tile:hover {
  background: var(--falcon-bg-soft);
  color: var(--bs-heading-color);
}

/* Filter chips on the payments table */
.filter-chips .btn {
  border-radius: 999px !important;
  padding: .25rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--falcon-border);
  margin-right: .375rem;
}
.filter-chips .btn:last-child { margin-right: 0; }
.filter-chips .btn-light {
  background: #fff;
  color: var(--falcon-ink-soft);
}
.filter-chips .btn-light:hover {
  background: var(--falcon-bg-soft);
  color: var(--bs-heading-color);
}
.filter-chips .btn-primary {
  background: var(--falcon-accent);
  border-color: var(--falcon-accent);
  color: #fff;
}

/* Age chip — 'open Nd' indicator, three urgency bands */
.age-chip {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  margin-top: 2px;
  letter-spacing: .02em;
  line-height: 1.4;
}
.age-chip.fresh    { background: var(--falcon-bg-soft);   color: var(--falcon-ink-soft); }
.age-chip.stale    { background: rgba(245, 128, 62, .12); color: #b45a1c; }
.age-chip.critical { background: rgba(230, 55, 87, .12);  color: #b8294a; }

/* Community deep-links from the property page header */
.community-link {
  color: var(--falcon-ink-soft);
  border-bottom: 1px dashed var(--falcon-border);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.community-link:hover {
  color: var(--falcon-accent);
  border-bottom-color: var(--falcon-accent);
}

/* Mobile issue list — stacked card rows below the md breakpoint */
.issues-mobile-list {
  display: flex;
  flex-direction: column;
}
.issue-mobile-row {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--falcon-border);
  color: inherit;
}
.issue-mobile-row:last-child { border-bottom: none; }
.issue-mobile-row:active,
.issue-mobile-row:hover { background: var(--falcon-bg-soft); }

/* Filter chip group: tighter on mobile so chips wrap nicely */
@media (max-width: 575.98px) {
  .filter-chips .btn {
    padding: .2rem .6rem;
    font-size: .75rem;
    margin-right: .25rem;
    margin-bottom: .25rem;
  }
}

/* ── Hero (homepage) ────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--falcon-border);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--falcon-bg-soft) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(44, 123, 229, .08), transparent 60%);
}
.hero-content { position: relative; }

/* ── Footer ─────────────────────────────────────────────────────── */
.public-footer {
  margin-top: 6rem;
  border-top: 1px solid var(--falcon-border);
  background: #FFFFFF;
  color: var(--falcon-ink-soft);
}
.public-footer h6 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--falcon-ink-mute);
}
.public-footer a { color: var(--falcon-ink-soft); text-decoration: none; }
.public-footer a:hover { color: var(--bs-heading-color); }

/* ── Dashboard shell (sidebar + topbar) ─────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--falcon-sidebar-width) 1fr;
  min-height: 100vh;
  background: var(--falcon-bg-soft);
}
.app-sidebar {
  background: var(--falcon-sidebar-bg);
  border-right: 1px solid var(--falcon-border);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar .brand {
  padding: .25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--bs-heading-color);
}
.app-sidebar .nav-section {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--falcon-ink-mute);
  padding: .75rem 1.25rem .25rem;
}
.app-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.25rem;
  color: var(--falcon-ink-soft);
  font-size: .9375rem;
  border-left: 2px solid transparent;
}
.app-sidebar .nav-link i { font-size: 1rem; width: 1.1rem; text-align: center; }
.app-sidebar .nav-link:hover { color: var(--bs-heading-color); background: #f5f7fb; }
.app-sidebar .nav-link.active {
  color: var(--falcon-accent);
  background: #f5f7fb;
  border-left-color: var(--falcon-accent);
  font-weight: 500;
}
.app-topbar {
  background: #fff;
  border-bottom: 1px solid var(--falcon-border);
  height: var(--falcon-topbar-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 5;
}
.app-content { padding: 1.5rem; }
@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
}

/* ── Stat cards (overview tiles) ────────────────────────────────── */
.stat-card .label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--falcon-ink-mute);
  font-weight: 600;
}
.stat-card .value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bs-heading-color);
  line-height: 1.1;
}
.stat-card .stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bs-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--falcon-accent-soft);
  color: var(--falcon-accent);
  font-size: 1.05rem;
}

/* ── Article prose (ported from Tailwind .prose-article) ────────── */
.prose-article {
  color: #344050;
  line-height: 1.7;
  font-size: 1.0625rem;
}
.prose-article h2 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 .75rem; letter-spacing: -.01em; }
.prose-article h3 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 .5rem; letter-spacing: -.01em; }
.prose-article p { margin: 1rem 0; }
.prose-article ul, .prose-article ol { margin: 1rem 0; padding-left: 1.5rem; }
.prose-article ul li, .prose-article ol li { margin: .25rem 0; }
.prose-article a {
  color: var(--falcon-accent);
  text-decoration: underline;
  text-decoration-color: rgba(44, 123, 229, .3);
  text-underline-offset: 2px;
}
.prose-article a:hover { text-decoration-color: var(--falcon-accent); }
.prose-article strong { font-weight: 600; color: var(--bs-heading-color); }
.prose-article table { width: 100%; margin: 1.5rem 0; font-size: .9375rem; border-collapse: collapse; }
.prose-article thead { border-bottom: 1px solid #cdd5e2; }
.prose-article th { text-align: left; font-weight: 600; padding: .5rem; }
.prose-article td { padding: .5rem; border-bottom: 1px solid var(--falcon-border); }
.prose-article hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--falcon-border); }
.prose-article blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--falcon-accent);
  font-style: italic;
  color: var(--falcon-ink-soft);
}
.prose-article img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius); margin: 1rem 0; }
.prose-article .alert { border-radius: var(--bs-border-radius-lg); padding: 1rem; margin: 1.5rem 0; }
.prose-article .alert-secondary { background: var(--falcon-accent-soft); border: 1px solid #d6e4f7; color: #1f4f8b; }

/* ── Gallery tile ───────────────────────────────────────────────── */
.gallery-tile {
  display: block;
  overflow: hidden;
  border-radius: var(--bs-border-radius);
  background: #EDF2F9;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  transition: transform .3s ease;
}
.gallery-tile:hover img { transform: scale(1.04); }

/* ── Utility scraps ─────────────────────────────────────────────── */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bs-border-radius);
  background: var(--falcon-accent-soft);
  color: var(--falcon-accent);
  font-size: 1.1rem;
}
.divider-vertical {
  width: 1px;
  height: 1.5rem;
  background: var(--falcon-border);
}

/* ════════════════════════════════════════════════════════════════════
   Auth pages (login / signup / password reset)
   ════════════════════════════════════════════════════════════════════ */
.auth-shell {
  min-height: calc(100vh - var(--falcon-topbar-height) - 4rem);
  display: flex;
  align-items: center;
  padding: 3rem 0;
  background:
    radial-gradient(ellipse at top, rgba(44, 123, 229, .07), transparent 60%),
    var(--falcon-bg-soft);
}
.auth-card {
  max-width: 26rem;
  width: 100%;
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem;
  box-shadow: var(--falcon-soft-shadow-lg);
}
.auth-card-status {
  max-width: 24rem;
}
.auth-card .form-text {
  color: var(--falcon-ink-mute);
  font-size: .75rem;
  margin-top: .25rem;
}
.auth-card .form-text ul {
  padding-left: 1rem;
  margin: .25rem 0 0;
}
.auth-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  margin: 0 auto;
}
.auth-status-icon-info { background: var(--falcon-accent-soft); color: var(--falcon-accent); }
.auth-status-icon-success { background: rgba(0, 185, 107, .12); color: var(--falcon-success); }
.auth-status-icon-danger { background: rgba(230, 55, 87, .12); color: var(--falcon-danger); }

/* ════════════════════════════════════════════════════════════════════
   Landing page (lp-*) — SaaS-flavour marketing components
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--falcon-border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FD 100%);
}
.lp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.lp-blob-1 {
  width: 36rem; height: 36rem;
  top: -10rem; right: -8rem;
  background: radial-gradient(circle, rgba(44,123,229,.45), rgba(44,123,229,0) 60%);
}
.lp-blob-2 {
  width: 28rem; height: 28rem;
  bottom: -12rem; left: -6rem;
  background: radial-gradient(circle, rgba(114,124,245,.35), rgba(114,124,245,0) 60%);
}
.lp-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(52,64,80,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(52,64,80,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--falcon-ink);
  box-shadow: var(--falcon-soft-shadow);
}
.lp-pulse {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #00B96B;
  box-shadow: 0 0 0 0 rgba(0,185,107,.6);
  animation: lp-pulse 2s infinite;
}
@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,185,107,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(0,185,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,185,107,0); }
}

.lp-headline {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bs-heading-color);
}
.lp-grad {
  background: linear-gradient(90deg, #2C7BE5 0%, #727CF5 50%, #00B96B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-subhead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--falcon-ink-soft);
  max-width: 34rem;
}

.lp-trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--falcon-border);
}
.lp-avatars {
  display: inline-flex;
}
.lp-avatar {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: .8125rem;
  border: 2px solid #fff;
  margin-left: -.5rem;
  box-shadow: 0 1px 2px rgba(43,45,80,.08);
}
.lp-avatar:first-child { margin-left: 0; }
.lp-avatar-more {
  background: #EDF2F9;
  color: var(--falcon-ink-mute);
}

/* ── Hero mockup (browser window with floaters) ────────────────────── */
.lp-mockup {
  position: relative;
  padding: 1.5rem 1rem 2.5rem;
}
.lp-mockup-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 4rem;
  background: radial-gradient(ellipse at center, rgba(43,45,80,.22), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.lp-window {
  position: relative;
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1rem 2rem -.5rem rgba(43,45,80,.18),
    0 .25rem .5rem rgba(43,45,80,.06);
  z-index: 1;
}
.lp-window-bar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem .75rem;
  background: #F9FAFD;
  border-bottom: 1px solid var(--falcon-border);
}
.lp-dot {
  width: .625rem; height: .625rem;
  border-radius: 50%;
  display: inline-block;
}
.lp-dot-r { background: #E63757; }
.lp-dot-y { background: #F5803E; }
.lp-dot-g { background: #00B96B; }
.lp-window-url {
  margin-left: auto;
  margin-right: auto;
  font-size: .75rem;
  color: var(--falcon-ink-mute);
  font-family: "Menlo", "Consolas", monospace;
}
.lp-window-body { padding: 1.25rem; }

.lp-mini-stat {
  background: #F9FAFD;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius);
  padding: .625rem .75rem;
}
.lp-mini-stat-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--falcon-ink-mute);
  font-weight: 600;
}
.lp-mini-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bs-heading-color);
  margin-top: .125rem;
  line-height: 1.2;
}
.lp-mini-stat-foot {
  font-size: .6875rem;
  color: var(--falcon-ink-mute);
  margin-top: .125rem;
}
.lp-mini-bar {
  margin-top: .375rem;
  height: 4px;
  background: #EDF2F9;
  border-radius: 4px;
  overflow: hidden;
}
.lp-mini-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2C7BE5, #727CF5);
}
.text-warning-soft { color: #b85e22; }

.lp-mock-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
  border-top: 1px solid var(--falcon-border);
}
.lp-mock-row:first-of-type { border-top: 0; padding-top: .375rem; }
.lp-mock-icon {
  width: 2rem; height: 2rem;
  border-radius: var(--bs-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}

.lp-floater {
  position: absolute;
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius);
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  box-shadow: 0 .75rem 1.5rem -.25rem rgba(43,45,80,.18);
  z-index: 2;
}
.lp-floater-1 {
  top: 5rem;
  left: -.5rem;
  animation: lp-float 6s ease-in-out infinite;
}
.lp-floater-2 {
  bottom: 4.5rem;
  right: -.5rem;
  animation: lp-float 6s ease-in-out infinite -3s;
}
@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── Logo / trust strip ────────────────────────────────────────────── */
.lp-strip {
  border-top: 1px solid var(--falcon-border);
  border-bottom: 1px solid var(--falcon-border);
  background: #fff;
  padding: 1.5rem 0;
}
.lp-strip-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--falcon-ink-mute);
  font-weight: 600;
  text-align: center;
  margin: 0 0 1rem;
}
.lp-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.25rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--falcon-ink-soft);
}
.lp-strip-dot {
  color: var(--falcon-ink-mute);
  opacity: .5;
}

/* ── Big stats ─────────────────────────────────────────────────────── */
.lp-stat {
  text-align: center;
  padding: .5rem;
}
.lp-stat-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #2C7BE5, #727CF5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.lp-stat-label {
  font-size: .875rem;
  color: var(--falcon-ink-mute);
  margin-top: .25rem;
}

/* ── Section variants ──────────────────────────────────────────────── */
.lp-section-alt {
  background: #fff;
  border-top: 1px solid var(--falcon-border);
  border-bottom: 1px solid var(--falcon-border);
}
.lp-section-dark {
  background: linear-gradient(160deg, #1F2A3A 0%, #344050 100%);
  position: relative;
  overflow: hidden;
}
.lp-section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(44,123,229,.25), transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(114,124,245,.18), transparent 50%);
  pointer-events: none;
}
.lp-on-dark { color: #fff !important; }
.lp-on-dark-sub { color: #cdd5e2; line-height: 1.6; }
.lp-badge-on-dark {
  background: rgba(44,123,229,.2) !important;
  color: #8eb6f0 !important;
}
.lp-h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* ── Toolkit cards ─────────────────────────────────────────────────── */
.lp-tool {
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
}
.lp-tool:hover {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem -.5rem rgba(43,45,80,.12);
  border-color: #DFE6F1;
}
.lp-tool-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bs-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}
.lp-tool-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  font-weight: 500;
  color: var(--falcon-accent);
  text-decoration: none;
}
.lp-tool-link:hover { color: #1956a8; }
.lp-tool-coming {
  background: linear-gradient(180deg, #fff 0%, #FBFCFE 100%);
  border-style: dashed;
}
.lp-tool-coming .lp-tool-link { font-style: italic; }

/* ── Step cards ────────────────────────────────────────────────────── */
.lp-step {
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem 1.5rem 1.5rem;
  position: relative;
}
.lp-step-num {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-heading-color);
  color: #fff;
  font-weight: 700;
  font-size: .8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .02em;
}

/* ── Resident-app feature card (on dark) ───────────────────────────── */
.lp-feature-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.25rem;
  backdrop-filter: blur(10px);
}
.lp-feature-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
}
.lp-feature-stat-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--bs-border-radius);
  background: rgba(44,123,229,.18);
  color: #8eb6f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}
.lp-feature-stat-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a96a8;
  font-weight: 600;
}
.lp-feature-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-top: .125rem;
  line-height: 1.2;
}
.lp-feature-stat-foot {
  font-size: .75rem;
  color: #8a96a8;
  margin-top: .125rem;
}
.lp-feature-bar {
  margin-top: .5rem;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.lp-feature-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2C7BE5, #00B96B);
}
.lp-feature-list {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--bs-border-radius);
  padding: .375rem .875rem;
}
.lp-feature-list-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #cdd5e2;
  font-size: .875rem;
}
.lp-feature-list-row:first-child { border-top: 0; }
.lp-feature-list-row .text-soft { color: #8a96a8 !important; }
.lp-feature-pip {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Checklist (dark) ──────────────────────────────────────────────── */
.lp-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-checklist li {
  color: #cdd5e2;
  padding: .375rem 0;
  font-size: .9375rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.lp-checklist li i {
  color: #00B96B;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* ── Quotes ────────────────────────────────────────────────────────── */
.lp-quote {
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 1.75rem;
  position: relative;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--bs-heading-color);
}
.lp-quote-mark {
  position: absolute;
  top: .25rem;
  right: 1rem;
  font-size: 3rem;
  color: var(--falcon-accent-soft);
  line-height: 1;
}

/* ── Pricing ───────────────────────────────────────────────────────── */
.lp-price {
  position: relative;
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.lp-price-name {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--falcon-ink-mute);
}
.lp-price-amount {
  margin: .75rem 0 .25rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.lp-price-num {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bs-heading-color);
  line-height: 1;
}
.lp-price-suffix {
  color: var(--falcon-ink-mute);
  font-size: .875rem;
}
.lp-price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.lp-price-list li {
  padding: .375rem 0;
  font-size: .9375rem;
  color: var(--falcon-ink);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.lp-price-list li i {
  color: var(--falcon-accent);
  margin-top: .2rem;
  flex-shrink: 0;
}
.lp-price-featured {
  border-color: var(--falcon-accent);
  border-width: 2px;
  box-shadow: 0 1.25rem 2.5rem -1rem rgba(44,123,229,.25);
  transform: translateY(-.25rem);
}
.lp-price-tag {
  position: absolute;
  top: -.75rem;
  right: 1.5rem;
  background: var(--falcon-accent);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .625rem;
  border-radius: 999px;
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.lp-faq .accordion-item {
  background: #fff;
  border: 1px solid var(--falcon-border);
  border-radius: var(--bs-border-radius-lg) !important;
  margin-bottom: .75rem;
  overflow: hidden;
}
.lp-faq .accordion-button {
  font-weight: 500;
  color: var(--bs-heading-color);
  background: #fff;
  padding: 1rem 1.25rem;
  font-size: .9375rem;
}
.lp-faq .accordion-button:not(.collapsed) {
  background: #F9FAFD;
  color: var(--bs-heading-color);
  box-shadow: none;
}
.lp-faq .accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(44,123,229,.15);
  border-color: var(--falcon-accent);
}
.lp-faq .accordion-body { color: var(--falcon-ink-soft); }

/* ── Final CTA ─────────────────────────────────────────────────────── */
.lp-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1F2A3A 0%, #2C7BE5 100%);
  border-radius: var(--bs-border-radius-lg);
  padding: 4rem 1.5rem;
}
.lp-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-blob-cta {
  position: absolute;
  width: 24rem;
  height: 24rem;
  top: -8rem;
  right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  filter: blur(20px);
}
.lp-cta-outline {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.lp-cta-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
}

/* ── Responsive trims ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .lp-floater-1 { top: 2rem; left: 0; }
  .lp-floater-2 { bottom: 2rem; right: 0; }
  .lp-mockup { padding: 1rem .25rem 2rem; }
  .lp-price-featured { transform: none; }
}