/* Глинка — legal & info pages (/legal, /legal/*).
   Shares the landing palette (site/index.html) and self-hosted fonts
   (assets/css/fonts.css). Light theme only, like the rest of the static site. */

:root{
  --terracotta:#C2552C;
  --terracotta-deep:#A8431F;
  --graphite:#2B2A28;
  --ink:#1A1815;
  --paper:#F7F3EE;
  --paper-soft:#FEFCF9;
  --paper-2:#F1EBE2;
  --line:rgba(43,42,40,0.13);
  --line-soft:rgba(43,42,40,0.07);
  --muted:rgba(43,42,40,0.62);
  --muted-strong:rgba(43,42,40,0.80);
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:"Golos Text", system-ui, sans-serif;
  --accent:var(--terracotta);
  --accent-deep:var(--terracotta-deep);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }
body{
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 40px; }

/* ---------- buttons ---------- */
/* A COPY of the landing's button rules (site/index.html ~L66-84), not an
   extraction (RUS-386 DP3). AUTHORING allows a shared stylesheet «when a second
   hand-written page appears»; these pages are generated, and site/index.html
   stays self-contained because its inline CSS is what the EDITMODE/Tweaks
   harness edits. Twelve lines duplicated, one file left alone. .btn-on-dark is
   deliberately not copied — no subpage has a dark section to put it on. */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-size:15px; font-weight:500; letter-spacing:-0.01em; line-height:1;
  padding:14px 22px; border-radius:11px; cursor:pointer; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:rgba(43,42,40,0.34); background:rgba(43,42,40,0.025); }
.btn-sm{ padding:10px 16px; font-size:14px; border-radius:9px; }
/* Two labels for the nav's primary CTA; the phone-width media query swaps
   which one is rendered. Only one is ever in the flex flow. */
.cta-short{ display:none; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,243,238,0.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{ max-width:1180px; margin:0 auto; padding:14px 40px; display:flex; align-items:center; gap:30px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand svg{ width:27px; height:27px; display:block; }
.brand .wm{ font-weight:600; font-size:19px; letter-spacing:-0.02em; color:var(--ink); }
/* The landing's own arrangement: the links sit just right of the wordmark and
   the CTAs take the auto margin, so the two buttons stay pinned to the right
   edge instead of being pushed there by the length of the link list. */
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:14px; }
.nav-links a{ font-size:14.5px; color:var(--muted-strong); transition:color .15s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--accent); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ---------- reading column ---------- */
.legal-main{ padding:54px 0 72px; }
.legal-col{ max-width:760px; margin:0 auto; padding:0 40px; }
.crumbs{ font-family:var(--mono); font-size:12px; letter-spacing:0.02em; color:var(--muted); margin:0 0 26px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:0.5; margin:0 8px; }

/* ---------- prose ---------- */
.legal{ color:var(--muted-strong); font-size:16px; line-height:1.72; }
.legal h1{
  font-weight:700; font-size:clamp(28px,4vw,40px); line-height:1.08;
  letter-spacing:-0.03em; color:var(--ink); margin:0 0 18px; text-wrap:balance;
}
.legal h2{
  font-weight:600; font-size:clamp(20px,2.4vw,26px); line-height:1.2;
  letter-spacing:-0.02em; color:var(--ink); margin:48px 0 14px; text-wrap:balance;
}
.legal h3{ font-weight:600; font-size:18px; letter-spacing:-0.01em; color:var(--ink); margin:30px 0 10px; }
.legal h4{ font-weight:600; font-size:15.5px; color:var(--ink); margin:24px 0 8px; }
.legal p{ margin:0 0 15px; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal em{ font-style:italic; }
.legal a{ color:var(--accent); text-decoration:underline; text-decoration-color:rgba(194,85,44,0.35); text-underline-offset:2px; }
.legal a:hover{ text-decoration-color:var(--accent); }
.legal ul{ margin:0 0 16px; padding-left:0; list-style:none; }
.legal ul li{ position:relative; padding-left:22px; margin:0 0 9px; }
.legal ul li::before{
  content:""; position:absolute; left:4px; top:0.66em;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:0.8;
}
.legal hr{ border:0; border-top:1px solid var(--line); margin:30px 0; }
.legal code{
  font-family:var(--mono); font-size:0.88em; background:var(--paper-2);
  border:1px solid var(--line-soft); border-radius:5px; padding:1px 5px;
}
.legal .rev{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.01em;
  color:var(--muted); margin:0 0 4px;
}
.legal .rev strong{ color:var(--muted-strong); font-weight:500; }

/* tables */
.legal table{
  width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:14.5px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.legal thead th{
  background:var(--paper-2); text-align:left; font-weight:600; color:var(--ink);
}
.legal th, .legal td{
  padding:11px 14px; border-top:1px solid var(--line-soft); vertical-align:top;
  text-align:left;
}
.legal tbody tr:first-child td, .legal tbody tr:first-child th{ border-top:0; }
.legal tbody td:first-child, .legal tbody th:first-child{ color:var(--ink); font-weight:500; white-space:nowrap; }

/* ---------- /legal index ---------- */
.legal-lead{ font-size:17px; color:var(--muted-strong); margin:0 0 34px; max-width:620px; }
.doc-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 12px; }
.doc-card{
  display:block; background:var(--paper-soft); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.doc-card:hover{ border-color:rgba(194,85,44,0.45); transform:translateY(-1px);
  box-shadow:0 10px 30px -18px rgba(43,42,40,0.4); }
.doc-card .dc-title{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; display:flex; align-items:center; gap:9px; }
.doc-card .dc-title svg{ width:17px; height:17px; flex:none; color:var(--accent); }
.doc-card .dc-desc{ font-size:13.5px; color:var(--muted); margin:7px 0 0; line-height:1.5; }

.section-eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); margin:46px 0 16px;
  display:flex; align-items:center; gap:11px;
}
.section-eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:0.55; }
.llm-note{ font-size:14px; color:var(--muted); margin:0 0 16px; max-width:620px; line-height:1.6; }

