:root {
  --dialog-orange: #f69251;
  --dialog-fog: #f7f7f7;
  --dialog-border: rgba(178, 178, 178, 0.38);
  --dialog-shadow: rgba(24, 24, 37, 0.12) 0px 2px 3px -2px;
  --dialog-button-shadow:
    rgba(0,0,0,0.04) 0px 1px 2px 0px,
    rgba(0,0,0,0.02) 0px 2px 4px 0px,
    rgba(0,0,0,0.02) 0px 4px 8px 0px;
  --dialog-display:
    "DM Sans",
    "Satoshi",
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --dialog-body:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  padding-top: 96px !important;
  background: var(--dialog-fog) !important;
  font-family: var(--dialog-body) !important;
  overflow-x: hidden !important;
}

.smart-shell {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  padding: 16px 24px 0 !important;
}

/* TOP FULL NAV */
.smart-top-nav {
  pointer-events: auto !important;
  margin: 0 auto !important;
  display: grid !important;
  align-items: center !important;
  grid-template-columns: 230px 1fr 230px !important;
  max-width: 1320px !important;
  min-height: 64px !important;
  padding: 13px 20px !important;
  gap: 18px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) translateZ(0) !important;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,1,.36,1),
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
  will-change: opacity, transform;
}

.smart-shell.is-scrolled .smart-top-nav {
  opacity: 0 !important;
  transform: translateY(-8px) scale(.985) translateZ(0) !important;
  pointer-events: none !important;
}

/* SPLIT 3-PART NAV */
.smart-split-nav {
  pointer-events: none !important;
  position: absolute !important;
  top: 16px !important;
  left: 24px !important;
  right: 24px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 980px !important;
  min-height: 56px !important;
  opacity: 0 !important;
  transform: translateY(8px) scale(.985) translateZ(0) !important;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,1,.36,1) !important;
  will-change: opacity, transform;
}

.smart-shell.is-scrolled .smart-split-nav {
  opacity: 1 !important;
  transform: translateY(0) scale(1) translateZ(0) !important;
  pointer-events: auto !important;
}

.smart-split-brand,
.smart-split-links,
.smart-split-actions {
  min-height: 56px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--dialog-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--dialog-shadow) !important;
  backdrop-filter: blur(8px) !important;
}

.smart-split-brand {
  width: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.smart-split-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 0 28px !important;
}

.smart-split-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 8px 0 12px !important;
}

/* SHARED BRAND */
.smart-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: #000 !important;
}

.smart-mark {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  display: inline-block !important;
  background: #000 !important;
  clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%) !important;
}

.smart-brand-text {
  color: #000 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* LINKS */
.smart-links,
.smart-actions {
  display: flex !important;
  align-items: center !important;
}

.smart-links {
  justify-content: center !important;
  gap: 24px !important;
}

.smart-actions {
  justify-content: flex-end !important;
  gap: 10px !important;
}

.smart-links a,
.smart-split-links a {
  color: #000 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: .88 !important;
}

.smart-links a:hover,
.smart-split-links a:hover {
  opacity: 1 !important;
}

/* BUTTONS */
.smart-login,
.smart-demo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition:
    transform .16s ease,
    background .22s ease,
    border-color .22s ease !important;
}

.smart-login {
  color: #000 !important;
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(178,178,178,.45) !important;
}

.smart-demo {
  color: #000 !important;
  background: var(--dialog-orange) !important;
  border-color: var(--dialog-orange) !important;
  box-shadow: var(--dialog-button-shadow) !important;
}

.smart-login:hover,
.smart-demo:hover {
  transform: translateY(-1px) !important;
}

/* GLOBAL UI */
.btn,
button.btn,
a.btn {
  border-radius: 28px !important;
  background: var(--dialog-orange) !important;
  color: #000 !important;
  border-color: var(--dialog-orange) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  box-shadow: var(--dialog-button-shadow) !important;
}

.btn.secondary,
button.btn.secondary,
a.btn.secondary {
  background: #fff !important;
  color: #000 !important;
  border-color: var(--dialog-border) !important;
  box-shadow: none !important;
}

