/* ============================================================
   05-raspiska — «Нотариальная бумага»
   Сепия / слоновая кость, линованный лист, PT Serif + Caveat,
   рамка-виньетка, мотив синей шариковой ручки и штампа.
   ============================================================ */

:root {
  --paper:       #f3ead4;   /* слоновая кость */
  --paper-deep:  #eadfc2;   /* тёмная бумага */
  --paper-sheet: #faf5e6;   /* лист документа */
  --ink:         #2c2114;   /* сепия-чернила текста */
  --ink-soft:    #6d5b40;   /* выцветшие чернила */
  --pen:         #1d3f96;   /* синяя шариковая ручка */
  --pen-soft:    #33509f;
  --rule:        #d9c9a3;   /* линовка */
  --frame:       #8a7351;   /* рамка-виньетка */
  --frame-soft:  #b9a67f;
  --seal:        #973a28;   /* сургуч — предупреждения */
  --ok:          #4c6b3c;
  --shadow: 0 2px 4px rgba(60, 42, 16, .10), 0 14px 34px rgba(60, 42, 16, .16);
  --f-serif: "PT Serif", Georgia, serif;
  --f-hand: "Caveat", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* фактура старой бумаги: шум + едва заметное затемнение к краям */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,252,240,.55), rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 50% 110%, rgba(97,74,40,.12), rgba(0,0,0,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(29, 63, 150, .18); }

a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pen-soft); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ---------- Шапка ---------- */
.site-head {
  border-bottom: 1px solid var(--frame-soft);
  background: rgba(250, 245, 230, .6);
}
.site-head .wrap {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 12px;
}
.brand {
  font-weight: 700; font-size: 19px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.brand .brand-pen { color: var(--pen); }
.site-nav { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 15px; }
.site-nav a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--frame-soft); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--pen); border-bottom-color: var(--pen); }

/* ---------- Герой ---------- */
.hero { padding: 44px 0 8px; text-align: center; }
.hero .kicker {
  display: inline-block; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px;
}
.hero .kicker::before, .hero .kicker::after { content: "—"; margin: 0 10px; color: var(--frame-soft); }
h1 {
  font-size: clamp(27px, 4.6vw, 42px);
  line-height: 1.2; font-weight: 700; max-width: 21ch; margin: 0 auto;
}
.hero .lede {
  max-width: 62ch; margin: 16px auto 0; color: var(--ink-soft); font-size: 18px;
}

/* ---------- Инструмент: мастер + превью ---------- */
.tool { padding: 34px 0 10px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }

/* Карточка мастера — бланк с рамкой-виньеткой */
.wizard {
  background: var(--paper-sheet);
  border: 1px solid var(--frame);
  box-shadow: inset 0 0 0 4px var(--paper-sheet), inset 0 0 0 5px var(--frame-soft), var(--shadow);
  padding: 26px 26px 22px;
  position: relative;
}
.wizard::before, .wizard::after,
.sheet-frame::before, .sheet-frame::after {
  content: "❧"; position: absolute; color: var(--frame-soft); font-size: 15px; line-height: 1;
}
.wizard::before { top: 8px; left: 10px; }
.wizard::after { top: 8px; right: 10px; transform: scaleX(-1); }

