/* NAKLO typography and spacing refinement.
   This file intentionally preserves the original palette from style.css. */

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body:not(.control-body) {
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:not(.control-body) main {
  min-height: 68vh;
}

body:not(.control-body) h1,
body:not(.control-body) h2,
body:not(.control-body) h3,
body:not(.control-body) h4 {
  line-height: 1.12;
  text-wrap: balance;
}

body:not(.control-body) h1 {
  letter-spacing: -0.035em;
}

body:not(.control-body) h2 {
  letter-spacing: -0.025em;
}

body:not(.control-body) p,
body:not(.control-body) li,
body:not(.control-body) dd,
body:not(.control-body) dt {
  font-size: 0.98rem;
}

body:not(.control-body) small {
  font-size: 0.8rem;
}

body:not(.control-body) .eyebrow {
  font-size: 0.76rem;
  font-weight: 800;
}

body:not(.control-body) .site-header {
  background: linear-gradient(90deg, #061611 0%, #0a2419 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  min-height: 78px;
  padding-left: clamp(20px, 5vw, 72px);
  padding-right: clamp(20px, 5vw, 72px);
}

body:not(.control-body) .site-header .brand-logo img {
  height: 56px;
}

body:not(.control-body) .nav {
  font-size: 16px;
  gap: 20px;
}

body:not(.control-body) .nav a,
body:not(.control-body) .nav-menu > button,
body:not(.control-body) .user-chip {
  color: #ffffff;
  font-size: 0.94rem;
}

body:not(.control-body) .nav-dropdown a,
body:not(.control-body) .account-dropdown a {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.35;
}

body:not(.control-body) .button {
  font-size: 0.92rem;
  min-height: 46px;
  padding: 12px 20px;
}

body:not(.control-body) label {
  font-size: 0.88rem;
}

body:not(.control-body) input,
body:not(.control-body) select,
body:not(.control-body) textarea {
  font-size: 0.94rem;
  min-height: 46px;
}

body:not(.control-body) table {
  font-size: 0.88rem;
}

body:not(.control-body) th {
  font-size: 0.76rem;
}

body:not(.control-body) .section,
body:not(.control-body) .account-page,
body:not(.control-body) .listing-workspace,
body:not(.control-body) .subscription-suite,
body:not(.control-body) .partner-landing {
  width: min(calc(100% - 32px), 1480px);
  margin-left: auto;
  margin-right: auto;
}

body:not(.control-body) .form-panel,
body:not(.control-body) .info-panel,
body:not(.control-body) .account-card,
body:not(.control-body) .subscription-plan-card {
  padding-top: max(20px, 1.5vw);
  padding-bottom: max(20px, 1.5vw);
}

body:not(.control-body) .site-footer {
  padding-left: clamp(22px, 6vw, 88px);
  padding-right: clamp(22px, 6vw, 88px);
}

body:not(.control-body) .site-footer h2 {
  font-size: 0.92rem;
}

body:not(.control-body) .site-footer p,
body:not(.control-body) .site-footer a,
body:not(.control-body) .site-footer span {
  font-size: 0.84rem;
  line-height: 1.6;
}

@media (max-width: 980px) {
  html {
    font-size: 16px;
  }

  body:not(.control-body) .site-header {
    gap: 12px;
  }
}

@media (max-width: 720px) {
  html {
    font-size: 16px;
  }

  body:not(.control-body) .site-header {
    min-height: 68px;
    padding: 10px 16px;
  }

  body:not(.control-body) .site-header .brand-logo img {
    height: 44px;
  }

  body:not(.control-body) .nav {
    font-size: 14px;
    gap: 14px;
  }

  body:not(.control-body) .nav a,
  body:not(.control-body) .nav-menu > button,
  body:not(.control-body) .user-chip {
    font-size: 0.86rem;
  }

  body:not(.control-body) .section,
  body:not(.control-body) .account-page,
  body:not(.control-body) .listing-workspace,
  body:not(.control-body) .subscription-suite,
  body:not(.control-body) .partner-landing {
    width: min(calc(100% - 24px), 100%);
  }
}

/* NAKLO brand system alignment */
body:not(.control-body) {
  background:
    radial-gradient(circle at 85% -12%, rgba(47, 172, 98, 0.1), transparent 30%),
    #f4f8f5;
}

body:not(.control-body) .site-header {
  background: linear-gradient(90deg, #061611 0%, #0a2419 100%);
  box-shadow: 0 14px 36px rgba(6, 22, 17, 0.18);
}

body:not(.control-body) .site-header .brand-logo img {
  filter: drop-shadow(0 12px 22px rgba(47, 172, 98, 0.16));
}

body:not(.control-body) .nav a,
body:not(.control-body) .nav-menu > button,
body:not(.control-body) .user-chip {
  color: #ffffff;
}

body:not(.control-body) .nav a:hover,
body:not(.control-body) .nav-menu > button:hover,
body:not(.control-body) .user-chip:hover {
  color: #9ef2bc;
}

body:not(.control-body) .nav-dropdown a,
body:not(.control-body) .account-dropdown a {
  color: #071611;
}

body:not(.control-body) .nav-dropdown a:hover,
body:not(.control-body) .account-dropdown a:hover {
  background: #eaf7ef;
  color: #061611;
}

body:not(.control-body) .hero-overlay {
  background: linear-gradient(90deg, rgba(6, 22, 17, 0.9), rgba(10, 36, 25, 0.62), rgba(47, 172, 98, 0.16));
}

body:not(.control-body) .button.primary,
body:not(.control-body) button.button.primary,
body:not(.control-body) .subscription-plan-card .button.primary {
  background: linear-gradient(135deg, #2fac62, #16864b);
  border-color: #2fac62;
  box-shadow: 0 12px 28px rgba(47, 172, 98, 0.18);
}

body:not(.control-body) .button.primary:hover,
body:not(.control-body) button.button.primary:hover,
body:not(.control-body) .subscription-plan-card .button.primary:hover {
  background: linear-gradient(135deg, #38c873, #1d9355);
}

body:not(.control-body) .button.secondary,
body:not(.control-body) .hero-carousel .button.secondary {
  background: #ffffff;
  border-color: rgba(6, 22, 17, 0.12);
  color: #061611;
}

body:not(.control-body) .eyebrow,
body:not(.control-body) .material-pill,
body:not(.control-body) .home-hero-card span {
  color: #2fac62;
}

body:not(.control-body) .listing-card,
body:not(.control-body) .stat-card,
body:not(.control-body) .form-panel,
body:not(.control-body) .info-panel,
body:not(.control-body) .account-card,
body:not(.control-body) .subscription-plan-card,
body:not(.control-body) .legal-paper,
body:not(.control-body) .legal-summary-panel,
body:not(.control-body) .billing-info-card,
body:not(.control-body) .billing-history-card {
  border-color: #d7e4dc;
  box-shadow: 0 16px 36px rgba(6, 22, 17, 0.055);
}

body:not(.control-body) .impact-band,
body:not(.control-body) .home-how,
body:not(.control-body) .site-footer {
  background: #061611;
}

body:not(.control-body) .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body:not(.control-body) .support-launcher,
body:not(.control-body) .support-avatar,
body:not(.control-body) .avatar {
  background: linear-gradient(135deg, #2fac62, #16864b);
}

body:not(.control-body) input:focus,
body:not(.control-body) select:focus,
body:not(.control-body) textarea:focus {
  border-color: #2fac62;
  box-shadow: 0 0 0 3px rgba(47, 172, 98, 0.12);
  outline: 0;
}

body:not(.control-body) .legal-hero {
  background: linear-gradient(120deg, #061611 0%, #0a2419 46%, #176b40 100%);
}

body:not(.control-body) .legal-meta span,
body:not(.control-body) .legal-hero aside {
  border-color: rgba(158, 242, 188, 0.28);
}

body:not(.control-body) .plan-current-pill,
body:not(.control-body) .plan-trial-note {
  background: #eaf7ef;
  border-color: #bfe7ce;
  color: #061611;
}