.card,
.price-card,
.preview,
.table-card,
.lead-card,
.auth-card,
.showroom {
  background: #fff !important;
  border: 1px solid rgba(178,178,178,.32) !important;
  border-radius: 24px !important;
  box-shadow: var(--dialog-shadow) !important;
}

input,
textarea,
select {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #8b8b8b !important;
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-bottom-color: #000 !important;
  box-shadow: none !important;
}

h1,
h2 {
  font-family: var(--dialog-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.055em !important;
  color: #000 !important;
}

.kicker,
.pill-label,
.eyebrow {
  border-radius: 100px !important;
  background: #fff !important;
  color: #484758 !important;
  border: 1px solid rgba(178,178,178,.34) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* MOBILE: single pill, smooth crossfade still */
@media (max-width: 820px) {
  body {
    padding-top: 82px !important;
  }

  .smart-shell {
    padding: 12px 12px 0 !important;
  }

  .smart-top-nav {
    grid-template-columns: 1fr auto !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .smart-split-nav {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    grid-template-columns: 30px auto !important;
    max-width: 350px !important;
    min-height: 52px !important;
    gap: 12px !important;
  }

  .smart-split-brand {
    width: 30px !important;
    min-height: 52px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .smart-split-links {
    display: none !important;
  }

  .smart-split-actions {
    min-height: 52px !important;
    gap: 12px !important;
    padding: 7px 10px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--dialog-border) !important;
    box-shadow: var(--dialog-shadow) !important;
    backdrop-filter: blur(8px) !important;
  }

  .smart-links {
    display: none !important;
  }

  .smart-mark {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  .smart-brand-text {
    font-size: 16px !important;
    max-width: 170px !important;
  }

  .smart-actions {
    gap: 12px !important;
  }

  .smart-login {
    display: inline-flex !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  .smart-demo {
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  .smart-split-actions .smart-login {
    min-height: 40px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
    background: #fff !important;
  }

  .smart-split-actions .smart-demo {
    min-height: 40px !important;
    padding: 0 17px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 420px) {
  .smart-split-nav {
    max-width: 335px !important;
    grid-template-columns: 26px auto !important;
  }

  .smart-brand-text {
    max-width: 135px !important;
    font-size: 15px !important;
  }

  .smart-actions,
  .smart-split-actions {
    gap: 10px !important;
  }

  .smart-login {
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .smart-demo {
    padding: 0 14px !important;
    font-size: 13px !important;
  }

  .smart-split-actions .smart-login {
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  .smart-split-actions .smart-demo {
    padding: 0 15px !important;
    font-size: 12px !important;
  }
}
/* === ULTRA SMOOTH SHRINK ANIMATION FIX === */

/* Better browser rendering */
.smart-shell,
.smart-top-nav,
.smart-split-nav,
.smart-split-brand,
.smart-split-links,
.smart-split-actions,
.smart-mark,
.smart-login,
.smart-demo {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

/* Use one shared smooth curve */
.smart-top-nav {
  will-change: transform, opacity, max-width, padding, grid-template-columns !important;
  transition:
    max-width 420ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 420ms cubic-bezier(0.16, 1, 0.3, 1),
    gap 420ms cubic-bezier(0.16, 1, 0.3, 1),
    grid-template-columns 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 220ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Do not instantly kill top nav pointer while animating */
.smart-shell.is-scrolled .smart-top-nav {
  max-width: 860px !important;
  min-height: 56px !important;
  padding: 8px 10px 8px 14px !important;
  gap: 10px !important;
  grid-template-columns: 64px 1fr 230px !important;
  opacity: 0 !important;
  transform: translate3d(0, -10px, 0) scale(0.985) !important;
}

/* Split nav enters later, so it does not fight with top nav */
.smart-split-nav {
  will-change: transform, opacity !important;
  transition:
    opacity 260ms ease 120ms,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms !important;
}

.smart-shell.is-scrolled .smart-split-nav {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Smooth inside pieces */
.smart-split-brand,
.smart-split-links,
.smart-split-actions {
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease,
    min-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 420ms cubic-bezier(0.16, 1, 0.3, 1),
    width 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Make buttons not jump */
.smart-login,
.smart-demo {
  transition:
    transform 180ms ease,
    padding 420ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
    font-size 420ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms ease,
    color 260ms ease,
    border-color 260ms ease !important;
}

/* Mark/logo smoothness */
.smart-mark {
  transition:
    width 420ms cubic-bezier(0.16, 1, 0.3, 1),
    height 420ms cubic-bezier(0.16, 1, 0.3, 1),
    flex-basis 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Mobile smoother */
@media (max-width: 820px) {
  .smart-shell.is-scrolled .smart-top-nav {
    max-width: 92% !important;
    min-height: 52px !important;
    padding: 7px 8px !important;
    gap: 8px !important;
    grid-template-columns: 36px auto !important;
    opacity: 0 !important;
    transform: translate3d(0, -8px, 0) scale(0.985) !important;
  }

  .smart-split-nav {
    transition:
      opacity 260ms ease 120ms,
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms !important;
  }
}
.smart-logo-img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  flex: 0 0 28px !important;
}

.smart-split-brand .smart-logo-img {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

@media (max-width: 820px) {
  .smart-logo-img {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }

  .smart-split-brand .smart-logo-img {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
}
/* SHOW LOGIN BUTTON ON MOBILE NAVBAR */
@media (max-width: 420px) {
  .smart-login {
    display: inline-flex !important;
  }

  .smart-actions {
    gap: 6px !important;
  }

  .smart-login,
  .smart-demo {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  .smart-brand-text {
    max-width: 72px !important;
  }
}

/* =========================================================
   Custom scrollbar — warm premium
========================================================= */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: rgba(27, 25, 22, .05);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #fb923c, #ef5b6e);
  border-radius: 100px;
  border: 3px solid rgba(240, 236, 228, .9);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f97b31, #e94e63);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #ef7a4d rgba(27, 25, 22, .06);
}
/*
  App footer. Shared by the pages that are inside the tool (dashboard, settings) so
  the legal pages are reachable from the product itself and not only from the
  marketing site.

  Scoped to .app-footer rather than a bare `footer` selector: the landing page and
  auth page already style their own `footer` element, and a generic rule here would
  reach into those and change how they look. Every colour comes from a custom
  property each page already defines, with a plain fallback for safety.
*/
.app-footer {
  --_foot-fg: var(--stone, #636363);
  --_foot-dim: var(--pebble, #949494);
  --_foot-line: var(--border, rgba(178, 178, 178, .34));
  --_foot-line-soft: var(--border-soft, #eeeeea);
  --_foot-bg: var(--fog, #f7f7f7);
  --_foot-ink: var(--carbon, #000000);

  margin-top: 40px;
  padding: 28px 32px 34px;
  border-top: 1px solid var(--_foot-line);
  background: var(--_foot-bg);
  color: var(--_foot-fg);
  font-size: 13px;
  line-height: 1.6;
}

.app-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
}

.app-footer-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.app-footer-logo {
  font-family: var(--display, inherit);
  font-weight: 700;
  font-size: 15px;
  color: var(--_foot-ink);
  letter-spacing: -0.01em;
}

.app-footer-tag {
  color: var(--_foot-dim);
}

.app-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.app-footer-links a {
  color: var(--_foot-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.app-footer-links a:hover {
  color: var(--_foot-ink);
  border-bottom-color: var(--_foot-line);
}

/* Keyboard users need to see where they are, not only on hover. */
.app-footer-links a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
  color: var(--_foot-ink);
}

.app-footer-bottom {
  max-width: 1240px;
  margin: 18px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--_foot-line-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--_foot-dim);
  font-size: 12px;
}

@media (max-width: 720px) {
  .app-footer {
    padding: 24px 18px 28px;
  }

  .app-footer-bottom {
    flex-direction: column;
    gap: 4px;
  }
}

/*
  Skip-to-content link (Phase 8): hidden until focused, so keyboard users can
  jump past the fixed navigation. Scope-damn: .skip-link only affects the one
  anchor we add, never other links.
*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: 12px 16px;
  background: #f69251;
  color: #1b1916;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}