html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #5a6bf0;
}

html {
  position: relative;
  min-height: 100%;
}

:root {
  --app-font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ui-radius: 0.85rem;
  --ui-radius-sm: 0.65rem;
  --ui-border: #e7ecf4;
  --ui-muted: #6b7280;
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fbff;
  --app-text: #1f2937;
  --app-text-muted: #6b7280;
  --app-border: #e7ecf4;
  --app-nav-hover: #f1f4fb;
  --app-nav-active: #eaf0ff;
  --app-nav-active-text: #4f46e5;

  /* Canonical token system (DESIGN.md: The Quiet Ledger). New surfaces consume these. */
  --color-primary: #4058da;
  --color-primary-deep: #2f3d63;
  --color-primary-soft: #e9eeff;
  --color-primary-tint: #d7e2fb;

  --color-surface: #fdfdff;
  --color-surface-canvas: #eef2f8;
  --color-surface-soft: #f7f9fd;
  --color-surface-elev: #fdfdff;

  --color-border: #e7ecf4;
  --color-border-subtle: #edf0f6;

  --color-text: #1f2937;
  --color-text-strong: #2d3b57;
  --color-text-muted: #55617e;
  --color-text-faint: #8a96af;

  --color-success: #16a34a;
  --color-success-soft: #ecfdf3;
  --color-success-border: #bbf7d0;
  --color-success-text: #166534;

  --color-warning: #b45309;
  --color-warning-soft: #fef3c7;
  --color-warning-border: #fde68a;

  --color-danger: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fecaca;
  --color-danger-text: #991b1b;

  --color-info: var(--color-primary);
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-text: #1e3a8a;

  --radius-pill: 999px;
  --radius-lg: 1rem;
  --radius-md: 0.85rem;
  --radius-sm: 0.65rem;
  --radius-xs: 0.45rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;

  --font-family-app: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-display: 1.5rem;
  --font-size-headline: 1.2rem;
  --font-size-title: 1.04rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.9rem;
  --font-size-label: 0.82rem;
  --font-size-caption: 0.69rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --shadow-lift-hover: 0 4px 12px -2px rgba(31, 41, 55, 0.06);
  --shadow-lift-modal: 0 10px 24px -4px rgba(31, 41, 55, 0.10);
  --shadow-lift-floating: 0 6px 20px -4px rgba(31, 41, 55, 0.08);
  --shadow-focus-ring: 0 0 0 3px rgba(64, 88, 218, 0.25);

  --motion-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-modal: 240ms;
}

html[data-theme="dark"] {
  --app-bg: #0f172a;
  --app-surface: #111827;
  --app-surface-soft: #0b1220;
  --app-text: #e5e7eb;
  --app-text-muted: #9ca3af;
  --app-border: #243244;
  --app-nav-hover: #1b2533;
  --app-nav-active: #1e3a8a;
  --app-nav-active-text: #dbeafe;
  --ui-border: #243244;
  --ui-muted: #9ca3af;

  --color-primary: #6e80f0;
  --color-primary-deep: #8e9bf5;
  --color-primary-soft: #1e2347;
  --color-primary-tint: #2a3263;

  --color-surface: #18202f;
  --color-surface-canvas: #0c121d;
  --color-surface-soft: #0e1422;
  --color-surface-elev: #1c2536;

  --color-border: #283041;
  --color-border-subtle: #1e2533;

  --color-text: #e2e8f0;
  --color-text-strong: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-faint: #64748b;

  --color-success: #4ade80;
  --color-success-soft: #14532d;
  --color-success-border: #166534;
  --color-success-text: #bbf7d0;

  --color-warning: #fbbf24;
  --color-warning-soft: #422006;
  --color-warning-border: #78350f;

  --color-danger: #f87171;
  --color-danger-soft: #450a0a;
  --color-danger-border: #991b1b;
  --color-danger-text: #fecaca;

  --color-info-soft: #1e2a45;
  --color-info-border: #1e40af;
  --color-info-text: #bfdbfe;

  --shadow-lift-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.35);
  --shadow-lift-modal: 0 10px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lift-floating: 0 6px 20px -4px rgba(0, 0, 0, 0.4);
  --shadow-focus-ring: 0 0 0 3px rgba(110, 128, 240, 0.35);
}

html[data-theme="dark"] .app-shell .bg-white {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

html[data-theme="dark"] .app-shell .text-dark {
  color: var(--app-text) !important;
}

body {
  font-family: var(--app-font-family);
  font-weight: 400;
  background-color: #f8f9fb;
  color: var(--app-text);
  line-height: 1.55;
  font-feature-settings: "calt" 1, "ss01" 1, "cv11" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.2;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  line-height: 1.2;
}

.btn {
  border-radius: 0.55rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
}

label,
.form-label,
.nav-link,
.badge {
  font-weight: 600;
}

.btn-sm {
  border-radius: 0.45rem;
  padding: 0.3rem 0.65rem;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

.btn-outline-secondary {
  border-color: #cdd7e5;
  color: #334155;
}

.btn-outline-secondary:hover {
  background-color: #f3f6fb;
  border-color: #b9c7db;
  color: #1f2937;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

.card-header {
  font-weight: 600;
  background-color: #f9fbff;
  border-bottom: 1px solid #edf1f7;
  padding: 0.8rem 1rem;
}

.card-body {
  padding: 1rem;
}

.alert {
  border-radius: var(--ui-radius-sm);
  border-width: 1px;
  padding: 0.7rem 0.9rem;
}

.app-alert {
  margin-bottom: 0.9rem;
}

.status-badge {
  border-radius: 999px;
  padding: 0.32rem 0.55rem;
  font-weight: 600;
  font-size: 0.72rem;
}

.badge-status-draft {
  background-color: #eef2f7;
  color: #374151;
}

.badge-status-sent {
  background-color: #dbeafe;
  color: #4058da;
}

.badge-status-submitted {
  background-color: #fef3c7;
  color: #92400e;
}

.badge-status-completed {
  background-color: #dcfce7;
  color: #166534;
}

.badge-status-rejected {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-status-overdue {
  background-color: #ffe4e6;
  color: #9f1239;
}

.badge-status-missing {
  background-color: #e0f2fe;
  color: #075985;
}

.badge-status-cancelled {
  background-color: #e5e7eb;
  color: #374151;
}

.badge-status-neutral {
  background-color: #f3f4f6;
  color: #374151;
}

.table {
  --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  vertical-align: middle;
}

.list-table {
  table-layout: fixed;
}

.list-table th,
.list-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-table td > a:not(.btn),
.list-table td > span,
.list-table td > div,
.list-table td > strong,
.list-table td > small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-table td > .badge,
.list-table td > .status-badge {
  display: inline-flex;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* ============================================================
   Mobile card-style tables
   Opt-in helper: add `.mobile-card-table` next to `.list-table`
   on any table whose markup includes `data-label="..."` on each
   <td>. At phone widths the table reflows into stacked cards
   with column labels rendered via ::before. Desktop unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
  .mobile-card-table,
  .mobile-card-table thead,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block;
    width: 100%;
  }

  .mobile-card-table thead {
    /* Headers don't make sense as a card; we surface them per-cell instead. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Each row becomes a card. */
  .mobile-card-table tbody tr {
    border: 1px solid var(--color-border, #e7ecf4);
    border-radius: 0.75rem;
    background: var(--color-surface, #fdfdff);
    padding: 0.75rem 0.95rem;
    margin-bottom: 0.65rem;
    box-shadow: none;
  }

  /* Each cell becomes a label + value row inside the card. */
  .mobile-card-table tbody td {
    border: 0;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: right;
  }

  /* Column label injected from the cell's data-label attribute. */
  .mobile-card-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint, #8a96af);
    align-self: center;
    text-align: left;
  }

  /* The "Name"/"Title" column reads as a card heading — full width, no label. */
  .mobile-card-table tbody td:first-child {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.55rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-subtle, #edf0f6);
    text-align: left;
  }
  .mobile-card-table tbody td:first-child::before {
    display: none;
  }
  .mobile-card-table tbody td:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-strong, #2d3b57);
  }

  /* The actions cell (data-label="") sits below the card, full-width button. */
  .mobile-card-table tbody td[data-label=""],
  .mobile-card-table tbody td.text-end {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border-subtle, #edf0f6);
    justify-content: stretch;
    text-align: center;
  }
  .mobile-card-table tbody td[data-label=""]::before,
  .mobile-card-table tbody td.text-end::before {
    display: none;
  }
  .mobile-card-table tbody td[data-label=""] .btn,
  .mobile-card-table tbody td.text-end .btn {
    width: 100%;
    justify-content: center;
  }

  /* Override the truncation rules .list-table imposes — they break the
     card layout because cells are now block-level. */
  .mobile-card-table.list-table th,
  .mobile-card-table.list-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.list-table td > a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.list-table th:last-child,
.list-table td:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.list-table td:last-child > div,
.list-table td:last-child > a,
.list-table td:last-child > span {
  overflow: visible;
  text-overflow: clip;
}

.table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ui-muted);
  border-top: 0;
  white-space: nowrap;
}

.brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 0.35rem;
  border: 1px solid #dee2e6;
  background-color: #fff;
}

.empty-state {
  font-size: 0.95rem;
}

.marketing-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lift-floating);
}

.marketing-navbar {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.marketing-nav-inner {
  align-items: center;
}

.marketing-brand {
  margin-right: 1.1rem;
}

.marketing-brand > span {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.marketing-nav-collapse {
  align-items: center;
}

.marketing-nav-links {
  margin: 0 auto;
  gap: 0.28rem;
}

.marketing-nav-links .nav-link {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--motion-ease-out), background-color var(--duration-fast) var(--motion-ease-out);
}

.marketing-nav-links .nav-link:hover,
.marketing-nav-links .nav-link:focus-visible {
  color: var(--color-text-strong);
  background: var(--color-primary-soft);
}

.marketing-nav-actions {
  align-items: center;
  margin-left: 1rem;
}

.marketing-btn {
  border-radius: 0.7rem;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.marketing-btn-login {
  min-height: 2.55rem;
  padding: 0.62rem 1.05rem;
}

.marketing-btn-cta {
  min-height: 2.8rem;
  padding: 0.72rem 1.25rem;
}

.marketing-nav-toggler {
  border-color: var(--color-border);
}

.marketing-nav-toggler:focus-visible {
  box-shadow: var(--shadow-focus-ring);
}

@media (min-width: 992px) {
  .marketing-nav-collapse {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
  }

  .marketing-nav-links {
    grid-column: 2;
    justify-self: center;
  }

  .marketing-nav-actions {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }
}

.marketing-shell main {
  min-height: calc(100vh - 132px);
}

.lp-hero {
  position: relative;
  padding: clamp(5rem, 8vw, 7rem) 0 clamp(4rem, 6vw, 5.5rem);
  overflow: hidden;
}

html:not([data-theme="dark"]) .lp-hero {
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    var(--color-primary);
  color: #fdfdff;
}

html:not([data-theme="dark"]) .lp-hero .lp-kicker {
  color: var(--color-primary-tint);
  letter-spacing: 0.18em;
}

html:not([data-theme="dark"]) .lp-hero .lp-hero-title {
  color: #fdfdff;
}

html:not([data-theme="dark"]) .lp-hero .lp-hero-subtitle {
  color: var(--color-primary-tint);
}

html:not([data-theme="dark"]) .lp-hero .lp-hero-subtitle strong {
  color: #fdfdff;
  font-weight: 600;
}

html:not([data-theme="dark"]) .lp-hero .lp-trustline {
  color: var(--color-primary-tint);
  opacity: 0.85;
}

html:not([data-theme="dark"]) .lp-hero .btn-primary {
  background: #fdfdff;
  border-color: #fdfdff;
  color: var(--color-primary-deep);
  font-weight: 700;
}

html:not([data-theme="dark"]) .lp-hero .btn-primary:hover,
html:not([data-theme="dark"]) .lp-hero .btn-primary:focus-visible {
  background: var(--color-primary-tint);
  border-color: var(--color-primary-tint);
  color: var(--color-primary-deep);
}

html:not([data-theme="dark"]) .lp-hero .btn-outline-secondary {
  background: transparent;
  border-color: rgba(253, 253, 255, 0.42);
  color: #fdfdff;
  font-weight: 600;
}

html:not([data-theme="dark"]) .lp-hero .btn-outline-secondary:hover,
html:not([data-theme="dark"]) .lp-hero .btn-outline-secondary:focus-visible {
  background: rgba(253, 253, 255, 0.08);
  border-color: #fdfdff;
  color: #fdfdff;
}

.lp-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.1rem;
}

.lp-hero-title {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin-bottom: var(--space-lg);
  color: var(--color-text-strong);
  max-width: 16ch;
}

.lp-hero-subtitle {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 38rem;
  margin-bottom: var(--space-xl);
}

.lp-trustline {
  margin-top: var(--space-lg);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}

.lp-hero-visual {
  position: relative;
  min-height: 360px;
}

.lp-product-mockup {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift-modal);
  overflow: hidden;
}