.steps-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--frame-soft); color: var(--ink-soft);
  display: grid; place-items: center; font-size: 14px; background: transparent;
  font-family: var(--f-serif); cursor: pointer;
}
.step-dot.done { border-color: var(--pen); color: var(--pen); }
.step-dot.active { background: var(--pen); border-color: var(--pen); color: #fdfaf1; }
.step-line { flex: 0 0 22px; height: 1px; background: var(--frame-soft); }
.steps-bar .steps-label { margin-left: auto; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.step-title {
  font-size: 21px; font-weight: 700; margin-bottom: 4px;
}
.step-title .para { color: var(--pen); margin-right: 8px; }
.step-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 16px; }

fieldset { border: 0; }
.fs-legend {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding-bottom: 5px; margin: 18px 0 10px;
  display: flex; align-items: baseline; gap: 8px;
}
.fs-legend b { color: var(--ink); letter-spacing: .1em; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.frow.single { grid-template-columns: 1fr; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }

.fld { display: block; margin-bottom: 10px; }
.fld > span {
  display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 2px;
}
.fld input[type="text"], .fld input[type="number"], .fld input[type="date"], .fld select {
  width: 100%;
  font-family: var(--f-serif); font-size: 16.5px; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--frame-soft);
  border-radius: 0;
  padding: 5px 2px 4px;
  transition: border-color .15s, box-shadow .15s;
}
.fld input:focus, .fld select:focus {
  outline: none; border-bottom: 2px solid var(--pen);
  box-shadow: 0 6px 12px -8px rgba(29, 63, 150, .35);
}
.fld input::placeholder { color: #b3a486; font-style: italic; }
.fld select { cursor: pointer; }

.radio-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 16px; }
.radio-row label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.radio-row input { accent-color: var(--pen); width: 16px; height: 16px; }

.sum-words {
  font-family: var(--f-hand); font-size: 21px; color: var(--pen);
  min-height: 28px; margin: 2px 0 8px; line-height: 1.3;
}

/* Подсказка «на полях» */
.hint {
  margin: 16px 0 4px; padding: 11px 14px 11px 16px;
  border-left: 3px double var(--pen);
  background: rgba(29, 63, 150, .05);
  font-size: 15px; color: var(--ink-soft);
}
.hint b { color: var(--ink); }
.hint .hint-mark { font-family: var(--f-hand); color: var(--pen); font-size: 18px; margin-right: 6px; }

.wiz-nav { display: flex; gap: 12px; margin-top: 20px; align-items: center; }
.btn {
  font-family: var(--f-serif); font-size: 16.5px; cursor: pointer;
  padding: 11px 22px; border-radius: 2px;
  border: 1px solid var(--pen); background: var(--pen); color: #fdfaf1;
  letter-spacing: .03em;
  box-shadow: 0 2px 0 rgba(20, 40, 100, .5);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover { background: #24499f; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--pen); box-shadow: none; }
.btn.ghost:hover { background: rgba(29, 63, 150, .07); }
.btn.big { font-size: 18px; padding: 13px 28px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.form-err { color: var(--seal); font-size: 15px; margin-top: 10px; display: none; }
.form-err.show { display: block; }

/* ---------- Превью: линованный лист ---------- */
.preview-col { position: relative; }
.preview-caption {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; margin-bottom: 10px;
}
.sheet-frame { position: relative; }
.sheet-frame::before { bottom: 6px; left: 10px; transform: scaleY(-1); z-index: 2; }
.sheet-frame::after { bottom: 6px; right: 10px; transform: scale(-1); z-index: 2; }

.sheet {
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--rule) 27px, var(--rule) 28px),
    var(--paper-sheet);
  border: 1px solid var(--frame);
  box-shadow: var(--shadow);
  padding: 30px 28px 34px;
  font-size: 15.5px; line-height: 28px; /* строки ложатся на линовку */
  position: relative;
  transform: rotate(.4deg);
  animation: sheet-in .8s cubic-bezier(.2, .9, .25, 1) both;
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(26px) rotate(1.6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
}

.sheet .doc-title { text-align: center; font-weight: 700; font-size: 19px; letter-spacing: .12em; text-transform: uppercase; }
.sheet .doc-sub { text-align: center; color: var(--ink-soft); font-size: 14px; }
.sheet .doc-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.sheet p { margin-top: 28px; text-align: justify; text-indent: 2em; }
.sheet .doc-sign { margin-top: 28px; text-indent: 0; }
.sheet .val {
  font-family: var(--f-hand); color: var(--pen); font-size: 19px; font-weight: 500;
  padding: 0 2px; white-space: pre-wrap;
}
.sheet .blank {
  color: #b3a486; letter-spacing: 2px;
}

/* ---------- Результат ---------- */
.result { display: none; padding: 30px 0 6px; }
.result.show { display: block; }
.result-head { text-align: center; position: relative; margin-bottom: 22px; }
.result-head h2 { font-size: 26px; }
.result-head .result-note { color: var(--ink-soft); font-size: 15.5px; max-width: 56ch; margin: 6px auto 0; }

/* штамп — только на экране, в печать не идёт */
.stamp {
  position: absolute; right: 4%; top: -18px;
  width: 108px; height: 108px; border-radius: 50%;
  border: 3px double var(--pen);
  color: var(--pen);
  display: grid; place-items: center;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  text-align: center; line-height: 1.5;
  transform: rotate(-12deg);
  opacity: .82;
  mix-blend-mode: multiply;
  animation: stamp-in .5s cubic-bezier(.2, 1.4, .4, 1) .25s both;
  pointer-events: none;
}
.stamp::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--pen); border-radius: 50%;
}
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-30deg) scale(1.9); }
  to   { opacity: .82; transform: rotate(-12deg) scale(1); }
}
@media (max-width: 700px) { .stamp { display: none; } }

.tabs { display: flex; gap: 0; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.tab-btn {
  font-family: var(--f-serif); font-size: 16px; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--frame-soft); border-bottom-width: 3px;
  padding: 9px 20px; margin: 0 -1px -1px 0;
}
.tab-btn.active { color: var(--pen); border-bottom-color: var(--pen); background: var(--paper-sheet); font-weight: 700; }

