/* Внутренние страницы v6: примеры, оферта, политика, 404. Подключается после v6.css.
   Тот же ход, что на главной: ночь → день → ночь, крупный заголовок средней жирности, острые углы. Эффектов нет. */

/* ---------- ночь и день ----------
   На главной фон светлеет целиком (слой .bg-day), там это выверено под сцену. Здесь светлый раздел несёт фон сам,
   а край у него мягкий: ночь растворяется в дне через синий, как на главной. Текст у границы всегда на своём фоне. */
.page [data-scene='day'] { --fade: 220px; background: linear-gradient(rgba(5, 6, 11, 0), rgba(11, 36, 87, .5) calc(var(--fade) * .4), var(--day) var(--fade), var(--day) calc(100% - var(--fade)), rgba(11, 36, 87, .5) calc(100% - var(--fade) * .4), rgba(5, 6, 11, 0)); }

/* ---------- первый экран внутренней страницы ---------- */
.p-hero { padding: calc(var(--nav) + clamp(64px, 10vw, 150px)) var(--gut) clamp(56px, 7vw, 110px); }
.p-hero h1 { margin: 0; max-width: 11em; font: 500 clamp(48px, 8.4vw, 164px)/.92 var(--font); letter-spacing: -.052em; overflow-wrap: break-word; }
.p-lead { margin: clamp(22px, 2.4vw, 36px) 0 0; max-width: 34em; font-size: clamp(18px, 1.35vw, 22px); color: var(--sub); }
.p-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }

/* ---------- документы: оферта и политика ---------- */
/* коротко о главном — на ночном фоне, полный текст — на дневном */
.brief { padding: 0 var(--gut) clamp(40px, 5vw, 80px); }
.brief h2 { margin: 0 0 clamp(20px, 2vw, 32px); font: 500 clamp(26px, 2.6vw, 42px)/1.1 var(--font); letter-spacing: -.03em; }
.brief ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 72px); margin: 0; padding: 0; list-style: none; }
.brief li { padding: 18px 0; border-top: 1px solid var(--line-d); font-size: clamp(17px, 1.2vw, 19px); }
.brief-note { margin: 28px 0 0; max-width: 40em; color: var(--snow-2); }

.legal-wrap { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 48em); gap: clamp(32px, 6vw, 120px); padding: calc(var(--fade) + 40px) var(--gut) calc(var(--fade) + 20px); }
.toc { position: sticky; top: calc(var(--nav) + 28px); align-self: start; max-height: calc(100vh - var(--nav) - 56px); overflow: auto; font-size: 14.5px; line-height: 1.35; }
.toc summary { margin-bottom: 14px; font-weight: 600; list-style: none; cursor: default; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line-l); }
.toc a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; transition: color .2s, border-color .2s; }
.toc a span { font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); border-left-color: var(--ink); }

.legal { font-size: 16px; line-height: 1.62; }
.legal section { margin-bottom: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line-l); scroll-margin-top: calc(var(--nav) + 24px); }
.legal section:last-child { border-bottom: 0; }
.l-n { margin-bottom: 12px; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.legal h2 { margin: 0 0 22px; font: 500 clamp(26px, 2.4vw, 38px)/1.1 var(--font); letter-spacing: -.03em; }
.l-c { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 0 12px; margin: 0 0 12px; }
.l-cn { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.2em; }
.legal li { margin-bottom: 8px; }
.legal a { text-underline-offset: 3px; }
.l-kv { display: grid; grid-template-columns: minmax(110px, 11em) minmax(0, 1fr); margin: 0; }
.l-kv dt, .l-kv dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line-l); }
.l-kv dt { color: var(--ink-3); padding-right: 16px; }
.l-kv dd { overflow-wrap: anywhere; }
.l-upd { margin: 0; padding-top: 8px; color: var(--ink-2); }