.lp-stage {
  position: relative;
  height: 340px;
  padding: 0;
}

.lp-stage-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  animation: lpStageRotate 15s infinite;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift-floating);
}

@media (prefers-reduced-motion: reduce) {
  .lp-stage-frame {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .lp-stage-frame:not(:first-child) {
    display: none;
  }
}

.lp-stage-dashboard { animation-delay: 0s; }
.lp-stage-builder { animation-delay: 5s; }
.lp-stage-client { animation-delay: 10s; }

@keyframes lpStageRotate {
  0%, 5% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  8%, 30% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  36%, 100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
  }
}

.lp-product-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.82rem var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-soft);
}

.lp-product-head strong {
  font-size: 0.86rem;
  color: var(--color-text-strong);
}

.lp-product-head small {
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.lp-product-body {
  padding: 0.95rem 1rem;
}

.lp-mockup-builder {
  top: 0;
  left: 0;
  width: 72%;
  z-index: 3;
}

.lp-mockup-checklist {
  top: 38%;
  right: 0;
  width: 58%;
  z-index: 4;
}

.lp-mockup-dashboard {
  bottom: 0;
  left: 11%;
  width: 66%;
  z-index: 2;
}

.lp-builder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  color: #334155;
  padding: 0.46rem 0;
  border-top: 1px solid #edf2fa;
}

.lp-mini-kpis {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.lp-mini-kpis span {
  font-size: 0.68rem;
  color: var(--color-text);
  padding: 0.2rem 0.48rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-soft);
}

.lp-mini-rows {
  display: grid;
  gap: 0.4rem;
}

.lp-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  font-size: 0.75rem;
  color: var(--color-text);
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 0.68rem;
  background: var(--color-surface-elev);
}

.lp-mini-row em {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.lp-mini-progress {
  margin-top: 0.65rem;
}

.lp-mini-progress label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
  display: block;
}

.lp-mini-progress div {
  height: 0.44rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.lp-mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.lp-mini-builder {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1fr;
  gap: 0.6rem;
}

.lp-mini-outline,
.lp-mini-props {
  border: 1px solid #e4ecfb;
  border-radius: 0.78rem;
  padding: 0.55rem;
  background: var(--color-surface-elev);
}

.lp-mini-outline-item {
  font-size: 0.72rem;
  color: #475569;
  padding: 0.33rem 0.42rem;
  border-radius: 0.4rem;
}

.lp-mini-outline-item.active {
  background: #e5efff;
  color: #4058da;
  font-weight: 600;
}

.lp-mini-canvas {
  border: 1px solid #dfe9ff;
  border-radius: 0.78rem;
  padding: 0.55rem;
  background: #ffffff;
}

.lp-mini-field {
  font-size: 0.72rem;
  color: #334155;
  padding: 0.42rem 0.52rem;
  border: 1px solid #e6eefc;
  border-radius: 0.55rem;
  margin-bottom: 0.42rem;
  background: #ffffff;
}

.lp-mini-field:last-child {
  margin-bottom: 0;
}

.lp-mini-field small {
  color: #64748b;
  margin-left: 0.35rem;
}

.lp-mini-prop-line {
  height: 0.42rem;
  border-radius: 999px;
  background: #dbe7fb;
  margin-bottom: 0.34rem;
}

.lp-mini-prop-line:last-child {
  margin-bottom: 0;
}

.lp-mini-prop-line.w-90 { width: 90%; }
.lp-mini-prop-line.w-80 { width: 80%; }
.lp-mini-prop-line.w-70 { width: 70%; }

.lp-mini-client {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 0.6rem;
  align-items: start;
}

.lp-mini-client-nav {
  border: 1px solid #e4ecfb;
  border-radius: 0.78rem;
  padding: 0.5rem;
  background: var(--color-surface-elev);
}

.lp-mini-client-node {
  font-size: 0.7rem;
  color: #475569;
  padding: 0.34rem 0.4rem;
  border-radius: 0.4rem;
  margin-bottom: 0.22rem;
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
}

.lp-mini-client-node:last-child {
  margin-bottom: 0;
}

.lp-mini-client-node.active {
  background: #e5efff;
  color: #4058da;
  font-weight: 600;
}

.lp-mini-client-node small {
  font-size: 0.64rem;
  color: #64748b;
}

.lp-mini-client-content {
  border: 1px solid #e4ecfb;
  border-radius: 0.78rem;
  padding: 0.55rem;
  background: #ffffff;
}

.lp-mini-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  margin-bottom: 0.42rem;
}

.lp-mini-question strong {
  color: var(--color-text-strong);
}

.lp-mini-question small {
  color: #4058da;
  font-size: 0.66rem;
}

.lp-mini-answer-row {
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  font-size: 0.72rem;
  color: #334155;
  padding: 0.35rem 0;
  border-top: 1px solid #edf2fa;
}

.lp-mini-answer-row:first-of-type {
  border-top: 0;
}

.lp-mini-answer-row em {
  font-style: normal;
  color: #64748b;
  font-size: 0.68rem;
}

.lp-builder-row:first-child {
  border-top: 0;
}

.lp-checklist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: #334155;
  padding: 0.42rem 0;
  border-top: 1px solid #edf2fa;
}

.lp-checklist-item:first-child {
  border-top: 0;
}

.lp-checklist-item span.done {
  color: #0f766e;
}

.lp-checklist-item em {
  font-style: normal;
  font-size: 0.73rem;
  color: #64748b;
}

.lp-dashboard-bars {
  display: grid;
  gap: 0.55rem;
}

.lp-dashboard-bars div {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 0.6rem;
}

.lp-dashboard-bars label {
  font-size: 0.73rem;
  color: #64748b;
  font-weight: 500;
}

.lp-dashboard-bars span {
  display: block;
  height: 0.46rem;
  border-radius: 999px;
  background: var(--color-primary);
}

.lp-hero-window {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #d9e5ff;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.lp-window-header {
  display: flex;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e7edfb;
  background: #f9fbff;
}

.lp-window-header span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #b7c5ea;
}

.lp-window-body {
  padding: 1rem;
}

.lp-line {
  height: 0.68rem;
  border-radius: 999px;
  background: #deebff;
  margin-bottom: 0.6rem;
}

.lp-line.w-85 { width: 85%; }
.lp-line.w-75 { width: 75%; }
.lp-line.w-60 { width: 60%; }
.lp-line.w-45 { width: 45%; }

.lp-panel {
  margin-top: 0.85rem;
  border: 1px solid #e4ecff;
  border-radius: 0.8rem;
  padding: 0.85rem;
  background: #f9fbff;
}

.lp-checklist {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.45rem;
}

.lp-checklist span {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.86rem;
  color: #334155;
}

.lp-checklist span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  border: 2px solid #9bb4ea;
}

.lp-checklist span.done::before {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.lp-progress-row {
  margin-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
}

.lp-progress {
  flex: 1;
  height: 0.6rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.lp-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.lp-progress-row small {
  font-size: 0.8rem;
  color: #475569;
}

.lp-float {
  position: absolute;
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.38rem 0.7rem;
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
}

.lp-float-a {
  background: #4058da;
  left: -0.5rem;
  top: 1rem;
  z-index: 20;
}

.lp-float-b {
  background: #0f766e;
  right: -0.4rem;
  bottom: 1rem;
  z-index: 20;
}

@media (prefers-reduced-motion: reduce) {
  .lp-stage-frame {
    animation: none;
  }

  .lp-stage-dashboard {
    opacity: 1;
    transform: none;
  }
}

.lp-section {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}

.lp-section-alt {
  background: var(--color-surface-soft);
}

.lp-section + .lp-section {
  border-top: 1px solid var(--color-border-subtle);
}

.lp-heading-block {
  margin-bottom: 2rem;
}

.lp-section-title {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  font-weight: 800;
  margin-bottom: 0.85rem;
  color: var(--color-text-strong);
  max-width: 22ch;
}

.lp-heading-block.text-center .lp-section-title {
  margin-left: auto;
  margin-right: auto;
}

.lp-problem-list {
  display: grid;
  gap: 0.9rem;
}

.lp-problem-item {
  position: relative;
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: 0.85rem;
  padding: 0.95rem 1rem 0.95rem 2.4rem;
  color: var(--color-text);
}

.lp-problem-item::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-50%);
}

.lp-step {
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.9rem;
  padding: 1.1rem;
  background: var(--color-surface-elev);
}

.lp-step-number {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fdfdff;
  background: var(--color-primary);
  margin-bottom: 1.1rem;
}

.lp-step h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 0.55rem;
  line-height: 1.2;
}

.lp-step p {
  color: var(--color-text-muted);
  margin: 0;
}

.lp-benefit {
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  height: 100%;
  color: var(--color-text);
  font-weight: 500;
}

.lp-who-card {
  height: 100%;
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: 0.95rem;
  padding: 1rem 1.05rem;
}

.lp-who-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 0.35rem;
}

.lp-who-card p {
  margin: 0;
  color: #475569;
}

.lp-usecases {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.58rem;
}

.lp-secondary-line {
  color: #64748b;
  margin-bottom: 0.75rem;
}

.lp-audience-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.lp-audience-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d7e3ff;
  background: #ffffff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.62rem;
}

.lp-audience-label.active {
  border-color: #4058da;
  background: #e9f1ff;
  color: var(--color-primary-deep);
}

.lp-usecases li {
  color: #334155;
}

.lp-flow-panel {
  background: #fff;
  border: 1px solid #dbe7ff;
  border-radius: 1rem;
  overflow: hidden;
}

.lp-flow-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid #edf2ff;
}

.lp-flow-row:first-child {
  border-top: 0;
}

.lp-flow-row strong {
  color: var(--color-text-strong);
}

.lp-flow-row span {
  color: #475569;
}

.lp-client-list {
  margin: 1rem 0 1.45rem;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
}

.lp-client-list li {
  color: #334155;
}

.lp-client-preview {
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--color-surface-elev);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.lp-client-header {
  background: #e9f1ff;
  color: #1e3a8a;
  font-weight: 600;
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.lp-client-header small {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.lp-client-workspace {
  padding: 0.9rem;
  display: grid;
  grid-template-columns: 1.05fr 1.45fr;
  gap: 0.8rem;
}

.lp-client-hierarchy,
.lp-client-fields {
  border: 1px solid #e3ecfb;
  border-radius: 0.8rem;
  background: #fcfdff;
  padding: 0.55rem;
}

.lp-client-h-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: #334155;
  padding: 0.4rem 0.45rem;
  border-radius: 0.5rem;
  margin-bottom: 0.22rem;
}

.lp-client-h-node:last-child {
  margin-bottom: 0;
}

.lp-client-h-node.active {
  background: #e5efff;
  color: #4058da;
  font-weight: 600;
}

.lp-client-h-node small {
  font-size: 0.68rem;
  color: #64748b;
}

.lp-client-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #e6eefc;
  border-radius: 0.55rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
  background: #fff;
}

.lp-client-field:last-of-type {
  margin-bottom: 0.5rem;
}

.lp-client-field strong {
  font-size: 0.78rem;
  color: var(--color-text-strong);
  font-weight: 600;
}

.lp-client-field small {
  font-size: 0.7rem;
  color: #64748b;
}