.pane { display: none; max-width: 820px; margin: 0 auto; }
.pane.active { display: block; }

.doc-final {
  background: var(--paper-sheet);
  border: 1px solid var(--frame);
  box-shadow: inset 0 0 0 5px var(--paper-sheet), inset 0 0 0 6px var(--frame-soft), var(--shadow);
  padding: 44px 48px;
  font-size: 16.5px; line-height: 1.8;
}
@media (max-width: 640px) { .doc-final { padding: 26px 20px; } }
.doc-final .doc-title { text-align: center; font-weight: 700; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; }
.doc-final .doc-sub { text-align: center; color: var(--ink-soft); font-size: 14px; margin-bottom: 20px; }
.doc-final .doc-meta { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 6px; flex-wrap: wrap; }
.doc-final p { margin-top: 14px; text-align: justify; text-indent: 2em; }
.doc-final .doc-sign { margin-top: 26px; text-indent: 0; }
.doc-final .u { border-bottom: 1px solid var(--ink); padding: 0 4px; }

/* Лист «от руки»: крупный текст с подчёркиваниями */
.hand-note {
  border: 1px dashed var(--frame); background: rgba(29,63,150,.05);
  padding: 13px 16px; font-size: 15px; margin-bottom: 18px; color: var(--ink-soft);
}
.hand-note b { color: var(--pen); }
.hand-sheet {
  background: var(--paper-sheet);
  border: 1px solid var(--frame);
  box-shadow: var(--shadow);
  padding: 40px 44px;
  font-size: 19px; line-height: 2.2;
}
@media (max-width: 640px) { .hand-sheet { padding: 24px 18px; font-size: 17px; } }
.hand-sheet .doc-title { text-align: center; font-weight: 700; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; }
.hand-sheet p { margin-top: 16px; text-align: justify; text-indent: 2em; }
.hand-sheet .doc-sign { text-indent: 0; margin-top: 26px; }
.hand-sheet .u { border-bottom: 1.5px solid var(--ink-soft); padding: 0 6px; }

/* Чек-лист */
.check-sheet {
  background: var(--paper-sheet); border: 1px solid var(--frame); box-shadow: var(--shadow);
  padding: 34px 38px;
}
@media (max-width: 640px) { .check-sheet { padding: 24px 18px; } }
.check-sheet h3 { font-size: 20px; margin-bottom: 4px; }
.check-sheet .check-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 16px; }
.check-item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.check-item:last-child { border-bottom: 0; }
.check-box {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 5px;
  border: 1.5px solid var(--ink-soft); border-radius: 2px;
}
.check-item b { display: block; }
.check-item span { color: var(--ink-soft); font-size: 15px; }

.result-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 24px 0 8px; }

/* ---------- CPA ---------- */
.cpa { display: none; max-width: 820px; margin: 26px auto 0; }
.cpa.show { display: block; }
.cpa-card {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--frame); border-left: 5px solid var(--pen);
  background: var(--paper-sheet); box-shadow: var(--shadow);
  padding: 20px 22px; flex-wrap: wrap;
}
.cpa-icon { font-size: 34px; flex: 0 0 auto; }
.cpa-body { flex: 1 1 260px; }
.cpa-body b { font-size: 17.5px; }
.cpa-body p { color: var(--ink-soft); font-size: 15px; margin-top: 3px; }
.cpa-card .btn { flex: 0 0 auto; }
.cpa-mark { font-size: 12px; color: var(--ink-soft); text-align: right; margin-top: 5px; letter-spacing: .08em; }

/* ---------- SEO-текст, статья ---------- */
.seo-text, .article { padding: 40px 0 8px; max-width: 780px; margin: 0 auto; }
.seo-text h2, .article h2 { font-size: 25px; margin: 34px 0 12px; }
.seo-text h3, .article h3 { font-size: 20px; margin: 24px 0 8px; }
.seo-text p, .article p { margin: 12px 0; }
.seo-text ul, .seo-text ol, .article ul, .article ol { margin: 12px 0 12px 26px; }
.seo-text li, .article li { margin: 7px 0; }
.seo-text .lead-rule, .article .lead-rule {
  border: 0; border-top: 1px solid var(--frame-soft); width: 130px; margin: 0 auto 34px;
  position: relative;
}
mark.pen {
  background: none; color: var(--pen); font-weight: 700;
}
.note-box {
  border: 1px solid var(--frame-soft); border-left: 4px solid var(--seal);
  background: rgba(151, 58, 40, .05); padding: 13px 17px; margin: 18px 0; font-size: 15.5px;
}

