/* ПодпишиДок — light product theme */
:root {
  --gold: #B98B17;
  --gold-light: #E1B84D;
  --gold-dim: rgba(185, 139, 23, 0.11);
  --gold-border: rgba(185, 139, 23, 0.22);
  --shell: #F7F8FB;
  --surface: #FFFFFF;
  --card: #F3F5F8;
  --input: #F8FAFC;
  --bright: #151922;
  --muted: #667085;
  --faint: #D9DEE8;
  --paper: #F2EEE4;
  --paper-text: #20242D;
  --paper-muted: #727B89;
  --red: #D92D20;
  --blue: #2563EB;
  --green: #16A34A;
}

html {
  background: #F7F8FB;
}

body {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 42%, #F3F5F8 100%) !important;
  color: #151922 !important;
}

body::selection {
  background: rgba(185,139,23,.22);
}

/* Shared light navigation */
nav,
.site-nav,
.header {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(19,26,38,.08) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-logo,
.site-nav .nav-logo,
.logo,
.foot-logo {
  color: #111827 !important;
}

.nav-logo-name,
.site-nav .nav-logo-name,
.logo span,
.foot-logo span {
  color: #111827 !important;
}

.nav-logo-name span,
.site-nav .nav-logo-name span,
.logo span,
.foot-logo span {
  color: #B98B17 !important;
}

.nav-logo-badge,
.site-nav .nav-logo-badge,
.logo-badge,
.foot-logo-badge {
  background: linear-gradient(135deg, #F2C94C, #B98B17) !important;
  color: #151922 !important;
  box-shadow: 0 8px 18px rgba(185,139,23,.22);
}

.nav-links a,
.site-nav .nav-links a,
.nav-login,
.site-nav .nav-account {
  color: #667085 !important;
}

.nav-links a:hover,
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active,
.nav-login:hover,
.site-nav .nav-account:hover {
  color: #B98B17 !important;
  background: rgba(185,139,23,.08) !important;
}

.nav-cta,
.site-nav .nav-cta,
.btn-primary,
.hdr-solid,
.dl-pdf,
.blog-cta .cta-btn,
.cta-box .cta-btn,
.sticky-cta a {
  background: linear-gradient(135deg, #F2C94C, #B98B17) !important;
  color: #151922 !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(185,139,23,.22) !important;
}

.nav-cta:hover,
.site-nav .nav-cta:hover,
.btn-primary:hover,
.hdr-solid:hover,
.dl-pdf:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(185,139,23,.3) !important;
}

.btn-secondary,
.hdr-outline,
.dl-jpg {
  background: #FFFFFF !important;
  color: #334155 !important;
  border-color: #D9DEE8 !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

.btn-secondary:hover,
.hdr-outline:hover,
.dl-jpg:hover {
  color: #B98B17 !important;
  border-color: rgba(185,139,23,.35) !important;
  background: #FFFDF6 !important;
}

/* Landing */
.hero {
  min-height: auto !important;
  padding-top: 118px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(242,201,76,.22), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 58%, #F3F5F8 100%) !important;
  overflow: hidden;
}

.hero::before {
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px) !important;
  opacity: .6;
  mask-image: radial-gradient(ellipse at center, black 24%, transparent 70%);
}

.hero-badge {
  background: #FFF8E1 !important;
  color: #8A6400 !important;
  border-color: rgba(185,139,23,.22) !important;
  box-shadow: 0 10px 24px rgba(185,139,23,.08);
}

.hero h1,
.section-title,
.cta-section h2,
.faq-item summary,
.feature h3,
.step h3 {
  color: #111827 !important;
}

.hero p,
.section-sub,
.feature p,
.step p,
.cta-section p,
.faq-item p,
.stat-label,
.hero .hero-legal-note {
  color: #667085 !important;
}

#how .section-wrap {
  max-width: 1180px;
}

#how .section-sub {
  max-width: 720px;
}

#how .steps {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}

#how .step {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-height: 196px;
  padding: 24px 20px 22px !important;
  border-radius: 8px !important;
  overflow: visible;
  box-shadow: 0 14px 32px rgba(15,23,42,.055) !important;
}

#how .step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #F2C94C, #B98B17);
}

#how .step-num {
  width: 46px !important;
  height: 46px !important;
  border-radius: 8px !important;
  margin-bottom: 18px !important;
  background: #FFF8E1 !important;
  color: #8A6400 !important;
  border: 1px solid rgba(185,139,23,.26) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 22px rgba(185,139,23,.12);
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

#how .step h3 {
  margin: 10px 0 10px !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}

#how .step p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

