/* Landgauge — дизайн-система: тёплый крем, чернила, пастель, pill-кнопки. */

:root {
  --bg: #fff8f0;
  --ink: #17131b;
  --muted: #6e6678;
  --line: #efe3d3;
  --card: #ffffff;
  --lav: #efe7ff;
  --mint: #dff3e7;
  --peach: #ffe9d3;
  --lemon: #fbf0c8;
  --sky: #e5f0ff;
  --accent: #6b4eff;
  --good: #0e7c52;
  --mid: #a87700;
  --bad: #c2402f;
  --r: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

html, body { overflow-x: clip; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }

a { color: inherit; }

/* ---------- Навигация ---------- */

.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 1140px; margin: 0 auto; padding: 22px 24px;
}
.nav__logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; text-decoration: none;
}
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { text-decoration: none; font-size: 15px; color: var(--ink); opacity: .75; }
.nav__links a:hover { opacity: 1; }
.nav__side { display: flex; align-items: center; gap: 14px; }
.nav__left { display: flex; align-items: center; gap: 18px; }
.crit__score.nav-balance {
  display: inline-flex; align-items: center;
  border: 0; cursor: pointer; font: 700 13px var(--font);
  padding: 9px 16px; border-radius: 999px; line-height: 1;
}
.nav-balance .coin { vertical-align: 0; margin-left: 0.3em; }
.nav-email { color: var(--muted); font-size: 13.5px; }
.ref__earned { margin-bottom: 14px; }
.ref__earned .crit__score { padding: 6px 16px; font-size: 14px; }

.lang {
  display: inline-flex; background: var(--card); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.lang button {
  border: 0; background: none; cursor: pointer;
  font: 700 12.5px var(--font); letter-spacing: .03em;
  padding: 5px 11px; border-radius: 999px; color: var(--muted);
}
.lang button.on { background: var(--ink); color: #fff; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--ink); color: #fff;
  font: 700 16px var(--font);
  padding: 15px 30px; border-radius: 999px;
  text-decoration: none; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 19, 27, .18); }
.btn:active { transform: translateY(0); }
.btn--small { padding: 10px 20px; font-size: 14px; }
.btn--wide { width: 100%; }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 26px rgba(23, 19, 27, .12); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* ---------- Hero ---------- */

.hero {
  max-width: 1140px; margin: 0 auto; padding: 64px 24px 48px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero__eyebrow {
  display: inline-block; background: var(--lemon); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; padding: 6px 14px; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 20px; }
.hero__sub { font-size: 17.5px; color: var(--muted); margin-bottom: 32px; max-width: 520px; }
.hero__form { display: flex; gap: 10px; max-width: 560px; }
.hero__form input {
  flex: 1; min-width: 0; font: 400 16px var(--font);
  padding: 15px 20px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); outline: none;
  transition: border-color .12s ease;
}
.hero__form input:focus { border-color: var(--ink); }
.hero__note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* демо-карточка */