/* ---------- FAQ ---------- */
.faq { padding: 26px 0 20px; max-width: 780px; margin: 0 auto; }
.faq h2 { font-size: 25px; text-align: center; margin-bottom: 20px; }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 4px 2px;
}
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 17.5px; padding: 12px 30px 12px 0;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "✎"; position: absolute; right: 4px; top: 12px; color: var(--pen);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-45deg); }
.faq .faq-a { padding: 0 6px 16px 0; color: var(--ink-soft); }
.faq .faq-a p { margin: 6px 0; }

/* ---------- Подвал ---------- */
.site-foot {
  margin-top: 52px; border-top: 1px solid var(--frame-soft);
  background: var(--paper-deep);
  padding: 26px 0 34px; font-size: 14.5px; color: var(--ink-soft);
}
.site-foot .foot-links { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.site-foot .foot-links a { color: var(--ink-soft); }
.disclaimer {
  border-left: 3px solid var(--seal); padding-left: 14px; max-width: 72ch;
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (десктоп не трогаем)
   ============================================================ */

/* Секции без .wrap (seo-text, article, faq) упираются в края,
   когда окно уже, чем их max-width + поля */
@media (max-width: 840px) {
  .seo-text, .article, .faq { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 640px) {
  /* Шапка компактнее: не съедает первый экран */
  .site-head .wrap { padding-top: 10px; padding-bottom: 8px; gap: 8px 16px; }
  .brand { font-size: 16px; }
  .site-nav { font-size: 14px; gap: 2px 14px; }
  .site-nav a { padding: 3px 0; display: inline-block; }

  /* Герой: плотнее, чтобы мастер был виден без прокрутки */
  .hero { padding: 26px 0 4px; }
  .hero .kicker { font-size: 11px; letter-spacing: .18em; margin-bottom: 10px; }
  .hero .kicker::before, .hero .kicker::after { margin: 0 6px; }
  .hero .lede { font-size: 16px; margin-top: 12px; }

  /* Мастер: меньше внутренних полей, крупные тап-таргеты */
  .tool { padding: 22px 0 8px; }
  .wizard { padding: 20px 16px 18px; }
  .fld input[type="text"], .fld input[type="number"], .fld input[type="date"], .fld select {
    padding: 10px 2px 9px; /* высота поля ≥44px */
  }
  .fs-legend { flex-wrap: wrap; }
  .radio-row { gap: 10px 18px; }
  .radio-row label { min-height: 32px; }

  /* Кнопки шагов — во всю ширину, удобно пальцем */
  .wiz-nav { flex-wrap: wrap; }
  .wiz-nav .btn { flex: 1 1 auto; min-height: 46px; }
  .result-actions .btn { flex: 1 1 100%; min-height: 46px; }

  /* Превью-лист: чуть меньше полей */
  .sheet { padding: 24px 16px 28px; }

  /* Результат и CPA */
  .result-head h2 { font-size: 23px; }
  .tab-btn { padding: 9px 14px; font-size: 15px; }
  .cpa-card { padding: 16px 16px; }
  .cpa-card .btn { flex: 1 1 100%; min-height: 46px; }

  /* Типографика статей */
  .seo-text h2, .article h2, .faq h2 { font-size: 22px; }
  .seo-text h3, .article h3 { font-size: 18.5px; }
  .seo-text, .article, .faq { overflow-wrap: break-word; }
}

/* ============================================================
   ПЕЧАТЬ — печатный результат и есть продукт
   ============================================================ */
#print-root { display: none; }

@media print {
  @page { size: A4; margin: 18mm 16mm; }

  body { background: #fff; font-size: 12.5pt; color: #000; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }

  #print-root .doc-final,
  #print-root .hand-sheet,
  #print-root .check-sheet {
    border: 0; box-shadow: none; background: #fff; padding: 0;
  }
  #print-root .doc-final { font-size: 13pt; line-height: 1.9; }
  #print-root .doc-final .doc-title { font-size: 15pt; }
  #print-root .doc-sub { color: #000; }
  #print-root .u { border-bottom: 1px solid #000; }
  #print-root p { orphans: 3; widows: 3; }
  #print-root .doc-sign { page-break-inside: avoid; margin-top: 22pt; }

  #print-root .hand-sheet { font-size: 14pt; line-height: 2.3; }
  #print-root .hand-note {
    border: 1px solid #000; background: #fff; color: #000; font-size: 10.5pt;
    padding: 8pt 10pt; margin-bottom: 14pt;
  }
  #print-root .hand-note b { color: #000; }

  #print-root .check-sheet h3 { font-size: 14pt; }
  #print-root .check-item { page-break-inside: avoid; border-bottom: 1px solid #999; }
  #print-root .check-box { border-color: #000; }
  #print-root .check-item span { color: #333; }

  .no-print, .stamp, .cpa { display: none !important; }
}