/*
 * public.css
 * Styles for public-facing pages (landing, blog, login, portal).
 * Loaded alongside Tabler and theme.css from base.html.
 *
 * Keeps public pages explicit about brand colors, spacing, forms and portal
 * helpers without reintroducing retired theme selectors.
 */

/* ── Brand color overrides + landing-specific helpers ───────────────────── */
:root {
  --bs-primary: #3F769E;
  --bs-primary-rgb: 63, 118, 158;
  --bs-link-color: #3F769E;
  --bs-link-hover-color: #2F5B7C;
  --landing-ink: #152636;
  --landing-ink-soft: #31495a;
  --landing-muted: #5b7080;
  --landing-line: #d8e3ea;
  --landing-line-strong: #c5d4dd;
  --landing-surface: #ffffff;
  --landing-surface-soft: #f4f7f9;
  --landing-brand: #3F769E;
  --landing-brand-strong: #2F5B7C;
  --landing-brand-soft: #e8f1f7;
  --landing-gold: #e3a13b;
  --landing-gold-soft: #f8e8c7;
  --landing-shadow: 0 24px 60px rgba(21, 38, 54, 0.08);
}

.btn-primary {
  --bs-btn-bg: #3F769E;
  --bs-btn-border-color: #3F769E;
  --bs-btn-hover-bg: #2F5B7C;
  --bs-btn-hover-border-color: #2F5B7C;
  --bs-btn-active-bg: #2B526E;
  --bs-btn-active-border-color: #2B526E;
  --bs-btn-disabled-bg: #3F769E;
  --bs-btn-disabled-border-color: #3F769E;
}

.btn-outline-primary {
  --bs-btn-color: #3F769E;
  --bs-btn-border-color: #3F769E;
  --bs-btn-hover-bg: #3F769E;
  --bs-btn-hover-border-color: #3F769E;
  --bs-btn-active-bg: #2F5B7C;
  --bs-btn-active-border-color: #2F5B7C;
}