/* ---------- footer ---------- */
footer.site{ background:var(--paper); border-top:1px solid var(--line); padding:46px 0 38px; margin-top:10px; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:22px 40px; align-items:flex-start; justify-content:space-between; }
.foot-brand .brand{ margin-bottom:12px; }
.foot-brand p{ font-size:13px; color:var(--muted); max-width:280px; margin:0; line-height:1.55; }
.foot-links{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.foot-links a{ font-size:14px; color:var(--muted-strong); transition:color .15s ease; }
.foot-links a:hover{ color:var(--accent); }
.foot-legal{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; justify-content:space-between; }
.foot-legal .reqs{ font-size:12.5px; color:var(--muted); }
.foot-legal .meta{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--muted); }

@media (max-width:680px){
  .wrap, .nav-in{ padding-left:22px; padding-right:22px; }
  .legal-col{ padding:0 22px; }
  .doc-list{ grid-template-columns:1fr; }
}

/* Nav row policy. The links plus the two CTAs stop fitting on one line well
   above 680px, so this lives in its own query rather than riding along with the
   content rules above — retyping 680 there would drag .doc-list and the column
   padding with it (the mistake RUS-383 avoided on the landing).

   Measured on /legal/oferta/ in Chrome 152, with «Сценарии» added as the fifth
   link (RUS-404): brand 100.78 + links 561.45 + CTAs 251.81 + two 30px gaps +
   80px of padding = 1054.05px, so the row fits from 1055px and 1054 is the last
   width that needs two rows. It was 957 for four links (RUS-386).

   The bar does not overflow on the way down — the links just squeeze and a long
   label («Юридические документы» first) breaks onto a second text line, which is
   why scrollWidth <= clientWidth cannot be the test; the bar's HEIGHT is.

   Unlike the landing's seven-item row, this one keeps real room: 1054.05 against
   the same max-width:1180px bar is ~126px of slack, so a sixth link here is a
   measurement rather than a redesign.

   RUS-866 swapped the labels for the landing's own five — Возможности · Шаблоны ·
   Сценарии · Тарифы · Что нового (no «Главная», no «Юридические документы») —
   and re-measured, Chrome, /legal/oferta/: brand 100.78 + links 473.78 + their
   14px margin + CTAs 251.81 + two 30px gaps + 80px = 980.38px, so the row fits
   from 981px and 980 is the last width that needs two rows: one row at 1024
   (DP8). Like every number here it is measured with overlay scrollbars; a
   classic 17px one moves the squeeze up by its width.

   Row 1 is brand + CTAs, row 2 is the links: order:3 with a full-width basis
   forces the break. The door a returning user is looking for stays on the bar at
   every width (RUS-270 DP1, RUS-386 DP4) instead of dropping below the fold, and
   the links wrap as whole labels rather than being squeezed until words break. */
@media (max-width:980px){
  .nav-in{ flex-wrap:wrap; row-gap:9px; }
  .nav-links{ order:3; flex-basis:100%; margin-left:0; flex-wrap:wrap; gap:9px 18px; }
  .nav-links a{ flex:none; }
}

/* Phone widths, mirroring the landing's own ≤480 block: the gutter, the gaps
   and the button padding tighten, and the primary CTA swaps to the short label
   so brand + «Вход» + «Попробовать» still fit one row on a 360px screen. */
@media (max-width:480px){
  .nav-in{ padding-left:16px; padding-right:16px; gap:9px; }
  .nav-cta{ gap:7px; }
  .nav .btn-sm{ padding:10px 12px; font-size:13.5px; }
  .cta-long{ display:none; }
  .cta-short{ display:inline; }
}