@media (min-width: 900px) {
  #how .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 46px;
    right: -17px;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, rgba(185,139,23,.28), rgba(185,139,23,0));
  }
}

@media (max-width: 1024px) {
  #how .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  #how .steps {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #how .step {
    min-height: 0;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px 16px !important;
  }

  #how .step::before {
    width: 4px;
    height: auto;
    bottom: 0;
    right: auto;
    border-radius: 8px 0 0 8px;
  }

  #how .step-num {
    grid-row: span 2;
    margin-bottom: 0 !important;
  }
}

.hero-trust span {
  background: #FFFFFF !important;
  color: #334155 !important;
  border-color: #E5E7EB !important;
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

.hero-preview {
  background: #FFFFFF !important;
  border-color: rgba(15,23,42,.09) !important;
  box-shadow: 0 28px 80px rgba(15,23,42,.13) !important;
}

.preview-bar,
.mock-sidebar,
.mock-toolbar {
  background: #F8FAFC !important;
  border-color: #E5E7EB !important;
}

.preview-url,
.mock-tool,
.mock-dl-ghost {
  background: #FFFFFF !important;
  color: #64748B !important;
  border-color: #E5E7EB !important;
}

.preview-img,
.preview-mockup {
  background: #F8FAFC !important;
}

.mock-doc {
  background: #FFFFFF !important;
  box-shadow: 0 18px 38px rgba(15,23,42,.10) !important;
}

.mock-line {
  background: #E5E7EB !important;
}

.stats,
.section-bg-alt,
#features,
#faq,
#testimonials,
#pricing {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: #E5E7EB !important;
}

.stat,
.feature,
.step,
.faq-item,
.bt-card,
.post-card,
.blog-cta,
.cta-box {
  background: #FFFFFF !important;
  color: #151922 !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.06) !important;
}

.stat {
  background: #FFFFFF !important;
  border-color: rgba(185,139,23,.18) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.08) !important;
}

.stat-kicker {
  background: rgba(185,139,23,.10) !important;
  color: #B98B17 !important;
}

.stat-num,
.feature-icon,
.section-tag,
.check,
.bt-cat,
.bt-read,
.post-meta .cat,
.article-meta .cat {
  color: #B98B17 !important;
}

.compare-table {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.07) !important;
}

.compare-table th,
.compare-table td {
  border-color: #E5E7EB !important;
  color: #334155 !important;
}

.cta-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(242,201,76,.18), transparent 42%),
    #FFFFFF !important;
  border-color: #E5E7EB !important;
}

footer,
.site-footer {
  background: #FFFFFF !important;
  color: #334155 !important;
  border-color: #E5E7EB !important;
}

footer a,
.site-footer a,
.footer-tagline,
.footer-bottom {
  color: #667085 !important;
}

footer a:hover,
.site-footer a:hover {
  color: #B98B17 !important;
}

/* Mobile navigation */
.nav-burger,
.site-nav .nav-burger {
  background: #FFFFFF !important;
  border-color: #D9DEE8 !important;
}

.nav-burger span,
.site-nav .nav-burger span {
  background: #B98B17 !important;
}

.nav-mobile {
  background: rgba(255,255,255,.98) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.10) !important;
}

.nav-mobile-inner a {
  color: #111827 !important;
  border-bottom-color: #E5E7EB !important;
}

.nav-mobile-account {
  color: #667085 !important;
}