.lp-client-field small.is-complete {
  color: #0f766e;
}

.lp-client-field small.is-missing {
  color: #b91c1c;
}

.lp-client-progress-wrap label {
  font-size: 0.72rem;
  color: #64748b;
  display: block;
  margin-bottom: 0.25rem;
}

.lp-client-progress-bar {
  height: 0.48rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.lp-client-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.lp-client-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid #eef2f7;
}

.lp-client-item span {
  color: var(--color-text-strong);
}

.lp-client-item span.done {
  color: #0f766e;
}

.lp-client-item small {
  font-size: 0.8rem;
  color: #64748b;
}

#pricing.lp-section-alt {
  background: var(--color-primary-soft);
}

.lp-pricing-card {
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(64, 88, 218, 0.28);
}

/* Wrapper used only when the catalog has a single plan — sizes the card
   sensibly (no full-width spread on large screens) without relying on a
   Bootstrap row that can leave the column hanging on the left. */
.lp-pricing-single-wrap {
  width: 100%;
  max-width: 32rem;
}

.lp-pricing-card-refined .lp-pricing-top {
  padding: 1.5rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
}

.lp-pricing-card-refined .lp-pricing-features {
  padding: 1.2rem 1.5rem 1.5rem;
}

.lp-pricing-urgency {
  font-size: 0.82rem;
  color: var(--color-primary-deep);
  font-weight: 600;
}

.lp-pricing-cta {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lp-pricing-cta span {
  margin-left: 0.32rem;
}

.lp-pricing-reassurance {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: #64748b;
  text-align: center;
}

.lp-plan-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-deep);
  margin-bottom: 0.55rem;
}

.lp-plan-price {
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1;
}

.lp-plan-price span {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.lp-plan-list {
  margin: 0 0 1.2rem;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
}

.lp-plan-list li {
  color: #1f2937;
  margin-bottom: 0.25rem;
  position: relative;
  padding-left: 1.7rem;
  line-height: 1.35;
}

.lp-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-surface-elev);
  background: var(--color-primary);
}

.lp-pricing-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.lp-security-panel {
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-primary-soft);
  padding: 1.45rem;
}

.lp-security-panel h3 {
  font-size: 1.2rem;
  margin-bottom: 0.45rem;
  color: var(--color-text-strong);
}

.lp-security-panel p {
  color: var(--color-text-muted);
}

.lp-faq {
  max-width: 900px;
  margin: 0 auto;
}

.lp-faq .accordion-item {
  border: 1px solid var(--color-border);
  border-radius: 0.7rem;
  overflow: hidden;
  margin-bottom: 0.72rem;
}

.lp-faq .accordion-button {
  font-weight: 600;
}

.lp-faq .accordion-button:not(.collapsed) {
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
}

.lp-final-cta {
  background: var(--color-primary);
  color: #fdfdff;
  padding: clamp(5rem, 10vw, 8rem) 0;
}

.lp-final-cta h2 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1.02;
  margin-bottom: 1.6rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

.lp-final-cta .btn {
  margin-bottom: 0.95rem;
}

.lp-final-cta .btn-primary {
  background: #fdfdff;
  border-color: #fdfdff;
  color: var(--color-primary-deep);
  font-weight: 700;
  padding: 0.85rem 2rem;
}

.lp-final-cta .btn-primary:hover,
.lp-final-cta .btn-primary:focus-visible {
  background: var(--color-primary-tint);
  border-color: var(--color-primary-tint);
  color: var(--color-primary-deep);
}

.lp-final-cta p {
  color: var(--color-primary-tint);
  font-size: 0.95rem;
}

html[data-theme="dark"] .lp-final-cta {
  background: var(--color-primary-soft);
  color: var(--color-text-strong);
  border-top: 1px solid var(--color-border);
}

html[data-theme="dark"] .lp-final-cta h2 {
  color: var(--color-text-strong);
}

html[data-theme="dark"] .lp-final-cta .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fdfdff;
}

html[data-theme="dark"] .lp-final-cta .btn-primary:hover,
html[data-theme="dark"] .lp-final-cta .btn-primary:focus-visible {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  color: #fdfdff;
}

html[data-theme="dark"] .lp-final-cta p {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .lp-hero {
  background:
    radial-gradient(140% 120% at 90% 0%, rgba(64, 88, 218, 0.18) 0%, rgba(64, 88, 218, 0) 58%),
    var(--color-surface-canvas);
}

html[data-theme="dark"] .marketing-header {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
}

html[data-theme="dark"] .marketing-nav-links .nav-link {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .marketing-nav-links .nav-link:hover,
html[data-theme="dark"] .marketing-nav-links .nav-link:focus-visible {
  color: var(--color-text-strong);
  background: var(--color-primary-soft);
}

html[data-theme="dark"] .marketing-nav-toggler {
  border-color: var(--color-border);
}

html[data-theme="dark"] .lp-section-alt {
  background: var(--color-surface-soft);
}

html[data-theme="dark"] #pricing.lp-section-alt {
  background: var(--color-primary-soft);
}

html[data-theme="dark"] .lp-section + .lp-section {
  border-top-color: #1e2b3d;
}

html[data-theme="dark"] .lp-hero-title,
html[data-theme="dark"] .lp-section-title,
html[data-theme="dark"] .lp-client-item span,
html[data-theme="dark"] .lp-plan-price {
  color: #e5e7eb;
}

html[data-theme="dark"] .lp-hero-subtitle,
html[data-theme="dark"] .lp-trustline,
html[data-theme="dark"] .lp-step p,
html[data-theme="dark"] .lp-flow-row span,
html[data-theme="dark"] .lp-client-list li,
html[data-theme="dark"] .lp-secondary-line,
html[data-theme="dark"] .lp-pricing-note,
html[data-theme="dark"] .lp-security-panel p,
html[data-theme="dark"] .lp-who-card p,
html[data-theme="dark"] .lp-product-head small,
html[data-theme="dark"] .lp-dashboard-bars label,
html[data-theme="dark"] .lp-checklist-item em {
  color: #c0cadb;
}

html[data-theme="dark"] .lp-step,
html[data-theme="dark"] .lp-benefit,
html[data-theme="dark"] .lp-problem-item,
html[data-theme="dark"] .lp-flow-panel,
html[data-theme="dark"] .lp-client-preview,
html[data-theme="dark"] .lp-pricing-card,
html[data-theme="dark"] .lp-security-panel,
html[data-theme="dark"] .lp-faq .accordion-item,
html[data-theme="dark"] .lp-who-card,
html[data-theme="dark"] .lp-product-mockup {
  background: #111c2e;
  border-color: #2a3a52;
}

html[data-theme="dark"] .lp-pricing-card-refined .lp-pricing-top {
  border-bottom-color: #2a3a52;
}

html[data-theme="dark"] .lp-window-header,
html[data-theme="dark"] .lp-panel,
html[data-theme="dark"] .lp-client-header,
html[data-theme="dark"] .lp-faq .accordion-button:not(.collapsed),
html[data-theme="dark"] .lp-product-head {
  background: #16263d;
}

html[data-theme="dark"] .lp-product-head strong,
html[data-theme="dark"] .lp-builder-row,
html[data-theme="dark"] .lp-checklist-item {
  color: #dbe5f2;
}

html[data-theme="dark"] .lp-line {
  background: #223a5b;
}

html[data-theme="dark"] .lp-audience-label {
  background: #132036;
  border-color: #2b3f5f;
  color: #b5c6df;
}

html[data-theme="dark"] .lp-audience-label.active {
  background: var(--color-primary-deep);
  border-color: var(--color-primary);
  color: var(--color-primary-tint);
}

html[data-theme="dark"] .lp-flow-row,
html[data-theme="dark"] .lp-client-item,
html[data-theme="dark"] .lp-builder-row,
html[data-theme="dark"] .lp-checklist-item {
  border-color: #22344e;
}

html[data-theme="dark"] .lp-client-workspace,
html[data-theme="dark"] .lp-client-hierarchy,
html[data-theme="dark"] .lp-client-fields,
html[data-theme="dark"] .lp-client-field {
  background: var(--color-surface-elev);
  border-color: var(--color-border);
}

html[data-theme="dark"] .lp-plan-list li::before {
  background: var(--color-primary);
}

html[data-theme="dark"] .lp-client-field strong,
html[data-theme="dark"] .lp-client-h-node {
  color: #dbe5f2;
}

html[data-theme="dark"] .lp-client-h-node.active {
  background: var(--color-primary-deep);
  color: var(--color-primary-tint);
}

html[data-theme="dark"] .lp-mini-row,
html[data-theme="dark"] .lp-mini-outline,
html[data-theme="dark"] .lp-mini-props,
html[data-theme="dark"] .lp-mini-canvas,
html[data-theme="dark"] .lp-mini-client-nav,
html[data-theme="dark"] .lp-mini-client-content,
html[data-theme="dark"] .lp-mini-field {
  background: #0f1f36;
  border-color: #22344e;
}

html[data-theme="dark"] .lp-mini-prop-line,
html[data-theme="dark"] .lp-mini-progress div {
  background: #22344e;
}

@media (max-width: 991.98px) {
  .marketing-navbar {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  .marketing-nav-collapse {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid #e7eefb;
  }

  .marketing-nav-links {
    margin: 0;
    gap: 0.05rem;
  }

  .marketing-nav-links .nav-link {
    padding: 0.62rem 0.2rem;
    border-radius: 0.35rem;
  }

  .marketing-nav-actions {
    margin-left: 0;
    margin-top: 0.6rem;
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.45rem !important;
  }

  .marketing-nav-actions .btn {
    width: 100%;
  }

  .lp-hero {
    padding: 4.4rem 0 3.2rem;
  }

  .lp-hero-visual {
    min-height: 320px;
  }

  .lp-stage {
    height: 300px;
  }

  .lp-mockup-builder {
    width: 76%;
  }

  .lp-mockup-checklist {
    width: 64%;
    top: 42%;
  }

  .lp-mockup-dashboard {
    width: 74%;
    left: 8%;
  }

  .lp-float-a {
    left: 0.35rem;
  }

  .lp-float-b {
    right: 0.35rem;
  }
}

@media (max-width: 767.98px) {
  .lp-section {
    padding: 3.3rem 0;
  }

  .lp-hero {
    padding: 3.7rem 0 2.7rem;
  }

  .lp-hero-visual {
    min-height: 280px;
  }

  .lp-stage {
    height: auto;
  }

  .lp-stage-frame {
    display: none;
    position: static;
    inset: auto;
    transform: none;
    animation: none;
  }

  .lp-stage-dashboard {
    display: block;
    opacity: 1;
  }

  .lp-dashboard-bars div {
    grid-template-columns: 80px 1fr;
  }

  .lp-mini-builder,
  .lp-mini-client,
  .lp-client-workspace {
    grid-template-columns: 1fr;
  }

  .lp-float {
    position: static;
    display: inline-block;
    margin-top: 0.75rem;
  }

  .lp-flow-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.py-lg-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.auth-shell {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
  min-height: 100vh;
}

.auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 2rem 0;
}

.auth-card {
  border-radius: 1rem;
  max-width: 980px;
  margin: 0 auto;
}

.auth-card .row {
  row-gap: 1rem;
}

.auth-card h1 {
  margin-bottom: 0.75rem;
}

.auth-card .form-floating > label {
  text-align: start;
}

.auth-card .btn {
  white-space: nowrap;
}

.auth-form-shell {
  max-width: 460px;
}

.app-shell {
  background-color: var(--app-bg);
  color: var(--app-text);
}

.app-layout {
  min-height: 100vh;
  display: flex;
}

.app-sidebar {
  width: 250px;
  background-color: var(--app-surface);
  padding: 1.25rem 1rem;
  flex-shrink: 0;
  border-color: var(--app-border) !important;
}

.app-sidebar-brand {
  margin-bottom: 1.5rem;
}

.app-sidebar .nav-link {
  color: var(--app-text-muted);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

.app-sidebar .nav-link:hover {
  background-color: var(--app-nav-hover);
  color: var(--app-text);
}

.app-sidebar .nav-link.active {
  background-color: var(--app-nav-active);
  color: var(--app-nav-active-text);
}

.app-nav-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #334155;
}

.app-sidebar .nav-link.active .app-nav-counter {
  background: rgba(255, 255, 255, 0.25);
  color: currentColor;
}

.app-brand-link {
  color: var(--app-text);
}

.app-brand-title {
  font-weight: 600;
  color: var(--app-text);
}

.app-brand-subtitle,
.app-sidebar-group-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--app-text-muted);
}

