/* Оглядова сторінка для замовника */
:root {
  --bg: #fbfaf8;
  --ink: #1e1a17;
  --muted: #625b53;
  --line: #d9d2c7;
  --night: #181513;
  --glow: #d8bd9c;
  --lamp: #9f8368;
  --gutter: clamp(20px, 5vw, 72px);
  --display: 'Geologica', 'Segoe UI', Roboto, Arial, sans-serif;
  --text: 'Onest', 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--glow); color: var(--night); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
h1, h2 { font-family: var(--display); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.4vw, 74px); max-width: 17em; }
h2 { font-size: clamp(28px, 3.3vw, 46px); }
h3 { font-size: 15px; font-weight: 600; }

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--glow); border-color: var(--glow); color: var(--ink); }

.top { padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(56px, 7vw, 96px); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.top__logo { display: block; width: 124px; height: 34px; margin-bottom: clamp(48px, 8vw, 104px); }
.lead { max-width: 58ch; margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: #3f3932; }
.top__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

.block { padding: clamp(56px, 7vw, 96px) var(--gutter); border-top: 1px solid var(--line); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.block__lead { max-width: 62ch; margin-top: 16px; color: #3f3932; }
.before { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.before img { width: 100%; aspect-ratio: 16/8.4; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 8px; }
.before figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 32px; margin-top: 28px; }
.issues li { padding-block: 14px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: #3f3932; }
.issues b { display: block; color: var(--ink); font-weight: 600; }

.variant { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 32px clamp(32px, 5vw, 72px); padding: clamp(56px, 7vw, 96px) var(--gutter); border-top: 1px solid var(--line); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.variant__text { position: sticky; top: 32px; align-self: start; }
.variant__text p { margin-top: 16px; color: #3f3932; }
.variant--dark { background: var(--night); color: #f3eee7; border-top: 0; }
.variant--dark .variant__text p, .variant--dark .points li { color: #d6cec3; }
.variant--dark .points li { border-color: #3f3934; }
.points { margin: 20px 0 26px; font-size: 16px; }
.points li { padding-block: 9px; border-top: 1px solid var(--line); color: #3f3932; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; justify-items: center; min-width: 0; }
.shots__wide { grid-column: 1 / -1; width: 100%; border-radius: 10px; box-shadow: 0 14px 40px -14px rgba(20, 14, 8, .4); }
.shots__phone { width: min(100%, 300px); border-radius: 26px; box-shadow: 0 14px 34px -14px rgba(20, 14, 8, .45); }
.variant--dark .shots__phone, .variant--dark .shots__wide { box-shadow: 0 0 0 1px #3f3934; }

.tablewrap { margin-top: 28px; overflow-x: auto; }
table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
th, td { padding: 13px 20px 13px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { border-top: 0; font-size: 14px; font-weight: 600; }
tbody th { font-weight: 500; white-space: nowrap; }
td { color: #3f3932; }
.reco { max-width: 66ch; margin-top: 28px; padding: 22px 24px; background: #f0ece5; border-radius: 12px; }
.note { max-width: 70ch; margin-top: 24px; color: var(--muted); font-size: 16px; }

.check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 72px); margin-top: 32px; }
.check li { padding-block: 10px; border-top: 1px solid var(--line); font-size: 16px; color: #3f3932; }
.check h3 { margin-bottom: 12px; }

.next { padding: clamp(56px, 7vw, 96px) var(--gutter); background: var(--night); color: #f3eee7; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.next ol { counter-reset: n; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: 32px; }
.next li { counter-increment: n; padding-top: 14px; border-top: 1px solid #4a433c; color: #d6cec3; }
.next li::before { content: counter(n); display: block; margin-bottom: 10px; font: 300 30px/1 var(--display); color: var(--glow); }
.next b { display: block; color: #fff; font-weight: 500; }

.end { padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--night); color: #b9b0a4; font-size: 14px; border-top: 1px solid #3f3934; }
.end p { max-width: 72ch; }

@media (max-width: 900px) {
  .variant { grid-template-columns: minmax(0, 1fr); }
  .variant__text { position: static; }
  .before, .check { grid-template-columns: minmax(0, 1fr); }
  .next ol { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}