.nav-mobile-cta {
  background: linear-gradient(135deg, #F2C94C, #B98B17) !important;
  color: #151922 !important;
}

/* Modals */
.modal-overlay {
  background: rgba(15,23,42,.46) !important;
}

.modal-box,
.modal {
  background: #FFFFFF !important;
  color: #151922 !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 26px 72px rgba(15,23,42,.22) !important;
}

.modal-title,
.modal-header .modal-title {
  color: #111827 !important;
}

.modal-subtitle,
.modal-desc,
.modal-footer-link,
.form-label,
.field-label {
  color: #667085 !important;
}

.form-input,
.field-input {
  background: #F8FAFC !important;
  color: #111827 !important;
  border-color: #D9DEE8 !important;
}

.form-input:focus,
.field-input:focus {
  border-color: #B98B17 !important;
  box-shadow: 0 0 0 4px rgba(185,139,23,.12) !important;
}

/* Editor app */
.app-wrap {
  background: #F3F5F8 !important;
}

.sidebar,
.toolbar {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  box-shadow: 8px 0 26px rgba(15,23,42,.04);
}

.toolbar {
  box-shadow: -8px 0 26px rgba(15,23,42,.04);
}

.sidebar-section,
.toolbar-divider,
.download-section {
  border-color: #E5E7EB !important;
}

.section-title,
.download-label {
  color: #7B8190 !important;
}

.tool-btn,
.tool-action,
.template-btn {
  background: #FFFFFF !important;
  color: #334155 !important;
  border-color: #E5E7EB !important;
}

.tool-btn:hover,
.tool-action:hover,
.template-btn:hover {
  background: #FFF8E1 !important;
  color: #8A6400 !important;
  border-color: rgba(185,139,23,.28) !important;
}

.tool-icon {
  color: #B98B17 !important;
}

.editor-area {
  background:
    radial-gradient(circle at 18% 8%, rgba(242,201,76,.18), transparent 24%),
    linear-gradient(180deg, #F7F2E8 0%, #EEE7DA 100%) !important;
}

.flow-step {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.08) !important;
  color: #667085 !important;
}

.flow-step.is-active {
  background: linear-gradient(135deg, #F2C94C, #B98B17) !important;
  color: #151922 !important;
}

.doc-container,
.upload-zone {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  box-shadow: 0 28px 70px rgba(15,23,42,.12) !important;
}

.upload-zone {
  border-style: dashed !important;
}

.upload-zone:hover,
.upload-zone.dragover {
  background: #FFFDF6 !important;
  border-color: #B98B17 !important;
}

.upload-title {
  color: #111827 !important;
}

.upload-sub,
.upload-trust,
.instructions,
.sync-hint {
  color: #667085 !important;
}

.upload-formats {
  background: #F3F5F8 !important;
  color: #667085 !important;
}

.stamp-add,
.stamp-thumb {
  background: #FFFFFF !important;
  border-color: #D9DEE8 !important;
}

.tool-action:disabled,
.dl-btn:disabled {
  opacity: .42 !important;
}

.loading-overlay {
  background: rgba(255,255,255,.78) !important;
  color: #111827 !important;
}

.toast {
  background: #111827 !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.22) !important;
}

/* CMS pages and blog */
main.page-main,
.article-head,
article.content,
.tags {
  color: #334155 !important;
}

h1.page-title,
h1.article-title,
.blog-hero h1,
.post-title,
.empty h2,
.blog-cta h2,
.cta-box h3,
article.content h2,
article.content h3,
.page-content h2,
.page-content h3 {
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}

.page-content,
.page-content p,
article.content p,
article.content ul,
article.content ol,
.lead,
.blog-hero p,
.post-excerpt,
.blog-cta p,
.cta-box p {
  color: #475467 !important;
}

.page-breadcrumb,
.article-meta,
.post-meta,
.post-foot,
.page-meta,
.breadcrumb {
  color: #667085 !important;
  border-color: #E5E7EB !important;
}

.blog-nav a,
.pagination a,
.pagination span,
.tag {
  background: #FFFFFF !important;
  color: #475467 !important;
  border-color: #E5E7EB !important;
}

.blog-nav a:hover,
.blog-nav a.active,
.pagination .current {
  background: #FFF8E1 !important;
  color: #8A6400 !important;
  border-color: rgba(185,139,23,.32) !important;
}

.search-box input,
article.content table {
  background: #FFFFFF !important;
  color: #111827 !important;
  border-color: #D9DEE8 !important;
}

.post-cover,
.bt-cover {
  background: linear-gradient(135deg, #FFF8E1, #EEF4FF) !important;
  color: #B98B17 !important;
}

article.content blockquote,
.page-content blockquote {
  color: #667085 !important;
  border-left-color: #B98B17 !important;
  background: #FFFDF6 !important;
  padding: 14px 18px !important;
  border-radius: 0 12px 12px 0;
}

article.content code {
  background: #F3F5F8 !important;
  color: #8A6400 !important;
}

.related,
.related-box,
.rel-card {
  background: #FFFFFF !important;
  color: #151922 !important;
  border-color: #E5E7EB !important;
}

.related-box,
.rel-card {
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.06) !important;
}

.related h2,
.related-box h2,
.related-box h3,
.rel-title {
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

.related-box p,
.related-box li,
.share-title {
  color: #667085 !important;
}

.related-box a,
.share-links a {
  background: #FFFFFF !important;
  color: #475467 !important;
  border-color: #D9DEE8 !important;
}

.related-box a:hover,
.share-links a:hover {
  background: #FFF8E1 !important;
  color: #8A6400 !important;
  border-color: rgba(185,139,23,.30) !important;
}

.pass-meter-bar {
  background: #E5E7EB !important;
}

.terms-checkbox {
  background: #FFFFFF !important;
  border-color: #D9DEE8 !important;
}

/* Account, dashboard and utility screens */
.signup-card,
.dash-card,
.dash-stat-card,
.dash-tile,
.dash-empty,
.err {
  background: #FFFFFF !important;
  color: #151922 !important;
  border: 1px solid rgba(19,26,38,.08) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.08) !important;
}

.signup-card,
.err {
  border-radius: 18px !important;
  padding: 30px !important;
}

.section-heading,
.dash-title,
.dash-card-title,
.dash-tile-name,
.err h1 {
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

.section-subtitle,
.form-footer-link,
.dash-subtitle,
.dash-stat-label,
.dash-tile-meta,
.dash-empty,
.err p {
  color: #667085 !important;
}

.dash-header {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(19,26,38,.08) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.06) !important;
}

.dash-logo,
.dash-user-name {
  color: #111827 !important;
}

.dash-logo-badge,
.dash-avatar {
  background: linear-gradient(135deg, #F2C94C, #B98B17) !important;
  color: #151922 !important;
}

.dash-main {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 46%, #F3F5F8 100%) !important;
}

.dash-sidebar {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(19,26,38,.08) !important;
}

.dash-nav-link,
.dash-logout-btn,
.dash-btn-outline {
  color: #667085 !important;
  border-color: #D9DEE8 !important;
}

.dash-nav-link:hover,
.dash-nav-link.active,
.dash-btn-outline:hover,
.dash-logout-btn:hover {
  background: #FFF8E1 !important;
  color: #8A6400 !important;
  border-color: rgba(185,139,23,.30) !important;
}

.dash-table th,
.dash-table td,
.dash-nav-divider {
  border-color: #E5E7EB !important;
}

.dash-table th {
  color: #667085 !important;
}

.dash-table td,
.dash-field-label {
  color: #151922 !important;
}

.dash-input {
  background: #F8FAFC !important;
  color: #151922 !important;
  border-color: #D9DEE8 !important;
}

.dash-input:focus {
  border-color: #B98B17 !important;
  box-shadow: 0 0 0 4px rgba(185,139,23,.12) !important;
}

.dash-btn,
.err a {
  background: linear-gradient(135deg, #F2C94C, #B98B17) !important;
  color: #151922 !important;
  border: none !important;
  box-shadow: 0 12px 26px rgba(185,139,23,.22) !important;
}

.dash-status-signed,
.dash-msg.success {
  background: rgba(22,163,74,.10) !important;
  color: #15803D !important;
  border-color: rgba(22,163,74,.22) !important;
}

.dash-status-sent {
  background: rgba(37,99,235,.10) !important;
  color: #1D4ED8 !important;
}

.dash-btn-danger,
.dash-msg.error {
  background: rgba(217,45,32,.10) !important;
  color: #B42318 !important;
  border-color: rgba(217,45,32,.24) !important;
}

.err {
  max-width: 520px !important;
}

.err-code {
  background: linear-gradient(135deg, #B98B17, #F2C94C) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

@media (max-width: 768px) {
  .hero {
    padding-top: 96px !important;
  }

  .header {
    gap: 8px !important;
  }

  .logo {
    min-width: 0;
  }

  .header-right,
  .header-user {
    gap: 6px !important;
    flex-shrink: 0;
  }

  .hdr-btn {
    border-radius: 10px !important;
    line-height: 1.05 !important;
  }

  .header .logo {
    flex: 1 1 auto;
    max-width: none;
    overflow: visible;
  }

  .header .hdr-solid {
    min-width: 104px;
  }

  .compare-table {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    table-layout: fixed;
  }

  .compare-table th,
  .compare-table td {
    padding: 12px 8px !important;
    font-size: 12px !important;
    line-height: 1.35;
    word-break: break-word;
  }

  .sidebar,
  .dash-sidebar,
  .flow-steps,
  .toolbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sidebar::-webkit-scrollbar,
  .dash-sidebar::-webkit-scrollbar,
  .flow-steps::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar {
    display: none;
  }

  .sidebar,
  .toolbar {
    box-shadow: none !important;
  }

  .toolbar {
    background: rgba(255,255,255,.96) !important;
    position: static;
    bottom: auto;
    z-index: auto;
  }
}

@media (max-width: 480px) {
  .header {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 6px !important;
  }

  .header .logo {
    font-size: 18px !important;
    gap: 8px !important;
  }

  .header .logo-badge {
    width: 28px !important;
    height: 28px !important;
  }

  .header-right {
    gap: 6px !important;
  }

  .header-right .hdr-outline {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .header-right .hdr-solid {
    min-width: 98px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 0 !important;
  }

  .header-right .hdr-solid::after {
    content: "Сохранить";
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
}