.app-main {
  flex: 1;
  min-width: 0;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--app-surface);
  border-color: var(--app-border) !important;
}

.topbar-search-wrap {
  max-width: 420px;
  width: 100%;
}

.topbar-search {
  background-color: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

.app-topbar-actions .topbar-icon-btn,
.profile-trigger {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
}

.app-topbar-actions .topbar-icon-btn:hover,
.profile-trigger:hover {
  background: var(--app-nav-hover);
  color: var(--app-text);
}

.theme-icon-dark {
  display: none;
}

html[data-theme="dark"] .theme-icon-light {
  display: none;
}

html[data-theme="dark"] .theme-icon-dark {
  display: inline-flex;
}

.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7d8cff, #4f46e5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.app-profile-menu {
  border-radius: 0.75rem;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  min-width: 220px;
}

.app-profile-menu .dropdown-header {
  color: var(--app-text-muted);
}

.app-profile-menu .dropdown-item {
  color: var(--app-text);
}

.app-profile-menu .dropdown-item:hover {
  background: var(--app-nav-hover);
}

.app-profile-menu .dropdown-divider {
  border-color: var(--app-border);
}

.app-content {
  max-width: 100%;
}

.app-shell .card {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

.app-shell .card-header {
  background-color: var(--app-surface-soft);
  border-color: var(--app-border);
}

.app-shell .card-header.bg-white {
  background-color: var(--app-surface-soft) !important;
}

.app-shell .table,
.app-shell .table th,
.app-shell .table td {
  color: var(--app-text);
}

.app-shell .table thead th {
  color: var(--app-text-muted);
  border-bottom-color: var(--app-border);
}

.app-shell .table td {
  border-color: var(--app-border);
}

.app-shell .text-muted,
.app-shell .small.text-muted {
  color: var(--app-text-muted) !important;
}

.app-shell .form-control,
.app-shell .form-select {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.app-shell .form-control:disabled {
  background-color: var(--app-surface-soft);
}

.app-shell .btn-outline-secondary {
  border-color: var(--app-border);
  color: var(--app-text-muted);
}

.app-shell .btn-outline-secondary:hover {
  background-color: var(--app-nav-hover);
  color: var(--app-text);
}

.app-shell .btn-outline-dark {
  border-color: var(--app-border);
  color: var(--app-text);
}

.app-shell .btn-outline-dark:hover {
  background-color: var(--app-nav-hover);
  border-color: var(--app-border);
  color: var(--app-text);
}

.app-shell .text-bg-light {
  background-color: color-mix(in srgb, var(--app-surface-soft) 80%, #ffffff 20%) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
}

.app-shell .shadow-sm {
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.12) !important;
}

@media (max-width: 991.98px) {
  .app-layout {
    flex-direction: column;
  }

  .app-sidebar {
    width: 100%;
    border-right: 0 !important;
    border-bottom: 1px solid #dee2e6;
  }
}

.dashboard-header h1 {
  letter-spacing: -0.01em;
}

.dashboard-kpi {
  border-radius: 0.85rem;
}

.dashboard-kpi .kpi-value {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 700;
}

.dashboard-main .card {
  border-radius: 0.85rem;
}

.attention-item {
  border: 1px solid #eef1f6;
  border-radius: 0.65rem;
  padding: 0.625rem 0.75rem;
  background-color: #fff;
}

.attention-item:hover {
  background-color: #f8faff;
}

.dashboard-table > :not(caption) > * > * {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.dashboard-table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #6c757d;
}

.clients-header h1 {
  letter-spacing: -0.01em;
}

.clients-controls.card {
  border-radius: 0.85rem;
}

.clients-table > :not(caption) > * > * {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  vertical-align: middle;
}

.clients-table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #6c757d;
  border-top: 0;
}

.clients-table-wrap {
  overflow: visible;
}

.clients-table .dropdown-menu {
  z-index: 1085;
}

.template-builder-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.6fr) minmax(260px, 1fr);
  gap: 1rem;
}

.template-pane {
  min-height: 560px;
}

.template-outline-list .list-group-item {
  border-radius: 0.55rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--app-border);
}

.template-outline-list .list-group-item.active {
  border-color: #5a6bf0;
}

.template-canvas-item {
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
  padding: 0.75rem 0.8rem;
  background: var(--app-surface);
}

.template-canvas-item.selected {
  border-color: #5a6bf0;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.request-wizard-steps .card-body {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.request-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.request-step {
  border: 1px solid var(--app-border);
  border-radius: 0.7rem;
  padding: 0.55rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--app-text-muted);
  background: var(--app-surface-soft);
}

.request-step-index {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  font-size: 0.76rem;
  font-weight: 600;
}

.request-step-label {
  font-size: 0.84rem;
  font-weight: 600;
}

.request-step.current {
  color: #4f46e5;
  border-color: #b8d2ff;
  background: color-mix(in srgb, #eef4ff 78%, var(--app-surface) 22%);
}

.request-step.done {
  color: #0f766e;
  border-color: #99f6e4;
  background: color-mix(in srgb, #ecfeff 78%, var(--app-surface) 22%);
}

/* Stepper clickable variants: when a step is unlocked but not current, it renders
   as a <button> instead of a <div>. Reset native button chrome and give it a
   pointer + subtle hover lift so it reads as navigable. */
button.request-step.request-step-clickable {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

button.request-step.request-step-clickable:hover,
button.request-step.request-step-clickable:focus-visible {
  border-color: #b8d2ff;
  background: color-mix(in srgb, #eef4ff 60%, var(--app-surface) 40%);
  transform: translateY(-1px);
  outline: none;
}

/* Locked step: not reachable yet. Dim text + index circle, no hover affordance. */
.request-step.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.request-step.locked .request-step-index {
  background: var(--app-surface-soft);
  border-style: dashed;
}

.request-builder-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.55fr) minmax(260px, 1fr);
  gap: 1rem;
}

.request-template-card {
  border-color: var(--app-border) !important;
}

.request-template-card:hover {
  border-color: #b6d1ff !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
}

.definition-builder-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(520px, 1.8fr) minmax(260px, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.definition-pane {
  min-height: 620px;
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  overflow: hidden;
}

.definition-pane .card-header {
  padding: 0.95rem 1rem 0.8rem;
  border-bottom: 1px solid var(--app-border);
}

.definition-pane .card-body {
  padding: 0.9rem;
}

.definition-outline-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.definition-outline-page {
  border: 1px solid color-mix(in srgb, var(--app-border) 85%, transparent 15%);
  border-radius: 0.75rem;
  padding: 0.65rem;
  background: var(--app-surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.definition-outline-page.is-dragging,
.definition-outline-section-wrap.is-dragging,
.js-field-item.is-dragging {
  opacity: 0.6;
}

.js-selectable {
  cursor: pointer;
}

.definition-outline-page.drag-over-top,
.definition-outline-section-wrap.drag-over-top,
.js-field-item.drag-over-top {
  box-shadow: inset 0 3px 0 rgba(59, 130, 246, 0.8);
}

.definition-outline-page.drag-over-bottom,
.definition-outline-section-wrap.drag-over-bottom,
.js-field-item.drag-over-bottom {
  box-shadow: inset 0 -3px 0 rgba(59, 130, 246, 0.8);
}

.definition-outline-page.selected {
  border-color: color-mix(in srgb, #5a6bf0 65%, var(--app-border) 35%);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  background: color-mix(in srgb, var(--app-surface) 92%, #eaf1ff 8%);
}

.definition-outline-page.selected.drag-over-top,
.definition-outline-section-wrap.selected.drag-over-top,
.js-field-item.selected.drag-over-top {
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.12),
    inset 0 4px 0 rgba(37, 99, 235, 0.95);
}

.definition-outline-page.selected.drag-over-bottom,
.definition-outline-section-wrap.selected.drag-over-bottom,
.js-field-item.selected.drag-over-bottom {
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.12),
    inset 0 -4px 0 rgba(37, 99, 235, 0.95);
}

.definition-outline-sections {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-top: 0.35rem;
  padding-left: 0.55rem;
  border-left: 2px solid color-mix(in srgb, var(--app-border) 70%, transparent 30%);
}

.definition-outline-page:not(.expanded) > .definition-outline-sections {
  display: none;
}

.definition-outline-page-head {
  margin-bottom: 0.35rem;
}

.definition-outline-page:not(.expanded) > .definition-outline-page-head {
  margin-bottom: 0;
}

.definition-outline-page-caret {
  font-size: 0.8rem;
  color: var(--app-text-muted);
  transition: transform 0.15s ease;
}

.definition-outline-page:not(.expanded) .definition-outline-page-caret {
  transform: rotate(-90deg);
}

.definition-outline-section-wrap {
  border-radius: 0.6rem;
  padding: 0.2rem 0.2rem 0.2rem 0.28rem;
}

.definition-outline-section-wrap.selected {
  background: color-mix(in srgb, #eff6ff 66%, var(--app-surface) 34%);
}

.definition-outline-section {
  border: 1px solid var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
  border-radius: 0.55rem;
  padding: 0.36rem 0.55rem;
  text-align: left;
  font-size: 0.84rem;
  width: 100%;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.definition-outline-section.selected {
  border-color: #5a6bf0;
  background: color-mix(in srgb, #eff6ff 80%, var(--app-surface) 20%);
}

.definition-outline-fields {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.35rem;
  padding-left: 0.55rem;
  border-left: 1px dashed color-mix(in srgb, var(--app-border) 60%, transparent 40%);
}

.preview-lock-banner {
  border: 1px solid color-mix(in srgb, var(--app-border) 85%, transparent 15%);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--app-surface-soft) 78%, var(--app-surface) 22%);
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  margin-bottom: 0.8rem;
}

.preview-workspace {
  display: grid;
  grid-template-columns: 280px minmax(760px, 980px);
  justify-content: start;
  gap: 1.2rem;
  align-items: start;
}

.preview-outline {
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  background: var(--app-surface);
  overflow: hidden;
  position: sticky;
  top: 1rem;
}

.preview-outline-head {
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--app-border);
}

.preview-outline-request-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.preview-outline-request-meta {
  color: var(--app-text-muted);
  font-size: 0.82rem;
  margin-top: 0.22rem;
}

.preview-outline-list {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-outline-page-btn {
  width: 100%;
  border: 1px solid var(--app-border);
  border-radius: 0.7rem;
  background: var(--app-surface-soft);
  color: var(--app-text);
  padding: 0.48rem 0.58rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.preview-outline-page-btn.active {
  border-color: #5a6bf0;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.preview-outline-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.preview-outline-sections {
  margin-top: -0.15rem;
  padding-left: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.preview-outline-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--app-text-muted);
  padding: 0.22rem 0.1rem 0.22rem 0.25rem;
}

.preview-outline-section-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--app-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.22rem 0.1rem 0.22rem 0.25rem;
  border-radius: 0.45rem;
  text-align: left;
}

.preview-outline-section-btn:hover {
  background: color-mix(in srgb, #5a6bf0 10%, transparent 90%);
}

.preview-outline-section-btn.active {
  background: color-mix(in srgb, #5a6bf0 16%, var(--app-surface) 84%);
  color: var(--app-text);
}

.preview-outline-fields-list {
  margin: 0.1rem 0 0.2rem 0.65rem;
  padding-left: 0.55rem;
  border-left: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent 30%);
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.preview-outline-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--app-text);
  padding: 0.16rem 0.08rem 0.16rem 0.2rem;
}

.preview-progress-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--app-border) 90%, transparent 10%);
  background: var(--app-surface-soft);
  display: inline-block;
  flex: 0 0 1rem;
}

.preview-progress-dot.done {
  border-color: color-mix(in srgb, #16a34a 65%, var(--app-border) 35%);
  background: color-mix(in srgb, #22c55e 30%, var(--app-surface) 70%);
}

.preview-canvas {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 980px;
}

.preview-page-card {
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  background: var(--app-surface);
  padding: 1.15rem;
}

.preview-page-head,
.preview-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.preview-section-card {
  border: 1px solid color-mix(in srgb, var(--app-border) 86%, transparent 14%);
  border-radius: 0.95rem;
  background: var(--app-surface);
  padding: 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.preview-page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent 16%);
  border-radius: 0.7rem;
  padding: 0.45rem 0.55rem;
  background: var(--app-surface-soft);
  margin-bottom: 0.75rem;
}

.preview-section-flow-actions {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}

.preview-field-card {
  border: 1px solid color-mix(in srgb, var(--app-border) 90%, transparent 10%);
  border-radius: 0.85rem;
  background: var(--app-surface);
  padding: 1rem 1rem 0.9rem;
}

.preview-field-footer {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--app-border) 75%, transparent 25%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.preview-upload-box {
  position: relative;
}

.preview-upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.preview-upload-label {
  border: 1px dashed color-mix(in srgb, var(--app-border) 72%, transparent 28%);
  border-radius: 0.7rem;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--app-surface-soft) 68%, var(--app-surface) 32%);
}