/* ---------- примеры ---------- */
.real-list { padding: 0 var(--gut) clamp(40px, 5vw, 80px); }
.real { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.6fr); gap: 32px clamp(32px, 4vw, 80px); align-items: start; padding: clamp(36px, 4vw, 60px) 0; border-top: 1px solid var(--line-d); }
.real-tag { margin: 0 0 14px; color: var(--snow-3); font-size: 15px; }
.real h2 { margin: 0 0 18px; font: 500 clamp(40px, 5vw, 96px)/.95 var(--font); letter-spacing: -.045em; }
.real p { max-width: 30em; color: var(--snow-2); }
.real-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* компьютер и телефон одной высоты: ширины колонок в пропорции сторон снимков (1440×900 и 585×1266) */
.real-shots { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .4621fr); gap: clamp(10px, 1.2vw, 18px); align-items: start; }
.real-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line-d); }

.dm { padding: calc(var(--fade) + 40px) var(--gut) calc(var(--fade) + 20px); }
.dm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 4.4vw, 72px) clamp(20px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.dm-shot { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line-l); background: var(--night); cursor: pointer; }
.dm-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.dm-card:hover .dm-shot img { transform: scale(1.035); }
.dm-card h3 { margin: 20px 0 0; font: 500 clamp(24px, 2.1vw, 34px)/1.05 var(--font); letter-spacing: -.03em; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.dm-card:hover h3 { transform: translateX(10px); }
.dm-name { margin: 6px 0 0; font-weight: 600; }
.dm-card p { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
.dm-card .dm-fit { color: var(--ink-3); font-size: 15px; }
.dm-acts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 15px; font-weight: 600; }
.dm-acts button, .dm-acts a { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.dm-acts a { color: var(--ink-3); border-bottom-color: transparent; }
.dm-acts a:hover { color: var(--ink); }
.dm-note { margin: clamp(48px, 5vw, 80px) 0 0; max-width: 40em; padding-top: 24px; border-top: 1px solid var(--line-l); color: var(--ink-2); font-size: clamp(17px, 1.2vw, 19px); }

.p-final { padding: clamp(60px, 7vw, 120px) var(--gut) clamp(90px, 10vw, 150px); }
.p-final h2 { margin: 0; max-width: 11em; font: 500 clamp(44px, 7vw, 132px)/.92 var(--font); letter-spacing: -.052em; }
.p-final p { margin: 26px 0 0; max-width: 32em; color: var(--snow-2); font-size: clamp(17px, 1.25vw, 20px); }

/* ---------- 404 ---------- */
.p-404 { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(56px, 8vh, 110px); }
.p-code { margin: 0 0 18px; color: var(--snow-3); font-size: 15px; }

@media (max-width: 1100px) {
  .dm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .brief ul { grid-template-columns: 1fr; }
  .legal-wrap { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; max-height: none; padding: 14px 0; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
  .toc summary { margin: 0; cursor: pointer; display: flex; justify-content: space-between; }
  .toc summary::after { content: '+'; font-weight: 400; }
  .toc[open] summary { margin-bottom: 14px; }
  .toc[open] summary::after { content: '−'; }
  .real { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .page [data-scene='day'] { --fade: 150px; }
  .p-hero { padding-top: calc(var(--nav) + 56px); }
  .p-hero h1 { font-size: clamp(42px, 13vw, 64px); line-height: .94; letter-spacing: -.045em; }
  .page-privacy .p-hero h1 { font-size: min(9vw, 64px); } /* «конфиденциальности» — одно длинное слово, должно влезть в строку */
  .p-acts .btn, .real-acts .btn { flex: 1 1 100%; }
  .dm-grid { grid-template-columns: 1fr; }
  .dm-shot img { aspect-ratio: 4 / 5; }
  .l-c { grid-template-columns: 2.8em minmax(0, 1fr); gap: 0 8px; }
  .l-kv { grid-template-columns: 1fr; }
  .l-kv dt { padding-bottom: 0; }
  .l-kv dd { border-top: 0; padding-top: 2px; }
  .p-final h2 { font-size: clamp(40px, 12vw, 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-shot img, .dm-card h3, .toc a { transition: none; }
}