.text-primary { color: #3F769E !important; }
.bg-primary { background-color: #3F769E !important; }
.border-primary { border-color: #3F769E !important; }
.link-primary { color: #3F769E !important; }
.link-primary:hover { color: #2F5B7C !important; }

/* ── Heading color fix for dark backgrounds ─────────────────────────────── */
/* Sets heading colors explicitly; text-white inheritance doesn't work */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white p, .text-white span, .text-white a:not(.btn) {
  color: inherit !important;
}

/* ── Gradient hero — dark-to-brand diagonal gradient ────────────────────── */
/* :root prefix keeps this utility above vendor defaults. */
:root .bg-gradient-primary {
  background: linear-gradient(135deg, #0F171E 0%, #2F5B7C 100%) !important;
  background-image: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-public-link:focus-visible,
.kv-public-brand-link:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.9);
  outline-offset: 3px;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.kv-public-brand {
  display: flex;
}

.kv-public-brand-link,
.kv-public-brand-logo {
  display: inline-flex;
  align-items: center;
}

.kv-public-brand-text {
  letter-spacing: 0;
}

/* ── Section spacing (py-5 = 20px, we need proper landing spacing) ─ */
.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.section-padding-lg {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 576px) {
  .section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .section-padding-lg {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* ── Hero button (white with dark text for contrast on gradient) ─────────── */
.btn-white {
  background-color: #fff;
  color: #0F171E;
  border-color: #fff;
  font-weight: 600;
}
.btn-white:hover {
  background-color: #EDF2F7;
  color: #0F171E;
  border-color: #EDF2F7;
}

/* ── Form controls (shrinks them; restore standard size) ──────────── */
.public-form .form-control {
  padding: 0.625rem 1rem;
  font-size: 1rem;
  min-height: 2.75rem;
}
.public-form .form-label {
  font-weight: 500;
  margin-bottom: 0.375rem;
}
.public-form .btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer-public {
  background-color: #0F171E !important;
  color: #9EAEBD;
}
.footer-public a {
  color: #9EAEBD !important;
  text-decoration: none;
}
.footer-public a:hover {
  color: #fff !important;
}

/* ── Cookie consent ────────────────────────────────────────────────────── */
.cookie-banner {
  pointer-events: none;
  z-index: 1050;
}

.cookie-banner-panel {
  width: min(100%, 30rem);
  margin-left: auto;
  border-radius: 0.75rem;
  pointer-events: auto;
}

@media (max-width: 575.98px) {
  .cookie-banner-panel {
    width: 100%;
  }
}

/* ── Prose — basic typography for blog content ──────────────────────────── */
.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #4B5E6D;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: #152636 !important;
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }

.prose p { margin-bottom: 1.25em; }

.prose a {
  color: #3F769E;
  text-decoration: underline;
}
.prose a:hover { color: #2F5B7C; }

.prose ul, .prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}
.prose li { margin-bottom: 0.5em; }

.prose blockquote {
  border-left: 4px solid #DEE4EA;
  padding-left: 1em;
  color: #4B5E6D;
  font-style: italic;
  margin: 1.5em 0;
}

.prose code {
  background-color: #F4F7F9;
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.prose pre {
  background-color: #0F171E;
  color: #F0F4F8;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5em 0;
}
.prose pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}

/* ── Scroll offset for sticky navbar + anchor links ────────────────────── */
[id] {
  scroll-margin-top: 4.5rem;
}

.landing-shell {
  max-width: 1120px;
}

.navbar-public {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid transparent;
  padding: 0.85rem 0;
  box-shadow: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.navbar-public.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(197, 212, 221, 0.8);
  box-shadow: 0 16px 36px rgba(21, 38, 54, 0.08);
}

.navbar-public-link {
  color: var(--landing-ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.navbar-public-link:hover {
  color: var(--landing-brand);
}

.navbar-public-link-strong {
  color: var(--landing-brand-strong);
  font-weight: 600;
}

.landing-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 1rem 0 1.25rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--landing-line);
}

.pricing-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Landing icon utilities (Tabler icon sizing) ──── */
.landing-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  flex-shrink: 0;
  vertical-align: middle;
}

.landing-icon-lg {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 1.35rem;
}

.landing-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
}

/* ── Client portal ─────────────────────────────────────────────────────── */
.portal-public-shell {
  min-height: 100vh;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
}

.portal-public-brand-logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  color: var(--bs-heading-color);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.portal-public-brand-mark {
  width: 2rem;
  height: 2rem;
  color: var(--bs-primary);
}

.portal-public-brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.portal-upload-info,
.portal-upload-copy {
  min-width: 0;
}

.portal-upload-form .btn,
.portal-upload-form .form-control {
  min-height: 2.35rem;
}

.portal-upload-form {
  flex: 0 1 24rem;
  min-width: min(100%, 18rem);
  gap: 0.75rem;
}

.portal-upload-form .document-upload-actions {
  gap: 0.75rem;
}

.portal-upload-input,
.portal-upload-form .document-upload-picker {
  min-width: 0;
}

.portal-upload-form .document-upload-picker {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-upload-form .document-upload-button {
  white-space: nowrap;
}

.portal-upload-form .document-upload-filename {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-expired-card {
  max-width: 28rem;
}

.landing-security-shell {
  max-width: 55rem;
}

.landing-security-title {
  color: #152636;
}

.landing-security-copy {
  color: #4B5E6D;
}

.landing-security-icon {
  color: #4A86B0;
}

@media (max-width: 767.98px) {
  .portal-upload-form {
    width: 100%;
  }
}

.landing-icon-badge-sm {
  width: 2.15rem;
  height: 2.15rem;
}

.landing-icon-badge-md {
  width: 2.75rem;
  height: 2.75rem;
}

.landing-icon-badge-lg {
  width: 3.25rem;
  height: 3.25rem;
}

.landing-icon-badge-brand {
  background-color: var(--landing-brand-soft);
  color: var(--landing-brand);
}

.landing-icon-badge-gold {
  background-color: var(--landing-gold-soft);
  color: #7a5118;
}

.landing-icon-badge-dark {
  background-color: #1d3b4f;
  color: #fff;
}

.landing-icon-badge-accent {
  color: var(--card-accent);
  background-color: var(--card-accent-soft);
}

.landing-section-light {
  background-color: var(--landing-surface-soft);
}

.landing-section-white {
  background-color: var(--landing-surface);
}

.landing-section-heading {
  max-width: 760px;
  margin-inline: auto;
}

.landing-section-kicker,
.landing-card-kicker,
.landing-hero .hero-subtag {
  color: var(--landing-brand);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-section-kicker-inverse {
  color: #a8d2ee;
}

.landing-section-copy {
  color: var(--landing-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(74, 134, 176, 0.16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--landing-ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(74, 134, 176, 0.08);
}

.landing-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(74, 134, 176, 0.18), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(227, 161, 59, 0.16), transparent 18%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 88%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 88%);
  pointer-events: none;
}

.landing-hero .container {
  position: relative;
  z-index: 1;
}

.landing-hero-title {
  color: var(--landing-ink);
  line-height: 1.02;
  font-weight: 700;
}

.landing-lead {
  color: var(--landing-muted);
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 34rem;
}

.landing-list {
  display: grid;
  gap: 0.95rem;
}

.landing-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--landing-ink-soft);
  line-height: 1.65;
}

.landing-list-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.75rem;
  margin-top: 0.1rem;
}

.landing-list-icon-brand {
  background-color: var(--landing-brand-soft);
  color: var(--landing-brand);
}

.landing-list-icon-gold {
  background-color: var(--landing-gold-soft);
  color: #7a5118;
}

.landing-list-icon-dark {
  background-color: #1d3b4f;
  color: #fff;
}

.landing-hero-points {
  display: grid;
  gap: 0.9rem;
}

.landing-hero-visual {
  position: relative;
}

.landing-hero-card {
  position: relative;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(197, 212, 221, 0.8);
  border-radius: 1.5rem;
  box-shadow: var(--landing-shadow);
}

.landing-hero-card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.landing-window-dots {
  display: inline-flex;
  gap: 0.35rem;
}

.landing-window-dots span {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background-color: #d4dde4;
}

.landing-window-dots span:first-child {
  background-color: #ec9184;
}

.landing-window-dots span:nth-child(2) {
  background-color: #f0c775;
}

.landing-window-dots span:last-child {
  background-color: #92c3a0;
}

.landing-hero-card-title {
  color: var(--landing-ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}

.landing-hero .hero-screenshot {
  width: 100%;
  max-width: 100%;
  min-height: 320px;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
  background:
    linear-gradient(135deg, rgba(74, 134, 176, 0.1), rgba(255, 255, 255, 0.6)),
    #edf2f7;
  box-shadow: inset 0 0 0 1px rgba(197, 212, 221, 0.8);
}

.landing-floating-card {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 16rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(197, 212, 221, 0.85);
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 50px rgba(21, 38, 54, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: landing-float 6s ease-in-out infinite;
}

.landing-floating-card strong {
  display: block;
  color: var(--landing-ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.landing-floating-card span:last-child {
  color: var(--landing-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.landing-floating-card-top {
  top: 1.5rem;
  right: -1rem;
}

.landing-floating-card-bottom {
  bottom: 1.5rem;
  left: -1rem;
  animation-delay: -3s;
}

.landing-proof-card,
.landing-card,
.landing-contact-panel {
  background-color: var(--landing-surface);
  border: 1px solid var(--landing-line);
  border-radius: 1.3rem;
  box-shadow: var(--landing-shadow);
}

.landing-proof-card {
  padding: 1.5rem;
}

.landing-proof-title {
  color: var(--landing-ink);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.landing-proof-copy {
  color: var(--landing-muted);
  line-height: 1.65;
}

.landing-card {
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.landing-card:hover {
  transform: translateY(-4px);
  border-color: var(--landing-line-strong);
  box-shadow: 0 28px 65px rgba(21, 38, 54, 0.12);
}

.landing-problem-card {
  border-top: 4px solid var(--card-accent, var(--landing-brand));
}

.landing-problem-card-danger {
  --card-accent: #D9534F;
  --card-accent-soft: rgba(217, 83, 79, 0.12);
}

.landing-problem-card-warning {
  --card-accent: #F0A94A;
  --card-accent-soft: rgba(240, 169, 74, 0.14);
}

.landing-problem-card-primary {
  --card-accent: #4A86B0;
  --card-accent-soft: rgba(74, 134, 176, 0.14);
}

.landing-problem-card-purple {
  --card-accent: #6A5ACD;
  --card-accent-soft: rgba(106, 90, 205, 0.14);
}

.landing-problem-card-success {
  --card-accent: #208D70;
  --card-accent-soft: rgba(32, 141, 112, 0.14);
}

.landing-problem-card-info {
  --card-accent: #1F5E7A;
  --card-accent-soft: rgba(31, 94, 122, 0.12);
}

.landing-problem-quote {
  color: var(--landing-ink);
  font-size: 1rem;
  line-height: 1.7;
}

.landing-role-card-tech {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.landing-role-card-direction {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
}

.landing-role-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.landing-role-copy {
  color: var(--landing-muted);
  line-height: 1.65;
}

.landing-role-footer {
  padding: 0.9rem 1rem;
  border-radius: 0.95rem;
  background-color: var(--landing-brand-soft);
  color: var(--landing-brand-strong);
  font-weight: 600;
  line-height: 1.5;
}

.landing-role-footer-gold {
  background-color: var(--landing-gold-soft);
  color: #7a5118;
}

.landing-target-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.landing-value-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.comparison-table {
  background-color: #fff;
  border: 1px solid var(--landing-line);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--landing-shadow);
}

.comparison-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
}

.comparison-grid-header {
  background-color: #f7fafc;
}

.comparison-header-cell {
  padding: 1.05rem 1.25rem;
  color: #627789;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--landing-line);
}

.comparison-header-cell-new {
  background-color: #edf5fb;
  color: var(--landing-brand-strong);
}

.comparison-row {
  border-bottom: 1px solid var(--landing-line);
}

.comparison-row:last-child {
  border-bottom: none;
}

.comparison-cell {
  display: flex;
  align-items: center;
  padding: 1.25rem;
}

.comparison-aspect {
  color: var(--landing-ink);
  font-weight: 700;
}

.comparison-old {
  background-color: #fbfcfd;
}

.comparison-new {
  background-color: #f4f9fd;
}

.comparison-copy {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--landing-muted);
  line-height: 1.6;
}

.comparison-status {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.8rem;
}

.comparison-status-old {
  background-color: #f4e6e4;
  color: #9e3428;
}

.comparison-status-new {
  background-color: #deedf8;
  color: var(--landing-brand);
}

.comparison-mobile-stack {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background-color: #fff;
}

.comparison-mobile-card {
  border: 1px solid var(--landing-line);
  border-radius: 1.15rem;
  padding: 1rem;
  background-color: #fff;
}

.comparison-mobile-aspect {
  color: var(--landing-ink);
  font-size: 1rem;
  font-weight: 700;
}

.comparison-mobile-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.6;
  color: var(--landing-muted);
}

.comparison-mobile-entry + .comparison-mobile-entry {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--landing-line);
}

.landing-cta-banner-full {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #13222d 0%, #1c394a 56%, #2b5a75 100%);
}

.landing-cta-banner-full::before {
  content: "";
  position: absolute;
  inset: auto -10% -30% 45%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
  pointer-events: none;
}

.landing-cta-banner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 24px 60px rgba(8, 18, 24, 0.25);
}

.landing-cta-banner h2,
.landing-cta-banner p,
.landing-cta-points li {
  color: #fff;
}

.landing-cta-banner p {
  line-height: 1.7;
  color: #d5e2eb;
}

.landing-cta-points {
  display: grid;
  gap: 0.85rem;
}

.landing-cta-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.6;
}

.landing-contact-panel {
  padding: 2rem;
  background: linear-gradient(180deg, #f6f9fb 0%, #ffffff 100%);
}

.landing-contact-response {
  color: var(--landing-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.landing-contact-card {
  background-color: #fff;
}

.landing-contact-card:hover {
  transform: none;
  border-color: var(--landing-line);
  box-shadow: var(--landing-shadow);
}

.landing-contact-meta {
  color: #7b8e9c;
  font-size: 0.92rem;
  text-align: center;
}

@keyframes landing-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 991.98px) {
  .landing-hero-title {
    max-width: none;
  }

  .landing-hero-visual {
    display: grid;
    gap: 1rem;
  }

  .landing-floating-card {
    position: static;
    max-width: none;
    animation: none;
  }

  .landing-role-head {
    flex-direction: column;
  }

  .landing-cta-banner {
    grid-template-columns: 1fr;
  }

  .landing-contact-panel {
    padding: 1.75rem;
  }

  .landing-shell .row {
    margin-inline: 0;
  }
}

@media (max-width: 767.98px) {
  .navbar-public {
    padding: 0.7rem 0;
  }

  .landing-badge {
    font-size: 0.86rem;
  }

  .landing-hero-title {
    font-size: 2.35rem;
  }

  .landing-lead,
  .landing-section-copy {
    font-size: 1rem;
  }

  .landing-proof-card,
  .landing-contact-panel,
  .landing-cta-banner {
    padding: 1.5rem;
  }

  .landing-hero .hero-screenshot {
    min-height: 240px;
  }

  .comparison-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .comparison-mobile-stack {
    padding: 0;
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-public,
  .landing-card,
  .landing-floating-card {
    transition: none;
    animation: none;
  }
}