.preview-upload-title {
  font-weight: 600;
  color: var(--app-text);
}

.preview-upload-sub {
  font-size: 0.84rem;
  color: var(--app-text-muted);
}

.preview-summary-card {
  border: 1px solid var(--app-border);
  border-radius: 0.95rem;
  background: var(--app-surface);
  padding: 1rem;
}

.preview-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.preview-summary-stat {
  border: 1px solid color-mix(in srgb, var(--app-border) 88%, transparent 12%);
  border-radius: 0.75rem;
  background: var(--app-surface-soft);
  padding: 0.8rem;
}

.preview-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.preview-summary-body {
  border: 1px solid color-mix(in srgb, var(--app-border) 86%, transparent 14%);
  border-radius: 0.75rem;
  padding: 0.8rem;
  background: var(--app-surface-soft);
}

.preview-outstanding-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.preview-outstanding-item {
  border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent 20%);
  border-radius: 0.55rem;
  padding: 0.42rem 0.55rem;
  background: var(--app-surface);
  font-size: 0.88rem;
}

.preview-outstanding-item.done {
  border-color: color-mix(in srgb, #22c55e 45%, var(--app-border) 55%);
}

@media (max-width: 1200px) {
  .preview-workspace {
    grid-template-columns: 1fr;
  }

  .preview-outline {
    position: static;
  }

  .preview-summary-stats {
    grid-template-columns: 1fr;
  }
}

.definition-outline-field {
  border: 1px solid var(--app-border);
  background: transparent;
  color: var(--app-text);
  border-radius: 0.5rem;
  padding: 0.26rem 0.48rem;
  text-align: left;
  font-size: 0.79rem;
  width: 100%;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.definition-outline-page .btn,
.definition-outline-section-wrap .btn,
.js-field-item .btn {
  white-space: nowrap;
}

.js-drag-handle {
  font-size: 0.85rem;
  color: var(--app-text-muted);
  cursor: grab;
  user-select: none;
  line-height: 1;
}

.js-drag-handle:active {
  cursor: grabbing;
}

.builder-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

.js-inline-title-input {
  max-width: 220px;
}

.btn-icon-ghost {
  border: 0;
  background: transparent;
  color: var(--app-text-muted);
  padding: 0.1rem 0.2rem;
  line-height: 1;
  border-radius: 0.35rem;
}

.btn-icon-ghost:hover,
.btn-icon-ghost:focus-visible {
  background: color-mix(in srgb, #4f46e5 10%, transparent 90%);
  color: #4f46e5;
  box-shadow: none;
}

.no-caret::after {
  display: none !important;
}

.dropdown-menu .dropdown-item {
  font-size: 0.92rem;
}

.request-actions-menu {
  min-width: 12rem;
  padding: 0.3rem 0;
  border-radius: 0.55rem;
  z-index: 1085;
}

.request-actions-menu .dropdown-item {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.15;
  padding: 0.48rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.request-actions-menu .dropdown-item::before {
  width: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  flex: 0 0 1rem;
}

.request-actions-menu .action-view::before { content: "◉"; }
.request-actions-menu .action-preview::before { content: "◌"; }
.request-actions-menu .action-edit::before { content: "✎"; }
.request-actions-menu .action-publish::before { content: "↥"; }
.request-actions-menu .action-duplicate::before { content: "⧉"; }
.request-actions-menu .action-template::before { content: "▤"; }
.request-actions-menu .action-email::before { content: "✉"; }
.request-actions-menu .action-archive::before { content: "⌵"; }
.request-actions-menu .action-pin::before { content: "★"; }
.request-actions-menu .action-delete::before { content: "✕"; color: #ef4444; }

.request-submenu {
  position: relative;
}

.request-submenu-menu {
  min-width: 14rem;
  z-index: 1090;
  top: 0;
  left: calc(100% - 0.2rem);
  margin-top: 0;
  display: none;
}

.request-submenu-trigger {
  position: relative;
  padding-right: 1.75rem !important;
}

.request-submenu:hover > .request-submenu-menu,
.request-submenu:focus-within > .request-submenu-menu {
  display: block;
}

.request-submenu-item {
  padding-left: 0.9rem !important;
}

.request-template-card,
.request-template-card .card-body,
.request-template-card .dropdown {
  overflow: visible;
}

.request-submenu-trigger::after {
  content: "›";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: #64748b;
}

.rename-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.definition-builder-grid .btn-remove-icon {
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  line-height: 1;
  box-shadow: none !important;
}

.btn-remove-icon:hover,
.btn-remove-icon:focus-visible {
  border: 0 !important;
  background: transparent !important;
  color: #ef4444 !important;
  box-shadow: none !important;
}

.remove-option-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

html[data-theme="dark"] .btn-remove-icon {
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .btn-remove-icon:hover,
html[data-theme="dark"] .btn-remove-icon:focus-visible {
  border: 0 !important;
  background: transparent !important;
  color: #f87171 !important;
}

.builder-inline-edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
}

.definition-canvas-page.selected-direct .builder-inline-edit-btn[data-target-kind="page"],
.definition-canvas-section.selected-direct .builder-inline-edit-btn[data-target-kind="section"],
.definition-canvas-field-card.selected-direct .builder-inline-edit-btn[data-target-kind="field"] {
  display: inline-flex;
}

.definition-outline-field.selected {
  border-color: #5a6bf0;
  background: color-mix(in srgb, #dbeafe 70%, var(--app-surface) 30%);
}

.definition-canvas-page {
  border: 0;
  border-radius: 0.85rem;
  padding: 0.82rem;
  background: var(--app-surface);
  transition: box-shadow 0.18s ease;
}

.definition-canvas-page.selected {
  box-shadow: none;
}

.definition-canvas-sections {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.2rem;
}

.definition-canvas-section {
  border: 1px dashed color-mix(in srgb, var(--app-border) 82%, transparent 18%);
  border-radius: 0.7rem;
  padding: 0.66rem;
  background: color-mix(in srgb, var(--app-surface-soft) 90%, var(--app-surface) 10%);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.definition-canvas-section.selected {
  border-color: color-mix(in srgb, #5a6bf0 55%, var(--app-border) 45%);
  background: color-mix(in srgb, #eff6ff 22%, var(--app-surface-soft) 78%);
}

.definition-canvas-fields {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.definition-canvas-field-card {
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
  padding: 0.58rem;
  background: var(--app-surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.definition-canvas-field-card.selected {
  border-color: color-mix(in srgb, #5a6bf0 62%, var(--app-border) 38%);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.builder-table-grid-wrap {
  border: 1px solid #d6deee;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.55rem;
}

.builder-table-grid {
  margin-bottom: 0;
  min-width: max-content;
}

.builder-table-grid th,
.builder-table-grid td {
  border-color: #cdd7ea;
}

.builder-table-grid th {
  background: #f8fbff;
}

.builder-table-col-wrap {
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.builder-table-col-input {
  border: 0;
  background: transparent;
  font-weight: 600;
  color: #334155;
  box-shadow: none !important;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.builder-table-col-remove,
.builder-table-col-add-cell .btn,
.builder-table-row-action .btn,
.builder-table-controls .btn {
  width: 26px;
  height: 26px;
  line-height: 1;
  padding: 0;
  border: 1px solid #c7d2e7;
  border-radius: 6px;
  color: #475569;
  background: #fff;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.builder-table-col-remove:hover,
.builder-table-col-add-cell .btn:hover,
.builder-table-row-action .btn:hover,
.builder-table-controls .btn:hover {
  background: #f8fbff;
  border-color: #9fb5e6;
  color: #274690;
}

.builder-table-col-add-cell,
.builder-table-row-action {
  width: 42px;
  text-align: center;
  vertical-align: middle;
}

.builder-table-controls {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.35rem;
}

.builder-table-grid td .form-control {
  border: 0;
  background: transparent;
  min-height: 38px;
  box-shadow: none !important;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.definition-selected-card {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: 0.82rem;
  background: var(--app-surface);
}

.quill-editor-wrap {
  border: 1px solid var(--app-border);
  border-radius: 0.55rem;
  overflow: hidden;
  background: #fff;
}

/* ===== CKEditor 5 (Classic) — site-wide styling ===== */
.quill-editor-wrap .ck.ck-editor,
.app-rich-editor .ck.ck-editor {
  width: 100%;
}

.quill-editor-wrap .ck.ck-editor__main > .ck-editor__editable,
.app-rich-editor .ck.ck-editor__main > .ck-editor__editable {
  min-height: 14rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--app-text);
  background: #fff;
  border: 0;
  padding: 0.85rem 0.95rem;
}

.quill-editor-wrap .ck.ck-toolbar,
.app-rich-editor .ck.ck-toolbar {
  border: 0;
  border-bottom: 1px solid var(--app-border);
  background: #f7f9fc;
  padding: 0.4rem 0.5rem;
}

.quill-editor-wrap .ck.ck-editor__main > .ck-editor__editable.ck-focused,
.app-rich-editor .ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.quill-editor-wrap .ck.ck-editor__editable_inline > :first-child,
.app-rich-editor .ck.ck-editor__editable_inline > :first-child {
  margin-top: 0;
}

.quill-editor-wrap .ck.ck-editor__editable_inline > :last-child,
.app-rich-editor .ck.ck-editor__editable_inline > :last-child {
  margin-bottom: 0;
}

/* ===== CKEditor 5 — dark theme by overriding its own --ck-* variables.
   Covers every CKEditor instance in the app (builder lab, settings,
   client request) plus its detached pieces (balloon panels, dropdowns,
   tooltips) which render outside the wrapper into document.body. */
:is(html[data-theme="dark"], html.dark) .ck,
:is(html[data-theme="dark"], html.dark) .ck.ck-balloon-panel,
:is(html[data-theme="dark"], html.dark) .ck.ck-tooltip,
:is(html[data-theme="dark"], html.dark) .ck-body-wrapper {
  --ck-color-base-foreground: #1a2236;
  --ck-color-base-background: #182843;
  --ck-color-base-border: #2a3a53;
  --ck-color-base-text: #e7ecf5;
  --ck-color-base-active: #5b7cfa;
  --ck-color-base-active-focus: #7d95ff;
  --ck-color-base-focus: rgba(125, 149, 255, 0.4);
  --ck-color-text: #e7ecf5;
  --ck-color-shadow-drop: rgba(0, 0, 0, 0.45);
  --ck-color-shadow-inner: rgba(0, 0, 0, 0.35);

  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: rgba(125, 149, 255, 0.18);
  --ck-color-button-default-active-background: rgba(125, 149, 255, 0.26);
  --ck-color-button-default-disabled-background: transparent;

  --ck-color-button-on-background: rgba(125, 149, 255, 0.22);
  --ck-color-button-on-hover-background: rgba(125, 149, 255, 0.32);
  --ck-color-button-on-active-background: rgba(125, 149, 255, 0.38);
  --ck-color-button-on-color: #ffffff;
  --ck-color-button-on-disabled-background: rgba(125, 149, 255, 0.12);

  --ck-color-button-action-background: #5b7cfa;
  --ck-color-button-action-hover-background: #7d95ff;
  --ck-color-button-action-active-background: #4868e8;
  --ck-color-button-action-text: #ffffff;

  --ck-color-toolbar-background: #1c2841;
  --ck-color-toolbar-border: #2a3a53;

  --ck-color-input-background: #16223a;
  --ck-color-input-border: #2a3a53;
  --ck-color-input-disabled-background: #131c30;
  --ck-color-input-disabled-border: #2a3a53;
  --ck-color-input-disabled-text: #6c7d9a;
  --ck-color-input-text: #e7ecf5;

  --ck-color-list-background: #1c2841;
  --ck-color-list-button-hover-background: rgba(125, 149, 255, 0.18);
  --ck-color-list-button-on-background: rgba(125, 149, 255, 0.28);
  --ck-color-list-button-on-background-focus: rgba(125, 149, 255, 0.36);
  --ck-color-list-button-on-text: #ffffff;

  --ck-color-dropdown-panel-background: #1c2841;
  --ck-color-dropdown-panel-border: #2a3a53;

  --ck-color-panel-background: #1c2841;
  --ck-color-panel-border: #2a3a53;

  --ck-color-tooltip-background: #0f172a;
  --ck-color-tooltip-text: #e7ecf5;

  --ck-color-link-default: #a8bcff;
  --ck-color-link-selected-background: rgba(125, 149, 255, 0.22);

  --ck-color-labeled-field-label-background: #1c2841;

  --ck-focus-ring: 1px solid rgba(125, 149, 255, 0.55);
  --ck-focus-outer-shadow: 0 0 0 2px rgba(125, 149, 255, 0.25);
  --ck-inner-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) inset;
}

/* Force the editable content surface dark — CKEditor inlines a white bg on it. */
:is(html[data-theme="dark"], html.dark) .ck.ck-editor__main > .ck-editor__editable,
:is(html[data-theme="dark"], html.dark) .ck-content {
  background: #16223a;
  color: #e7ecf5;
}

:is(html[data-theme="dark"], html.dark) .ck-content a {
  color: #a8bcff;
}

.quill-editor-wrap .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--app-border);
  background: #f7f9fc;
  padding: 0.45rem 0.5rem;
}

.quill-editor-wrap .ql-container.ql-snow {
  border: 0;
}

.quill-editor-wrap .ql-editor {
  min-height: 14rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--app-text);
}

.quill-editor-wrap .ql-picker.ql-header {
  min-width: 6.5rem;
}

.definition-canvas-field-card .quill-editor-wrap {
  width: 100%;
}

.field-type-group {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: var(--app-surface);
}

.field-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 108px));
  gap: 0.35rem;
  justify-content: start;
}

.field-type-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 108px;
  height: 108px;
  min-height: 108px;
  text-align: center;
  border: 1px solid #dbe4f5;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #1f2937;
  padding: 0.34rem 0.28rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.field-type-option-card:hover,
.field-type-option-card:focus-visible {
  border-color: #9db5ff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.16);
  transform: translateY(-1px);
}

.field-type-option-icon {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #55627b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
}

.field-type-option-icon i {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
}


.field-type-option-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  align-items: center;
}

.field-type-option-copy strong {
  font-size: 0.67rem;
  font-weight: 650;
  color: #1f2937;
  line-height: 1.05;
}

.field-type-option-copy small {
  margin-top: 0.04rem;
  color: #64748b;
  font-size: 0.6rem;
  line-height: 1;
}

.definition-builder-grid .btn-sm {
  padding: 0.28rem 0.58rem;
  font-size: 0.77rem;
  font-weight: 600;
}

.definition-builder-grid .builder-add-field-btn {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
}

.definition-builder-grid .builder-add-field-btn:hover,
.definition-builder-grid .builder-add-field-btn:focus-visible {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #312e81;
}

.definition-builder-grid .builder-add-section-btn {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #6d28d9;
}

.definition-builder-grid .builder-add-section-btn:hover,
.definition-builder-grid .builder-add-section-btn:focus-visible {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}

html[data-theme="dark"] .definition-builder-grid .builder-add-field-btn {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.42);
  color: #bfdbfe;
}

html[data-theme="dark"] .definition-builder-grid .builder-add-field-btn:hover,
html[data-theme="dark"] .definition-builder-grid .builder-add-field-btn:focus-visible {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(147, 197, 253, 0.58);
  color: #dbeafe;
}

html[data-theme="dark"] .definition-builder-grid .builder-add-section-btn {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(167, 139, 250, 0.42);
  color: #ddd6fe;
}

html[data-theme="dark"] .definition-builder-grid .builder-add-section-btn:hover,
html[data-theme="dark"] .definition-builder-grid .builder-add-section-btn:focus-visible {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(196, 181, 253, 0.58);
  color: #ede9fe;
}

html[data-theme="dark"] .field-type-option-card {
  background: #0f172a;
  border-color: #31435f;
  color: #e2e8f0;
}

html[data-theme="dark"] .field-type-option-card:hover,
html[data-theme="dark"] .field-type-option-card:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.52);
}

html[data-theme="dark"] .field-type-option-icon {
  color: #a9b7d0;
}

html[data-theme="dark"] .field-type-option-copy strong {
  color: #e2e8f0;
}

html[data-theme="dark"] .field-type-option-copy small {
  color: #94a3b8;
}

@media (max-width: 575.98px) {
  .field-type-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 96px));
    justify-content: center;
  }

  .field-type-option-card {
    width: 96px;
    height: 96px;
    min-height: 96px;
  }
}

.definition-builder-grid .btn-link {
  color: var(--app-text);
}

.definition-builder-grid .btn-link:hover {
  color: #4f46e5;
}

#wizard-builder-outline {
  position: sticky;
  top: 86px;
  align-self: start;
  max-height: calc(100vh - 96px);
}

#wizard-builder-outline .card-body {
  overflow: auto;
}