.demo { position: relative; }
.demo::before {
  content: ""; position: absolute; inset: 18px -14px -14px 18px;
  background: var(--lav); border-radius: var(--r); transform: rotate(-2deg);
}
.demo__card {
  position: relative; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: 26px 28px;
  transform: rotate(1.2deg);
  box-shadow: 0 18px 44px rgba(23, 19, 27, .07);
  display: grid; gap: 16px;
}
.demo__tag {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.demo__head { display: flex; gap: 18px; align-items: center; }
.demo__score {
  flex-shrink: 0; width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: var(--mid); background: var(--lemon);
}
.demo__score small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.demo__band { font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.demo__verdict { color: var(--muted); font-size: 13px; margin-top: 4px; }
.demo__jtbd {
  background: var(--sky); border-radius: 16px; padding: 14px 18px; font-size: 13.5px;
}
.demo__jtbd b { color: var(--accent); }
.demo__problems { list-style: none; display: grid; gap: 7px; font-size: 13px; }
.demo__problems li { padding-left: 20px; position: relative; }
.demo__problems li::before { content: "→"; position: absolute; left: 0; color: var(--bad); font-weight: 700; }
.demo__problems li:last-child::before { color: var(--good); }
.demo__note { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* 5-секундный тест */

.fivesec-btn {
  margin-top: 18px; border: 0; background: none; cursor: pointer;
  font: 600 14px var(--font); color: var(--ink);
  border-bottom: 1.5px dashed var(--ink); padding: 0 0 2px;
}
.fivesec-btn:hover { color: var(--accent); border-color: var(--accent); }
.fivesec-btn[disabled] { opacity: .5; cursor: default; }
.fivesec {
  margin-top: 18px; background: var(--card); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 20px 24px; font-size: 14.5px;
  display: grid; gap: 8px; text-align: left;
}
.fivesec--loading { color: var(--muted); }
.fivesec__title {
  font-weight: 800; font-size: 15px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.fivesec__clarity { padding: 3px 10px; font-size: 13px; }
.fivesec p b { color: var(--muted); font-weight: 700; }
.fivesec .btn { justify-self: start; margin-top: 6px; }

/* ---------- Прогресс ---------- */

.progress { text-align: center; padding: 48px 24px; }
.progress__spinner {
  width: 44px; height: 44px; margin: 0 auto 18px;
  border: 4px solid var(--line); border-top-color: var(--ink);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.progress__text { color: var(--muted); font-size: 16px; }

/* ---------- Отчёт ---------- */

.report { max-width: 900px; margin: 0 auto; padding: 24px 24px 72px; }

.report__head {
  display: flex; gap: 36px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 32px;
}
.gauge { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); }
.gauge__bg { stroke: var(--line); }
.gauge__val { transition: stroke-dashoffset 1s ease; }
.gauge__num {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gauge__num strong { font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.gauge__num span { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.report__meta { flex: 1; min-width: 260px; }
.report__url { font-size: 13.5px; color: var(--muted); word-break: break-all; margin-bottom: 6px; }
.report__band { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.report__verdict { color: var(--muted); font-size: 15.5px; }

.report h3.sec { font-size: 21px; margin: 46px 0 16px; }

.jtbd {
  background: var(--sky); border: 2px solid var(--accent); border-radius: var(--r);
  padding: 28px 32px; font-size: 18px; line-height: 1.55;
}
.jtbd p { margin: 5px 0; }
.jtbd b { color: var(--accent); font-weight: 800; }

.crit { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; }
.crit__row {
  display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px;
  padding: 16px 22px; border-top: 1px solid var(--line);
}
.crit__row:first-child { border-top: 0; }
.crit__score {
  font-weight: 800; font-size: 14px; align-self: start; text-align: center;
  border-radius: 999px; padding: 3px 0; margin-top: 2px;
}
.crit__score.s0 { color: var(--bad); background: #ffe4de; }
.crit__score.s1 { color: var(--mid); background: var(--lemon); }
.crit__score.s2 { color: var(--good); background: var(--mint); }
.crit__name { font-weight: 700; font-size: 15.5px; }
.crit__comment { grid-column: 2; color: var(--muted); font-size: 14.5px; }

/* Канвас «момента найма»: история (3 карточки) + 4 списка 2×2 */
.layers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.layer {
  grid-column: span 2;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 18px 20px; font-size: 14px;
}
.layer--half { grid-column: span 3; border-color: transparent; }
.layer--mint { background: var(--mint); }
.layer--sky { background: var(--sky); }
.layer--peach { background: var(--peach); }
.layer--lemon { background: var(--lemon); }
.layer b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 6px; }
.layer p { color: #3d3647; }
.layer ul { list-style: none; display: grid; gap: 5px; }
.layer li { padding-left: 16px; position: relative; color: #3d3647; }
.layer li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

.positioning p { color: #3d3647; font-size: 15px; }
.positioning p b { color: var(--muted); }
.positioning .fix { margin-top: 10px; font-weight: 600; color: var(--ink); }

.usp h4 { font-size: 17px; letter-spacing: -0.01em; }

.card__chip {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); background: var(--lav);
  border-radius: 999px; padding: 2px 10px; margin-bottom: 8px;
}
.problems__more { color: var(--muted); font-size: 14px; padding: 4px 6px; font-style: italic; }

.cards { display: grid; gap: 14px; }
.card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 20px 24px;
}
.card h4 { font-size: 16px; margin-bottom: 6px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 14.5px; }
.card .fix { color: var(--ink); margin-top: 8px; font-size: 14.5px; }
.card .fix b { color: var(--good); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 15px; font-size: 14px;
}
.tag--good { background: var(--mint); border-color: var(--mint); }
.tag--bad { background: var(--peach); border-color: var(--peach); }

/* ---------- Pro / paywall ---------- */

.pro-zone { position: relative; }
.pro-zone--locked .pro-zone__content {
  filter: blur(7px); user-select: none; pointer-events: none;
}
.paywall {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 24px; z-index: 2;
}
.paywall p { font-weight: 800; font-size: 18px; max-width: 440px; letter-spacing: -0.01em; }
.paywall small { color: var(--muted); }

.rewrite {
  background: var(--lav); border-radius: var(--r);
  padding: 34px 38px;
}
.rewrite__label {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 14px;
}
.rewrite h4 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 10px; }
.rewrite p { color: #4d445c; margin-bottom: 22px; }
.rewrite__micro { font-size: 13px; color: #6a5f80; margin: 10px 0 18px !important; }
.rewrite__proof {
  font-size: 14px; background: rgba(255, 255, 255, .65); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px !important;
}
.rewrite__proof b { color: var(--good); }
.rewrite__rationale { font-size: 13px; font-style: italic; opacity: .75; margin-bottom: 0 !important; }

.nextmove {
  background: var(--mint); border-radius: var(--r); padding: 28px 32px;
}
.nextmove h4 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.nextmove p { color: #2d4a3c; font-size: 14.5px; }
.nextmove b { color: var(--good); }

.chain { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.chain__stats { color: var(--muted); font-size: 13.5px; }
.chain__item { font-size: 14.5px; padding-left: 22px; position: relative; }
.chain__item::before { content: "✕"; position: absolute; left: 0; font-weight: 800; }
.chain__item--fail::before { color: var(--bad); }
.chain__item--warn::before { content: "!"; color: var(--mid); }
.chain__item span { color: var(--muted); word-break: break-all; display: block; font-size: 13px; }
.chain__ok { color: var(--good); font-weight: 700; margin-top: 8px; }

.paywall__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.roadmap { counter-reset: step; }
.roadmap .card { display: flex; gap: 18px; align-items: baseline; }
.roadmap .card::before {
  counter-increment: step; content: counter(step);
  font-weight: 800; color: var(--accent); font-size: 18px;
}
.roadmap .effort {
  margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 800;
  color: var(--muted); background: var(--bg); border-radius: 999px; padding: 3px 10px;
}

.guide {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 30px 34px; font-size: 15.5px;
}
.guide h1, .guide h2, .guide h3 { margin: 22px 0 10px; }
.guide h1 { font-size: 22px; } .guide h2 { font-size: 19px; } .guide h3 { font-size: 16.5px; }
.guide p, .guide li { margin-bottom: 10px; color: #3d3647; }
.guide ul, .guide ol { padding-left: 22px; }

.report__actions { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- How / Vs / Pricing / FAQ ---------- */

.how, .vs, .pricing, .faq { max-width: 1140px; margin: 0 auto; padding: 72px 24px 0; }
.how h2, .vs h2, .pricing h2, .faq h2 { font-size: 34px; text-align: center; margin-bottom: 40px; }

.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.how__card { border-radius: var(--r); padding: 30px 28px; }
.how__card--lav { background: var(--lav); }
.how__card--mint { background: var(--mint); }
.how__card--peach { background: var(--peach); }
.how__icon {
  display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%; margin-bottom: 18px;
}
.how__card h3 { font-size: 19px; margin-bottom: 8px; }
.how__card p { color: #4d445c; font-size: 15px; }

.vs__scroll {
  overflow-x: auto; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--card);
}
.vs__table {
  width: 100%; min-width: 660px; border-collapse: collapse;
  font-size: 14.5px;
}
.vs__table th, .vs__table td { padding: 15px 18px; text-align: left; border-top: 1px solid var(--line); }
.vs__table thead th { border-top: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vs__table thead th:nth-child(2) { color: var(--ink); }
.vs__table tbody th { font-weight: 700; white-space: nowrap; }
.vs__table td:nth-child(2) { background: var(--lemon); font-weight: 700; }
.vs__table td { color: #3d3647; }

.pricing__sub { text-align: center; color: var(--muted); margin: -26px 0 40px; }
.pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.pricing__grid--four { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 16px; }
.plan {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 32px 30px; display: flex; flex-direction: column; gap: 16px;
}
.plan--featured { background: var(--lav); border: 2px solid var(--ink); position: relative; }
.plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.plan__tag {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: -8px;
}
.plan h3 { font-size: 20px; }
.plan__price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.plan__price span { font-size: 16px; font-weight: 600; color: var(--muted); }
.plan ul { list-style: none; display: grid; gap: 9px; flex: 1; }
.plan li { padding-left: 26px; position: relative; font-size: 15px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }
.plan__note { font-size: 13px; color: var(--muted); text-align: center; }

.faq { max-width: 760px; }
.faq details {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 0 24px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15.5px; padding: 18px 0;
  list-style: none; position: relative; padding-right: 30px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); font-size: 14.5px; padding-bottom: 20px; }

/* ---------- Footer / Modal ---------- */

.footer { text-align: center; padding: 72px 24px 56px; }
.footer__brand { font-weight: 700; }
.footer__fine { color: var(--muted); font-size: 13px; margin-top: 8px; }

.modal {
  position: fixed; inset: 0; background: rgba(23, 19, 27, .45);
  display: flex; justify-content: center; z-index: 50; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain;
}
.modal[hidden] { display: none; }
.modal__card {
  background: var(--card); border-radius: var(--r); padding: 34px; width: 100%; max-width: 420px;
  position: relative; box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  margin: auto; /* центр при малом контенте, скролл оверлея при большом */
  height: fit-content;
}
.modal__close {
  position: absolute; top: 16px; right: 20px; border: 0; background: none;
  font-size: 26px; color: var(--muted); cursor: pointer; line-height: 1;
}
.modal__demo {
  background: var(--lemon); color: var(--mid); font-size: 13.5px;
  border-radius: 12px; padding: 9px 14px; margin: 12px 0 20px;
}
.modal label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 14px; }
.modal input {
  display: block; width: 100%; margin-top: 5px;
  font: 400 15px var(--font); padding: 12px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; outline: none;
}
.modal input:focus { border-color: var(--ink); }
.modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal__hint { color: var(--muted); font-size: 13.5px; margin: 8px 0 18px; }

.btn--google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--google:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 8px 22px rgba(23,19,27,.1); }
.auth-or {
  text-align: center; color: var(--muted); font-size: 13px; margin: 16px 0;
  display: flex; align-items: center; gap: 12px;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
#auth-email-form, #auth-code-form { display: grid; gap: 10px; }
#auth-email-form input, #auth-code-form input {
  font: 400 15px var(--font); padding: 12px 16px; width: 100%;
  border: 1.5px solid var(--line); border-radius: 12px; outline: none;
}
#auth-email-form input:focus, #auth-code-form input:focus { border-color: var(--ink); }
.auth-dev {
  margin-top: 14px; background: var(--lemon); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: var(--mid);
}

.plan__old { color: var(--muted); font-size: 22px; font-weight: 600; }

.buy-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px;
}
.buy-row > span:first-child { flex: 1; font-size: 14.5px; }
.buy-row small { color: var(--muted); white-space: nowrap; }
.buy-row__price s { color: var(--muted); font-weight: 400; }

/* компактная таблица прайса действий */
.price-table {
  border-collapse: collapse; font-size: 14px; margin: 14px auto 0;
  min-width: 260px;
}
.price-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 22px; }
.price-table__free { color: var(--good); }
.modal .price-table { margin: 14px 0 0; width: 100%; }

/* оплата временно недоступна */
.pd-notice {
  margin-top: 14px; background: var(--lemon); border-radius: 14px;
  padding: 14px 16px; font-size: 13.5px; color: #6b5310; font-weight: 400;
}
.pd-notice a { color: var(--accent); font-weight: 700; }

/* «пригласи друга» вместо оплаты */
.invite-block {
  margin-top: 16px; background: var(--mint); border-radius: 14px; padding: 14px 16px;
  font-size: 13.5px;
}
.invite-block p { color: #2d4a3c; margin-bottom: 10px; font-weight: 400; }
.invite-block__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invite-block__row code {
  flex: 1; min-width: 150px; font-size: 12.5px; word-break: break-all;
  background: rgba(255, 255, 255, .7); border-radius: 8px; padding: 6px 10px;
}

/* монетка-кредит */
.coin {
  width: 1.02em; height: 1.02em; vertical-align: -0.14em;
  margin-left: 0.18em; display: inline-block;
}

/* плашка согласия на куки */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 680px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 14px 20px; box-shadow: 0 14px 44px rgba(23, 19, 27, .14);
  font-size: 13.5px;
}
.consent p { flex: 1; min-width: 220px; color: #3d3647; }
.consent a { color: var(--accent); }

/* юридические страницы */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.legal h1 { font-size: 32px; margin-bottom: 8px; }
.legal .legal__date { color: var(--muted); font-size: 13.5px; margin-bottom: 28px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; }
.legal p, .legal li { color: #3d3647; font-size: 15px; margin-bottom: 8px; }
.legal ul { padding-left: 22px; }
.legal code { background: var(--lemon); border-radius: 6px; padding: 1px 6px; font-size: 13px; }

.gift-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--mint); border-radius: var(--r); padding: 22px 26px; margin-bottom: 22px;
}
.gift-bar > div { flex: 1; min-width: 240px; }
.gift-bar b { font-size: 16.5px; }
.gift-bar p { color: #2d4a3c; font-size: 14px; margin-top: 4px; }

/* баннер реферального подарка */
.ref-gift {
  background: var(--mint); border-radius: 14px; padding: 12px 18px;
  font-size: 14.5px; font-weight: 600; margin-bottom: 18px;
}
.pricing__actions {
  text-align: center; color: var(--muted); font-size: 13.5px;
  max-width: 760px; margin: 26px auto 0;
}

/* ---------- Аккаунт ---------- */

.account { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; }
.account h1 { font-size: 34px; margin-bottom: 28px; }
.account__plan {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: var(--lav); border-radius: var(--r); padding: 24px 28px; margin-bottom: 32px;
}
.account__plan--free { background: var(--lemon); }
.account__plan b { font-size: 18px; }
.account__plan p { color: #4d445c; font-size: 14px; }
.account__plan .btn { margin-left: auto; }
.account h2 { font-size: 21px; margin: 0 0 14px; }
.history { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; }
.history__row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 15px 22px; border-top: 1px solid var(--line); text-decoration: none;
}
.history__row:first-child { border-top: 0; }
.history__row:hover { background: var(--bg); }
.history__score {
  font-weight: 800; font-size: 14px; text-align: center;
  border-radius: 999px; padding: 4px 0;
}
.history__url { font-size: 14.5px; word-break: break-all; }
.history__date { font-size: 13px; color: var(--muted); white-space: nowrap; }
.history__empty { padding: 36px 24px; text-align: center; color: var(--muted); }
.account__foot { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.account__hint { color: var(--muted); font-size: 13.5px; margin: -6px 0 14px; }

.history__row--monitor { grid-template-columns: 1fr auto auto; }
.mon__status { font-size: 14px; white-space: nowrap; }
.mon__status a { text-decoration: none; }
.mon__status a:hover b { color: var(--accent); }
.mon__good { color: var(--good); }
.mon__bad { color: var(--bad); }
.mon__muted { color: var(--muted); }
.mon__actions { display: flex; gap: 8px; }
.btn--tiny { padding: 7px 14px; font-size: 12.5px; }
.monitor-add { display: flex; gap: 10px; margin-top: 14px; }
.monitor-add[hidden] { display: none; }
.monitor-add input {
  flex: 1; min-width: 0; font: 400 14.5px var(--font);
  padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); outline: none;
}
.monitor-add input:focus { border-color: var(--ink); }
#monitors-section { margin-bottom: 32px; }

/* вкладки аккаунта */
.acc__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.acc__head h1 { margin-bottom: 0; }
.acc__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc__meta .crit__score { padding: 4px 14px; font-size: 13px; }
.acc__tabs {
  display: flex; gap: 26px; margin: 20px 0 26px; flex-wrap: wrap;
  border-bottom: 1.5px solid var(--line);
}
.acc__tab {
  border: 0; background: none; cursor: pointer;
  font: 700 15px var(--font); padding: 10px 2px 12px; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
}
.acc__tab:hover { color: var(--ink); }
.acc__tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.acc__host { font-size: 14px; color: var(--muted); margin: 22px 0 8px; font-weight: 700; }
.history__row--btn {
  width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.report--inline { max-width: none; padding: 20px 0 40px; }
.account h2 { margin: 26px 0 12px; }
.ref__link { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ref__link code { font-size: 14px; word-break: break-all; flex: 1; }

/* ---------- Исследования ---------- */

.research h1 { font-size: 30px; margin: 10px 0 22px; }
.research h2 { margin-top: 34px; }
.research__kind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.research__kind .card__chip { margin-bottom: 0; }
.research__kind .crit__score { padding: 3px 12px; font-size: 12.5px; }
.research__url { color: var(--muted); font-size: 13px; word-break: break-all; }
.research__hyp { font-size: 15.5px; }
.research__hyp b { color: var(--accent); }
.research__ul, .research__ol { padding-left: 22px; color: #3d3647; font-size: 14.5px; display: grid; gap: 6px; margin-top: 6px; }
.research__step { font-weight: 600; }
.research__add { display: grid; gap: 12px; margin-top: 16px; }
.research__add input, .research__add textarea {
  font: 400 14.5px var(--font); padding: 12px 16px; width: 100%;
  border: 1.5px solid var(--line); border-radius: 12px; outline: none; resize: vertical;
}
.research__add input:focus, .research__add textarea:focus { border-color: var(--ink); }
.research__add .btn { justify-self: start; }
.research__final p { margin: 6px 0; }

.riv__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.riv__head .crit__score { padding: 3px 12px; font-size: 12.5px; }
.riv__jtbd { font-size: 14.5px; color: #3d3647; }
.riv__jtbd b { color: var(--accent); }
.riv__comment { font-size: 14px; color: var(--muted); margin-top: 6px; }
.riv__quotes { border-left: 3px solid var(--line); padding-left: 14px; margin: 10px 0; }
.riv__quotes p { font-style: italic; color: #3d3647; font-size: 14px; margin: 4px 0; }
.riv__list { font-size: 13.5px; color: #3d3647; margin-top: 6px; }
.riv__list b { color: var(--muted); }
.riv__flags { font-size: 13px; color: var(--mid); margin-top: 8px; }
.riv__raw { margin-top: 10px; font-size: 13px; }
.riv__raw summary { cursor: pointer; color: var(--muted); }
.riv__raw p { white-space: pre-wrap; color: var(--muted); margin-top: 8px; max-height: 300px; overflow-y: auto; }

/* кнопки создания исследований в отчёте */
.studies__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.study-card { display: flex; flex-direction: column; gap: 8px; }
.study-card p { flex: 1; }
.study-card .btn { align-self: start; }

/* ---------- Мобильная ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 40px; }
  .demo { max-width: 480px; }
}
@media (max-width: 760px) {
  /* шапка: логотип строкой выше, управление строкой ниже; CTA «проверить» скрыт —
     форма и так первый экран */
  .nav { flex-wrap: wrap; row-gap: 10px; padding: 14px 16px; }
  .nav__left { gap: 10px; }
  .nav-email { display: none; }
  .nav__links { display: none; }
  .nav__side { flex: 1 0 100%; justify-content: flex-end; gap: 8px; }
  .nav a.btn--small[href="/#check"] { display: none; }

  /* тап-таргеты ≥ 40px */
  .lang button { padding: 13px 15px; font-size: 13px; }
  .btn--tiny { padding: 10px 16px; font-size: 13.5px; }
  .btn--small { padding: 12px 20px; }
  .fivesec-btn { padding: 10px 0; }

  /* декоративный блоб демо-карточки не должен выпирать за экран */
  .demo::before { inset: 14px 0 -10px 14px; }

  /* iOS зумит инпуты мельче 16px */
  input, textarea, select { font-size: 16px !important; }

  /* модалки во всю ширину с воздухом */
  .modal { padding: 10px; }
  .modal__card {
    max-width: none; padding: 24px 20px; border-radius: 20px 20px 14px 14px;
    margin: auto 0 0; /* bottom-sheet, но с вертикальным скроллом оверлея */
  }

  /* контентные отступы */
  .hero { padding: 28px 16px 40px; gap: 36px; }
  .how, .vs, .pricing, .faq { padding: 48px 16px 0; }
  .how h2, .vs h2, .pricing h2, .faq h2 { font-size: 27px; }
  .report { padding: 16px 16px 56px; }
  .account { padding: 32px 16px 56px; }
  .legal { padding: 28px 16px 64px; }

  .hero__form { flex-direction: column; }
  .report__head { padding: 22px 18px; gap: 20px; flex-direction: column; align-items: flex-start; }
  .jtbd { padding: 20px 18px; font-size: 16px; }
  .rewrite { padding: 24px 20px; }
  .rewrite h4 { font-size: 21px; }
  .crit__row { padding: 14px 14px; }
  .guide { padding: 22px 18px; }
  .nextmove { padding: 22px 18px; }
  .gift-bar { padding: 18px; }
  .gift-bar .btn { width: 100%; }
  .paywall__btns { width: 100%; }
  .paywall__btns .btn { flex: 1 1 100%; }

  .acc__head { flex-direction: column; align-items: flex-start; }
  .acc__tabs { gap: 5px; }
  .acc__tab { padding: 9px 14px; font-size: 13.5px; }
  .account__plan .btn { margin-left: 0; }
  .history__row { grid-template-columns: 56px 1fr; }
  .history__row .history__date { display: none; }
  .history__row--monitor { grid-template-columns: 1fr; gap: 8px; }
  .mon__status { white-space: normal; }
  .monitor-add { flex-direction: column; }
  .buy-row { padding: 12px 14px; }
  .buy-row .btn { flex: 1 1 100%; }

  .layers { grid-template-columns: 1fr; }
  .layer, .layer--half { grid-column: auto; }
  .studies__grid { grid-template-columns: 1fr; }
  .study-card .btn { width: 100%; }

  .research h1 { font-size: 25px; }
  .research__add .btn { width: 100%; justify-self: stretch; }
  .riv__head { gap: 8px; }

  .consent { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
  .consent .btn { width: 100%; }

  .footer { padding: 48px 16px 40px; }
}