:root {
  --ink: #16150f;
  --paper: #faf7f0;
  --paper-alt: #f2ede1;
  --accent: #8a6d3b;
  --line: #ddd5c2;
  --radius: 2px;
  --maxw: 1040px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}
.wrap.narrow { max-width: 720px; }
.center { text-align: center; }

h1, h2 { font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px 0; }
h1 { font-size: clamp(34px, 8vw, 58px); }
h2 { font-size: clamp(22px, 5vw, 32px); }
p { line-height: 1.6; margin: 0 0 14px 0; }

.hero {
  padding: 72px 0 56px;
  text-align: center;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero-sub { font-size: clamp(16px, 3.5vw, 20px); color: #555; margin-bottom: 10px; }
.hero-desc { max-width: 520px; margin: 0 auto 30px; color: #444; }
.micro { font-size: 12px; color: #8a8474; margin-top: 12px; }

.price { font-weight: 400; }

.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 52px;
  min-width: 240px;
  transition: opacity 0.15s ease;
}
.btn-primary:active { opacity: 0.75; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.section { padding: 56px 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--paper-alt); }
.section-dark { background: var(--ink); color: var(--paper); border-top: none; }
.section-dark h2, .section-dark p { color: var(--paper); }
.section-final { background: var(--paper-alt); }

.lead { color: #333; }
.lead.strong { font-weight: 700; }
.muted { color: #7a7461; font-size: 14px; }

.list-dash { list-style: none; padding: 0; margin: 0 0 14px 0; }
.list-dash li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 8px;
  color: #333;
}
.list-dash li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.big-statement {
  font-size: clamp(30px, 9vw, 54px);
  line-height: 1.1;
  margin-bottom: 22px;
}
.chain {
  font-size: clamp(13px, 3vw, 15px);
  letter-spacing: 0.5px;
  color: #cfc8b4;
  max-width: 640px;
  margin: 0 auto;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(5, 1fr); }
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 14px;
  font-size: 14px;
  font-weight: 600;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card .num {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 8px;
}

.grid-materials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.material {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
.material .emoji { display: block; font-size: 30px; margin-bottom: 10px; }

.principles {
  list-style: none;
  padding: 0;
  margin: 24px 0 0 0;
}
.principles li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 17px;
}
.principles li:last-child { border-bottom: none; }

.price-big { font-size: clamp(46px, 12vw, 72px); font-weight: 700; margin: 6px 0 26px; }

.faq { margin-top: 24px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 10px; color: #444; font-size: 15px; }

.error-msg { color: #a33; font-size: 14px; margin-top: 12px; }

.footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 16px; }
.footer-links a { color: #6b6555; text-decoration: none; font-size: 13px; }
.footer-links a:hover { text-decoration: underline; }
.footer-note { color: #a49d89; font-size: 12px; margin: 0; }

@media (max-width: 380px) {
  .btn-primary { width: 100%; }
}

/* ---- Согласие на обработку персональных данных ---- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 440px;
  margin: 16px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent a { color: inherit; text-decoration: underline; }
.consent.consent-error span { color: #b3261e; }
.consent-hint { color: #b3261e; font-size: 13px; margin: 8px auto 0; max-width: 440px; }
.offer-note { font-size: 12px; color: #8a8474; margin: 8px auto 0; max-width: 440px; }
.offer-note a { color: inherit; text-decoration: underline; }
.section-dark .consent-hint { color: #ff9b8f; }
.section-dark .consent.consent-error span { color: #ff9b8f; }
.section-dark .offer-note { color: #cfc8b4; }

.footer-note a { color: inherit; }

/* ---- Юридические страницы ---- */
.legal { padding: 40px 20px 60px; }
.legal h1 { font-size: clamp(24px, 5vw, 32px); }
.legal h2 { font-size: 18px; margin-top: 28px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: #333; }
.legal ul, .legal ol { padding-left: 20px; margin: 0 0 14px 0; }
.legal .muted { font-size: 13px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; margin-bottom: 14px; }
.legal td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.legal td:first-child { width: 40%; color: #555; }

/* Кнопка на тёмном фоне (блок с ценой) - светлая, чтобы была видна */
.section-dark .btn-primary { background: var(--paper); color: var(--ink); }

.price-note { font-size: 13px; color: #cfc8b4; max-width: 420px; margin: -6px auto 22px; }

.price-local { font-size: 16px; font-weight: 600; color: var(--paper); margin: -10px auto 10px; letter-spacing: .2px; }