#wizard-builder-properties {
  position: sticky;
  top: 86px;
  align-self: start;
}

html[data-theme="dark"] .definition-outline-page.selected,
html[data-theme="dark"] .definition-canvas-section.selected,
html[data-theme="dark"] .definition-canvas-field-card.selected {
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.22);
}

html[data-theme="dark"] .quill-editor-wrap {
  background: var(--app-surface);
}

html[data-theme="dark"] .quill-editor-wrap .ql-toolbar.ql-snow {
  background: color-mix(in srgb, var(--app-surface-soft) 88%, var(--app-surface) 12%);
  border-bottom-color: var(--app-border);
}

html[data-theme="dark"] .quill-editor-wrap .ql-toolbar button,
html[data-theme="dark"] .quill-editor-wrap .ql-toolbar .ql-picker-label,
html[data-theme="dark"] .quill-editor-wrap .ql-toolbar .ql-picker-item {
  color: var(--app-text-muted);
}

html[data-theme="dark"] .quill-editor-wrap .ql-toolbar button:hover,
html[data-theme="dark"] .quill-editor-wrap .ql-toolbar button.ql-active,
html[data-theme="dark"] .quill-editor-wrap .ql-toolbar .ql-picker-label:hover,
html[data-theme="dark"] .quill-editor-wrap .ql-toolbar .ql-picker-label.ql-active {
  color: #bfdbfe;
}

html[data-theme="dark"] .quill-editor-wrap .ql-editor {
  background: var(--app-surface);
}

@media (max-width: 1200px) {
  .template-builder-grid {
    grid-template-columns: 1fr;
  }

  .template-pane {
    min-height: auto;
  }

  .request-builder-grid {
    grid-template-columns: 1fr;
  }

  .definition-builder-grid {
    grid-template-columns: 1fr;
  }

  #wizard-builder-outline,
  #wizard-builder-properties {
    position: static;
    top: auto;
    max-height: none;
  }

  #wizard-builder-outline .card-body {
    overflow: visible;
  }
}

@media (max-width: 992px) {
  .request-stepper {
    grid-template-columns: 1fr;
  }
}

.client-workspace-header h1 {
  letter-spacing: -0.01em;
}

.client-workspace-nav .nav-link {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
}

.client-workspace-nav .nav-link:hover {
  background-color: var(--app-nav-hover);
  border-color: var(--app-border);
  color: var(--app-text);
}

.client-workspace-nav .nav-link.active {
  background-color: var(--app-nav-active);
  border-color: color-mix(in srgb, var(--app-nav-active) 65%, var(--app-border) 35%);
  color: var(--app-nav-active-text);
}

.activity-item:last-child {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.request-workspace-header h1 {
  letter-spacing: -0.01em;
}

.workflow-state {
  border: 1px solid #e9edf5;
  border-radius: 0.7rem;
  padding: 0.85rem 1rem;
}

.workflow-info {
  background-color: #f8fbff;
}

.workflow-warning {
  background-color: #fffaf1;
}

.workflow-danger {
  background-color: #fff5f5;
}

.workflow-success {
  background-color: #f5fff8;
}

.workflow-neutral {
  background-color: #f8f9fb;
}

.review-row-pending {
  background-color: #fffdf6;
}

.review-row-rejected {
  background-color: #fff7f7;
}

.review-row-approved {
  background-color: #f7fff9;
}

.request-checklist-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2.2fr);
  gap: 1rem;
  align-items: start;
}

.request-checklist-outline {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  position: sticky;
  top: 1rem;
}

.request-checklist-outline-head {
  padding: 0.85rem 0.9rem 0.2rem;
  border-bottom: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.request-checklist-outline-subtitle {
  padding: 0 0.9rem 0.65rem;
  font-size: 0.94rem;
  color: #475569;
  border-bottom: 1px solid #e5e7eb;
}

.request-checklist-outline-list {
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.request-checklist-page-link,
.request-checklist-section-link,
.request-checklist-item-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
  color: var(--app-text);
  text-decoration: none;
  border: 1px solid transparent;
}

.request-checklist-page-link {
  border-radius: 0.75rem;
  padding: 0.48rem 0.55rem;
  background: #f8fafc;
  border-color: #e2e8f0;
  font-weight: 700;
  color: #1e293b;
  font-size: 0.98rem;
}

.request-checklist-sections {
  padding-left: 0.65rem;
  margin-top: -0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  border-left: 1px solid #e2e8f0;
  margin-left: 0.45rem;
}

.request-checklist-section-link {
  border-radius: 0.6rem;
  padding: 0.3rem 0.42rem;
  color: #334155;
  font-size: 0.93rem;
  font-weight: 600;
}

.request-checklist-items {
  margin-top: -0.02rem;
  padding-left: 0.68rem;
  border-left: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-left: 0.45rem;
}

.request-checklist-item-link {
  font-size: 0.9rem;
  font-weight: 400;
  color: #475569;
  padding: 0.08rem 0.12rem;
  border-radius: 0.45rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-checklist-page-link:hover,
.request-checklist-section-link:hover,
.request-checklist-item-link:hover {
  color: #1e293b;
  background: #f8fafc;
}

.request-checklist-progress-badge {
  font-size: 0.72rem;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.06rem 0.48rem;
  font-weight: 600;
}

.request-checklist-detail .card {
  border-radius: 0.9rem;
}

.request-checklist-section-card {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: var(--app-surface-soft);
  padding: 0.75rem;
}

.checklist-review-actions .form-control {
  min-width: 180px;
}

@media (max-width: 1200px) {
  .request-checklist-layout {
    grid-template-columns: 1fr;
  }

  .request-checklist-outline {
    position: static;
  }
}

.portal-brand.card {
  border-radius: 0.9rem;
  border: 1px solid #e7ecf4 !important;
}

.portal-brand-logo {
  width: 42px;
  height: 42px;
}

.client-portal-shell {
  background: #f3f6fb;
}

.portal-container {
  max-width: 1050px;
}

.portal-welcome h1 {
  letter-spacing: -0.01em;
}

.portal-request-card {
  border: 1px solid #e9edf5;
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  background-color: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.portal-request-card:hover {
  border-color: #d6e3ff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

a.portal-request-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.portal-request-card-link:hover,
a.portal-request-card-link:focus {
  text-decoration: none;
  color: inherit;
  transform: translateY(-1px);
}

a.portal-request-card-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.portal-request-rejected {
  border-color: #f3c2c7;
  background-color: #fff8f8;
}

.portal-request-overdue {
  border-color: #ffe2a8;
  background-color: #fffcf5;
}

.portal-request-completed {
  opacity: 0.9;
  background-color: #f9fafb;
}

.portal-next-step {
  border: 1px solid #e9edf5;
  border-radius: 0.75rem;
  padding: 0.8rem 0.95rem;
  background-color: #f8f9fb;
}

.portal-next-step-pending {
  background-color: #f3f8ff;
}

.portal-next-step-rejected {
  background-color: #fff4f4;
  border-color: #f4bcc2;
}

.portal-next-step-completed {
  background-color: #f4f9f5;
  border-color: #cde7d1;
}

.portal-welcome {
  padding: 0.25rem 0 0.25rem;
}

.client-portal-shell .card {
  border: 1px solid #e7ecf4;
  border-radius: 0.9rem;
}

.client-portal-shell .card-header {
  background-color: #fff;
  border-bottom: 1px solid #edf1f7;
}

.client-portal-shell .table {
  margin-bottom: 0;
}

/* Dark mode consistency refinements */
html[data-theme="dark"] {
  --app-text-muted: #b3bfd1;
}

html[data-theme="dark"] .badge-status-neutral {
  background-color: #1f2937;
  color: #d1d5db;
}

html[data-theme="dark"] .badge-status-draft {
  background-color: #243244;
  color: #d1d5db;
}

html[data-theme="dark"] .badge-status-sent {
  background-color: #1e3a8a;
  color: #dbeafe;
}

html[data-theme="dark"] .badge-status-submitted {
  background-color: #4b3200;
  color: #fde68a;
}

html[data-theme="dark"] .badge-status-completed {
  background-color: #14532d;
  color: #bbf7d0;
}

html[data-theme="dark"] .badge-status-rejected,
html[data-theme="dark"] .badge-status-overdue {
  background-color: #5b1e2d;
  color: #fecdd3;
}

html[data-theme="dark"] .badge-status-missing {
  background-color: #0c4a6e;
  color: #bae6fd;
}

html[data-theme="dark"] .badge-status-cancelled {
  background-color: #374151;
  color: #e5e7eb;
}

.app-shell .form-label,
.app-shell label {
  color: var(--app-text);
}

.app-shell .form-text {
  color: var(--app-text-muted);
}

.app-shell .card-header,
.app-shell .card-header h1,
.app-shell .card-header h2,
.app-shell .card-header h3,
.app-shell .card-header h4,
.app-shell .card-header h5,
.app-shell .card-header h6 {
  color: var(--app-text);
}

.app-shell .fw-medium,
.app-shell .fw-semibold,
.app-shell .h1,
.app-shell .h2,
.app-shell .h3,
.app-shell .h4,
.app-shell .h5,
.app-shell .h6 {
  color: var(--app-text);
}

.app-shell .text-danger-emphasis {
  color: #fda4af !important;
}

.attention-item {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.attention-item:hover {
  background-color: var(--app-surface-soft);
}

/* SaaS shell + dashboard refresh */
.app-shell {
  background: var(--app-bg);
}

.app-sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-surface) 92%, #0f172a 8%) 0%, var(--app-surface) 100%);
  padding: 1rem 0.9rem;
}

.app-sidebar-brand {
  padding: 0.35rem 0.35rem 0.9rem;
  margin-bottom: 0.9rem;
}

.app-brand-title {
  font-size: 1rem;
}

.app-brand-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.app-nav-main .nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 0.72rem;
  border-radius: 0.7rem;
  margin: 0.08rem 0;
}

.app-nav-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.app-nav-main .nav-link.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-nav-active) 60%, #ffffff 40%);
}

.app-topbar {
  background: color-mix(in srgb, var(--app-surface) 92%, #ffffff 8%);
  backdrop-filter: blur(8px);
}

.topbar-search {
  border-radius: 0.72rem;
  min-height: 2.4rem;
}

.topbar-icon-btn,
.profile-trigger {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.topbar-user-email {
  font-size: 0.82rem;
  color: var(--app-text-muted);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 0.34rem 0.7rem;
  background: var(--app-surface-soft);
}

.app-content {
  padding: 1.5rem !important;
}

.dashboard-hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  letter-spacing: -0.02em;
}

.dashboard-kpi-card,
.dashboard-card {
  border-radius: 1rem;
}

.dashboard-kpi-card .card-body {
  padding: 1.1rem 1rem;
}

.dashboard-kpi-label {
  color: var(--app-text-muted);
  font-size: 0.83rem;
  font-weight: 600;
}

.dashboard-kpi-icon {
  color: var(--app-text-muted);
}

.dashboard-kpi-value {
  font-size: clamp(1.65rem, 3.3vw, 2.15rem);
  line-height: 1.1;
  font-weight: 700;
}

.dashboard-kpi-helper {
  color: var(--app-text-muted);
  font-size: 0.84rem;
}

.kpi-accent-primary { color: #4f46e5; }
.kpi-accent-info { color: #0ea5e9; }
.kpi-accent-warning { color: #d97706; }
.kpi-accent-success { color: #16a34a; }
.kpi-accent-danger { color: #e11d48; }

.dashboard-card-header {
  background: transparent;
  padding: 1rem 1rem 0.2rem;
}

.dashboard-card .card-body {
  padding: 0.9rem 1rem 1rem;
}

.dashboard-list-group {
  border-radius: 0.8rem;
  overflow: hidden;
}

.dashboard-list-group .list-group-item {
  border-color: var(--app-border);
  background: var(--app-surface);
}

.attention-row {
  padding: 0.8rem 0.85rem;
}

.activity-row {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: 0.72rem 0.8rem;
  background: color-mix(in srgb, var(--app-surface) 85%, var(--app-surface-soft) 15%);
}

.upload-row {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: 0.72rem 0.8rem;
  background: color-mix(in srgb, var(--app-surface) 88%, var(--app-surface-soft) 12%);
}

.dashboard-progress {
  width: 130px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.55rem;
}

.dashboard-progress-track {
  position: relative;
  height: 0.55rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.dashboard-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.dashboard-progress-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--app-text-muted);
  min-width: 2.7rem;
  text-align: right;
}

.app-shell .shadow-sm {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="dark"] .app-shell .shadow-sm {
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.48) !important;
}

html[data-theme="dark"] .kpi-accent-primary { color: #7d8cff; }
html[data-theme="dark"] .kpi-accent-info { color: #38bdf8; }
html[data-theme="dark"] .kpi-accent-warning { color: #fbbf24; }
html[data-theme="dark"] .kpi-accent-success { color: #4ade80; }
html[data-theme="dark"] .kpi-accent-danger { color: #fb7185; }

html[data-theme="dark"] .dashboard-progress-track {
  background: #273750;
}

html[data-theme="dark"] .dashboard-progress-label {
  color: #c5d2e8;
}

@media (max-width: 1200px) {
  .app-content {
    padding: 1.2rem !important;
  }
}

@media (max-width: 991.98px) {
  .app-sidebar {
    padding: 0.8rem;
  }

  .app-nav-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .app-nav-main .nav-link {
    margin: 0;
  }

  .topbar-search-wrap {
    max-width: 100%;
  }
}
.client-picker {
  position: relative;
}

.client-picker-trigger {
  width: auto;
  min-width: 96px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  border-radius: 999px;
  padding: 0.36rem 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.client-picker-trigger-caret {
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.client-picker-panel {
  margin-top: 0.55rem;
  border: 1px solid var(--app-border);
  border-radius: 0.7rem;
  background: var(--app-surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  padding: 0.65rem;
  display: none;
  max-width: 460px;
}

.client-picker-panel.is-open {
  display: block;
}

.client-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--app-surface-soft) 80%, var(--app-surface) 20%);
  margin-bottom: 0.55rem;
  overflow: hidden;
}

.client-picker-header-label,
.client-picker-header-filter {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
  line-height: 1.1rem;
}

.client-picker-header-label {
  color: var(--app-text);
  font-weight: 600;
  border-right: 1px solid var(--app-border);
}

.client-picker-header-filter {
  color: #d63384;
  font-weight: 500;
}

.client-picker-search-wrap {
  position: relative;
  margin-bottom: 0.55rem;
}

.client-picker-search-icon {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-text-muted);
  font-size: 0.9rem;
}

.client-picker-search-input {
  width: 100%;
  border: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface-soft) 86%, var(--app-surface) 14%);
  color: var(--app-text);
  border-radius: 0.45rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  font-size: 0.9rem;
}

.client-picker-search-input::placeholder {
  color: var(--app-text-muted);
}

.client-picker-search-input:focus {
  outline: none;
  border-color: #7aa2ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.client-picker-list {
  max-height: 240px;
  overflow: auto;
  display: grid;
  gap: 0.4rem;
}

.client-picker-item {
  width: 100%;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--app-text);
  padding: 0.35rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
}

.client-picker-item:hover {
  background: var(--app-surface-soft);
}

.client-picker-item.is-selected {
  background: color-mix(in srgb, #dbeafe 62%, var(--app-surface) 38%);
}

.client-picker-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #7c3aed;
  background: #f3e8ff;
  flex: 0 0 1.85rem;
}

.client-picker-item-text {
  min-width: 0;
  display: grid;
}

.client-picker-item-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--app-text);
}

.client-picker-item-email {
  font-size: 0.82rem;
  color: var(--app-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .client-picker-panel {
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.55);
}

html[data-theme="dark"] .client-picker-item.is-selected {
  background: color-mix(in srgb, #4058da 36%, var(--app-surface) 64%);
}

html[data-theme="dark"] .client-picker-avatar {
  background: #312e81;
  color: #ddd6fe;
}
.client-picker-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--app-text-muted);
  margin-bottom: 0.45rem;
}

/* Responsive polish */
.compact-filter-form .form-label {
  margin-bottom: 0.28rem;
}

.compact-filter-form .btn {
  min-height: 2.55rem;
}

.cell-ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}


.requests-table-responsive {
  overflow: visible !important;
}

.requests-table-responsive .dropdown-menu {
  z-index: 2000;
}

.client-files-table {
  table-layout: fixed;
  min-width: 900px;
}

.client-files-table th:nth-child(1),
.client-files-table td:nth-child(1) { width: 220px; }

.client-files-table th:nth-child(2),
.client-files-table td:nth-child(2) { width: 180px; }

.client-files-table th:nth-child(7),
.client-files-table td:nth-child(7) { width: 140px; }

.portal-mobile-item-card {
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: var(--app-surface);
  padding: 0.7rem 0.75rem;
}

.builder-drawer-trigger {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1046;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--app-text) 72%, var(--app-text-muted) 28%);
  opacity: 0.92;
}

.builder-drawer-trigger svg {
  width: 1.4rem;
  height: 1.4rem;
  transition: transform 0.18s ease;
}

.builder-drawer-trigger.is-drawer-open svg {
  transform: rotate(180deg);
}

.builder-drawer-trigger:hover,
.builder-drawer-trigger:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #4f46e5;
  opacity: 1;
}

.builder-drawer-trigger-left {
  left: -0.4rem;
  right: auto !important;
}

.builder-drawer-trigger-right {
  right: -0.4rem;
  left: auto !important;
}

.builder-drawer-trigger[data-builder-drawer-open="outline"] {
  left: -0.4rem;
  right: auto !important;
}

.builder-drawer-trigger[data-builder-drawer-open="properties"] {
  right: -0.4rem;
  left: auto !important;
}

.builder-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1044;
  display: none;
}

.builder-drawer-backdrop.is-visible {
  display: block;
}

body.builder-drawer-open {
  overflow: hidden;
}

@media (max-width: 1199.98px) {
  .app-content {
    padding: 1rem !important;
  }

  .definition-builder-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .builder-drawer-trigger-left {
    left: 0.35rem !important;
    right: auto !important;
  }

  .builder-drawer-trigger-right {
    right: 0.35rem !important;
    left: auto !important;
  }

  .builder-drawer-trigger[data-builder-drawer-open="outline"] {
    left: 0.35rem !important;
    right: auto !important;
  }

  .builder-drawer-trigger[data-builder-drawer-open="properties"] {
    right: 0.35rem !important;
    left: auto !important;
  }

  .definition-builder-grid > .definition-pane.builder-drawer {
    position: fixed !important;
    top: 88px !important;
    bottom: 12px !important;
    width: 78vw !important;
    max-width: 360px !important;
    min-width: 280px !important;
    border-radius: 0.9rem !important;
    z-index: 1045 !important;
    transition: transform 0.22s ease, opacity 0.18s ease;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.4);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .definition-builder-grid > .definition-pane.builder-drawer.builder-drawer-left {
    left: 8px !important;
    right: auto !important;
    transform: translateX(-102%);
  }

  .definition-builder-grid > .definition-pane.builder-drawer.builder-drawer-right {
    right: 8px !important;
    left: auto !important;
    transform: translateX(102%);
  }

  .definition-builder-grid > .definition-pane.builder-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .definition-builder-grid > .definition-pane.builder-drawer .card-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 76px) !important;
  }

  .definition-builder-grid > :not(.builder-drawer) {
    position: relative;
    z-index: 1;
  }

  .builder-mobile-host {
    position: relative;
    overflow: visible;
  }

  html[data-theme="dark"] .definition-builder-grid > .definition-pane.builder-drawer {
    background: #0f172a;
    border-color: #27364f;
    box-shadow: 0 18px 52px rgba(2, 6, 23, 0.7);
  }

  html[data-theme="dark"] .builder-drawer-trigger {
    background: transparent !important;
    border-color: transparent !important;
    color: #cbd5e1;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .builder-drawer-trigger:hover,
  html[data-theme="dark"] .builder-drawer-trigger:focus-visible {
    color: #93c5fd;
  }
}

@media (max-width: 991.98px) {
  .app-shell {
    overflow-x: hidden;
  }

  .app-main {
    min-width: 0;
  }

  .app-sidebar-panel {
    max-height: none;
    overflow: visible;
  }

  .app-nav-main {
    display: flex;
    flex-direction: column;
  }

  .app-topbar .px-4 {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
  }

  .app-content {
    padding: 0.85rem !important;
  }

  .dashboard-hero .btn,
  .dashboard-hero .dropdown-toggle {
    width: 100%;
  }

  .dashboard-progress {
    width: 100%;
    max-width: 210px;
  }
}

@media (max-width: 767.98px) {
  .portal-container {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .portal-brand .card-body {
    padding: 0.8rem !important;
  }

  .portal-brand .h5 {
    font-size: 1rem;
  }

  .client-portal-shell .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
  }

  .client-portal-shell .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.9rem;
  }

  .client-portal-shell .portal-request-card {
    padding: 0.65rem 0.7rem;
  }

  .client-portal-shell .portal-request-card .btn,
  .client-portal-shell .portal-next-step .btn,
  .client-portal-shell .btn {
    min-height: 2.6rem;
  }

  .dashboard-card .card-body,
  .dashboard-card-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .dashboard-activity-table {
    min-width: 620px;
  }

  .auth-main-shell {
    padding: 0.9rem 0.6rem;
    align-items: flex-start;
  }

  .auth-card-shell {
    border-radius: 0.85rem;
    padding: 1.2rem 0.9rem 1rem;
  }

  .auth-title {
    font-size: 1.5rem;
  }

  .auth-subtitle {
    font-size: 0.92rem;
  }

  .auth-form-shell .form-control,
  .auth-form-shell .form-select {
    min-height: 46px;
  }

  .client-picker-panel {
    max-width: none;
    width: 100%;
  }

.client-picker-item {
    padding: 0.45rem 0.35rem;
  }
}

.lp-preview-subtitle {
  max-width: 760px;
  margin: 0.25rem auto 0;
  color: #5b6b83;
  font-size: 1.03rem;
}

.lp-preview-stack {
  display: grid;
  gap: 1.35rem;
}

.lp-preview-block {
  background: #ffffff;
  border: 1px solid #d7e2fb;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.lp-preview-copy h3 {
  margin-bottom: 0.45rem;
}

.lp-preview-copy p {
  margin-bottom: 0;
  color: #5b6b83;
}

.lp-preview-image-wrap {
  background: #f8fbff;
  border: 1px solid #d7e2fb;
  border-radius: 0.75rem;
  padding: 0.45rem;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.08);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.lp-preview-image {
  width: 100%;
  max-width: 700px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  display: block;
}

.lp-preview-card {
  background: #ffffff;
  border: 1px solid #d7e2fb;
  border-radius: 1rem;
  padding: 1rem;
  height: 100%;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
  display: flex;
  flex-direction: column;
}

.lp-preview-meta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #315ee8;
  background: #ecf2ff;
  border: 1px solid #d7e2fb;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  margin-bottom: 0.55rem;
}

.lp-preview-card h3 {
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
}

.lp-preview-card p {
  color: #5b6b83;
  margin-bottom: 0.6rem;
}

.lp-preview-helper {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #315ee8;
  margin-bottom: 0.45rem !important;
}

.lp-preview-mock {
  border: 1px solid #d7e2fb;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #f8fbff;
  margin-top: 0.15rem;
  min-height: 265px;
  flex: 1 1 auto;
}

.lp-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: #eef4ff;
  border-bottom: 1px solid #d7e2fb;
}

.lp-preview-head span {
  font-weight: 700;
  color: #1e293b;
}

.lp-preview-head small {
  color: #5b6b83;
  font-weight: 600;
}

.lp-preview-body {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.7rem;
}

.lp-mock-col span {
  display: block;
  font-size: 0.82rem;
  color: #5b6b83;
  padding: 0.28rem 0.42rem;
  border-radius: 0.45rem;
  margin-bottom: 0.3rem;
}

.lp-mock-col span.active {
  color: #1d4ed8;
  background: #e8f0ff;
  font-weight: 700;
}

.lp-mock-main div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #d7e2fb;
  border-radius: 0.5rem;
  padding: 0.34rem 0.48rem;
  font-size: 0.83rem;
  margin-bottom: 0.35rem;
  color: #253247;
}

.lp-mock-main small {
  color: #6b7c95;
  font-size: 0.75rem;
  font-weight: 600;
}

.lp-preview-list {
  padding: 0.45rem 0.7rem 0.65rem;
}

.lp-preview-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.83rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e7edf9;
}

.lp-preview-list div:last-child {
  border-bottom: 0;
}

.lp-preview-list strong {
  font-weight: 600;
  color: #243247;
}

.lp-preview-list em {
  font-style: normal;
  color: #607289;
  font-weight: 600;
  font-size: 0.76rem;
  border: 1px solid #d7e2fb;
  background: #f8fbff;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

.lp-preview-list em.ok {
  color: #0f766e;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.lp-preview-list em.warn {
  color: #b45309;
  background: #fff7ed;
  border-color: #fed7aa;
}

.lp-preview-list em.info {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #bfdbfe;
}

.lp-preview-kpis {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.52rem 0.7rem 0.38rem;
}

.lp-preview-kpis span {
  font-size: 0.74rem;
  color: #465b78;
  background: #ecf2ff;
  border: 1px solid #d7e2fb;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-weight: 600;
}

.lp-preview-progress {
  padding: 0 0.7rem 0.38rem;
}

.lp-preview-progress label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.lp-preview-progress div {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.lp-preview-progress span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}

html[data-theme="dark"] .lp-preview-subtitle,
html[data-theme="dark"] .lp-preview-card p,
html[data-theme="dark"] .lp-preview-copy p {
  color: #a8bddb;
}

html[data-theme="dark"] .lp-preview-card,
html[data-theme="dark"] .lp-preview-mock,
html[data-theme="dark"] .lp-preview-block,
html[data-theme="dark"] .lp-preview-image-wrap {
  background: #0f172a;
  border-color: #27364f;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
}

html[data-theme="dark"] .lp-preview-head {
  background: #132038;
  border-bottom-color: #27364f;
}

html[data-theme="dark"] .lp-preview-head span,
html[data-theme="dark"] .lp-preview-list strong,
html[data-theme="dark"] .lp-mock-main div {
  color: #e2e8f0;
}

html[data-theme="dark"] .lp-preview-head small,
html[data-theme="dark"] .lp-preview-list em,
html[data-theme="dark"] .lp-mock-col span,
html[data-theme="dark"] .lp-mock-main small,
html[data-theme="dark"] .lp-preview-progress label {
  color: #94a3b8;
}

html[data-theme="dark"] .lp-preview-meta,
html[data-theme="dark"] .lp-preview-kpis span {
  background: #1b2a45;
  border-color: #2d4468;
  color: #93c5fd;
}

html[data-theme="dark"] .lp-preview-helper {
  color: #93c5fd;
}

html[data-theme="dark"] .lp-mock-main div {
  background: #111b30;
  border-color: #2b3f60;
}

html[data-theme="dark"] .lp-preview-list div {
  border-bottom-color: #27364f;
}

html[data-theme="dark"] .lp-preview-image {
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.55);
}

html[data-theme="dark"] .lp-preview-list em {
  border-color: #2d4468;
  background: #132038;
}

html[data-theme="dark"] .lp-preview-list em.ok {
  color: #86efac;
  background: rgba(20, 83, 45, 0.45);
  border-color: rgba(34, 197, 94, 0.45);
}

html[data-theme="dark"] .lp-preview-list em.warn {
  color: #fdba74;
  background: rgba(124, 45, 18, 0.42);
  border-color: rgba(251, 146, 60, 0.4);
}

html[data-theme="dark"] .lp-preview-list em.info {
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.45);
  border-color: rgba(59, 130, 246, 0.4);
}

@media (max-width: 991.98px) {
  .lp-preview-block {
    padding: 0.9rem;
  }
}

/* --- Re-shape patterns: audience lockup, statement, timeline --- */

.lp-audience-lockup {
  max-width: 50rem;
}

.lp-audience-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
  padding: 0;
}

.lp-audience-row li {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-strong);
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
}


.lp-statement {
  max-width: 60rem;
}

.lp-statement-title {
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--color-text-strong);
  margin: 0 0 1.4rem;
}

.lp-statement-title span {
  display: block;
}

.lp-statement-title .lp-statement-emph {
  color: var(--color-primary);
}

.lp-statement-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 42rem;
  margin: 0;
}

.lp-timeline {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.lp-timeline-step {
  padding: 2rem 1.6rem 2rem 0;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.lp-timeline-step:last-child {
  border-right: none;
  padding-right: 0;
}

.lp-timeline-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  margin-bottom: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1;
}

.lp-timeline-step h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--color-text-strong);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}

.lp-timeline-step p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 991.98px) {
  .lp-timeline {
    grid-template-columns: 1fr;
    border-bottom: none;
  }
  .lp-timeline-step {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 1.6rem 0;
  }
  .lp-timeline-step:last-child {
    border-bottom: none;
  }
}

/* --- Demo browser chrome on client preview --- */

.lp-client-preview-demo {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 32px 64px -24px rgba(64, 88, 218, 0.18);
  background: var(--color-surface-elev);
}

.lp-client-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
}

.lp-chrome-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--color-border);
  display: inline-block;
}

.lp-chrome-dot:first-child { background: #ef9d9d; }
.lp-chrome-dot:nth-child(2) { background: #f0d094; }
.lp-chrome-dot:nth-child(3) { background: #a4d8a4; }

.lp-chrome-url {
  margin-left: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  background: var(--color-surface-elev);
  border: 1px solid var(--color-border);
  border-radius: 0.45rem;
  padding: 0.18rem 0.65rem;
  letter-spacing: 0;
}

html[data-theme="dark"] .lp-chrome-dot:first-child { background: #c47373; }
html[data-theme="dark"] .lp-chrome-dot:nth-child(2) { background: #c4a06a; }
html[data-theme="dark"] .lp-chrome-dot:nth-child(3) { background: #7ab07a; }