/* Grainer RU — Wave 1 additions on top of the v0.32 export (site.css is kept as exported).
   Only what the static build needs: inline styles moved here (CSP), <picture> photos,
   inner pages, legal documents, events state, form result screens and the cookie banner. */

/* [hidden] must win over display rules (.evc2, .evr, .evp-l, .ev-past are flex/grid/inline-block) */
[hidden]{display:none!important}

/* SVG sprite (was an inline style) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nw{white-space:nowrap}

/* Photos: <picture> instead of background-image; object-position = former background-position */
.rp-img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv .sl .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rp-img{overflow:hidden}
.op-c{object-position:50% 50%}
.op-50-60{object-position:50% 60%}
.op-50-55{object-position:50% 55%}
.op-50-50{object-position:50% 50%}
.op-50-20{object-position:50% 20%}
.op-70-c{object-position:70% 50%}

/* «Как проходит сделка»: the spine is a native <button> (was article[role=button]); keep the div rendering */
.bm-spine{color:inherit;text-align:inherit}

/* Events */
.ev-past{display:inline-block;margin-bottom:6px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.12);color:var(--green-ink);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.evr-a{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.evr-a .lk{white-space:nowrap}
.s8g>*,.evc2-h>div{min-width:0}
.evc2 h3,.evr h3,.evr h2{overflow-wrap:break-word;hyphens:auto}
.evr h2{margin:4px 0;font-size:22px;font-weight:700}
.evp-h h1{margin-top:6px;color:var(--green);font-size:40px;font-weight:700;letter-spacing:-.03em}

/* Form: page heading, honeypot, result screens */
.fm h1{margin-bottom:6px;color:var(--green);font-size:26px;font-weight:700}
.fm-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.fm-alt{margin-top:14px;color:var(--n600);font-size:13.5px;line-height:1.5}
.fm-alt a{text-decoration:underline}
.fm-ok .btn{margin-top:4px}
.fm-close{margin-top:16px}

/* Inner pages: the header stays solid, content starts below it */
.page{max-width:1440px;margin:0 auto;padding:150px 64px 60px}
.page-card{max-width:640px;margin:0 auto;padding:32px 30px;border:1px solid var(--n200);border-radius:24px;background:#fff}
.page-ev .evp-w{padding-top:0;padding-bottom:20px}
.page-404 h1{margin-bottom:14px;color:var(--green);font-size:40px;font-weight:700;letter-spacing:-.02em}
.page-404 p{color:var(--n700);font-size:17px;line-height:1.6}

/* Legal documents (content/legal/*.md) */
.page-doc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;max-width:1312px;padding-left:0;padding-right:0;margin:0 auto}
.doc{min-width:0;max-width:820px;color:var(--n900);font-size:16px;line-height:1.65}
.doc-meta{margin-bottom:12px;color:var(--n600);font-size:13.5px;font-weight:600}
.doc h1{margin-bottom:20px;color:var(--green);font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.doc h2{margin:32px 0 10px;color:var(--green);font-size:22px;font-weight:700;letter-spacing:-.01em}
.doc h3{margin:22px 0 8px;font-size:18px;font-weight:700}
.doc p,.doc ul,.doc ol{margin-bottom:12px}
.doc ul,.doc ol{padding-left:22px}
.doc li+li{margin-top:4px}
.doc a{color:var(--green);text-decoration:underline;text-decoration-color:var(--lime600);text-decoration-thickness:2px;text-underline-offset:3px}
.doc-tw{margin-bottom:12px;overflow-x:auto}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc th,.doc td{padding:10px 12px;border:1px solid var(--n200);text-align:left;vertical-align:top}
.doc th{background:var(--n100);font-weight:700}
.doc-nav{position:sticky;top:110px;display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--n200);border-radius:20px;background:#fff;font-size:14px;color:var(--n700)}
.doc-nav b{margin-bottom:4px;color:var(--n900);font-size:12.5px}
.doc-nav a[aria-current=page]{color:var(--green);font-weight:700}

/* Cookie banner */
.ckb[hidden]{display:none}
.ckb{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:14px;max-width:440px;padding:20px 22px;border:1px solid var(--n200);border-radius:20px;background:#fff;box-shadow:0 20px 60px rgba(10,30,20,.18);color:var(--n700);font-size:14px;line-height:1.5}
.ckb a{color:var(--green);text-decoration:underline}
.ckb-a{display:flex;gap:10px}
.ckb-no{border:1px solid var(--n300);color:var(--n900)}

@media (max-width:1023px){
  .page{padding:110px 18px 40px}
  .page-card{padding:24px 18px}
  .page-doc{grid-template-columns:1fr;gap:32px;padding-left:18px;padding-right:18px}
  .doc h1,.page-404 h1,.evp-h h1{font-size:28px}
  .doc-nav{position:static}
  .evr-a{align-items:flex-start}
  .ckb{right:10px;bottom:10px;left:10px;max-width:none}
}

/* More specific descendants last (stylelint no-descending-specificity) */
/* «Как начать», шаг 04: link to the early access agreement */
.stc-b p a{text-decoration:underline;text-underline-offset:3px}
/* Event subtitle */
.evc2>p b,.evr p b{font-weight:700}

/* «Как проходит сделка», phones (≤520, the export's own breakpoint): the white panel uses the card width.
   The .bm-ui side padding duplicated .bm-body's and squeezed the panel (card 02 overflowed at 320). */
@media (max-width:520px){
  .bm-ui{padding-right:0;padding-left:0}
  .ui{max-width:none}
}
/* Narrowest phones: the fixed 80px label column of «Изменения условий» does not fit; size it to its label. */
@media (max-width:359px){
  .ui-diff li{grid-template-columns:auto 1fr 1fr}
}

/* Phones (<700px, before the export's 700–1023 tablet refinement): «Как начать» and «Кому подходит» use the
   18px gutter of «События»; step cards get their intended compact height. Later desktop rules in site.css
   (.who2/.s5x padding, .stc-b height:340px) were overriding the export's own max-width:1023 phone rules. */
@media (max-width:699px){
  .s5x,.who2{padding-right:18px;padding-left:18px}
  .stc-b{height:auto;min-height:170px}
}

/* Mobile menu overlay (≤1023): Forest full-height layer, two routes with separators and arrows, lime CTA,
   contacts anchored at the bottom. The burger turns into × while the layer is open. No decorative motion. */
@media (max-width:1023px){
  .mnav{gap:0;padding:104px 28px calc(28px + env(safe-area-inset-bottom))}
  .mnav-n{border-top:1px solid rgba(255,255,255,.14)}
  .mnav .mnav-n a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
  .mnav-ar{flex:none;width:22px;height:22px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mnav .mnav-cta{min-height:56px;margin-top:32px;font-size:16px}
  .mnav-c{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:32px;color:var(--green-ink);font-size:16px;line-height:1.5}
  .mnav-c b{margin-bottom:4px;color:rgba(220,239,230,.6);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .mnav .mnav-c a{align-self:flex-start;padding:4px 0}
  .mnav a:focus-visible{outline-color:var(--lime)}
  body.mopen .hdr .burger{border-color:rgba(255,255,255,.3)}
  body.mopen .hdr .burger i{position:relative;background:transparent!important;box-shadow:none!important}
  body.mopen .hdr .burger i::before,body.mopen .hdr .burger i::after{content:"";position:absolute;left:0;top:0;width:16px;height:1.6px;background:#fff}
  body.mopen .hdr .burger i::before{transform:rotate(45deg)}
  body.mopen .hdr .burger i::after{transform:rotate(-45deg)}
  body.mopen .hdr .burger:focus-visible{outline-color:var(--lime)}
}
@media (max-width:699px){
  .mnav{padding-right:18px;padding-left:18px}
}
/* Route labels read as navigation, not headlines: 24px on tablets, 22px on phones. */
@media (max-width:479px){
  .mnav .mnav-n a{font-size:22px}
}

/* Legal document layer (legal-dialog.njk/.js): above menu, form, events and cookie surfaces. Dark corporate-green
   backdrop, blurred where supported (denser without blur); a centred reading panel with its own scroll. */
.lgd{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.lgd-bg{position:absolute;inset:0;background:rgba(14,40,32,.9)}
@supports (backdrop-filter:blur(1px)){
  .lgd-bg{background:rgba(20,51,42,.66);backdrop-filter:blur(10px)}
}
.lgd-w{position:relative;display:flex;flex-direction:column;width:min(780px,100%);max-height:100%;overflow:hidden;border-top:3px solid var(--lime);border-radius:24px;background:#FCFCFA;box-shadow:0 30px 90px rgba(6,20,15,.45)}
.lgd-h{display:flex;flex:none;justify-content:flex-end;padding:14px 14px 0}
.lgd-x{width:40px;height:40px;border-radius:50%;background:var(--n100);color:var(--n700);font-size:24px;line-height:1}
.lgd-x:hover{background:var(--n150)}
.lgd-b{min-height:0;padding:0 44px 44px;overflow:auto;overscroll-behavior:contain}
.lgd-doc{max-width:none}
.lgd-doc h1{font-size:32px}
.lgd-doc h1:focus{outline:none}
.lgd-doc h1:focus-visible{outline:3px solid var(--green);outline-offset:4px}
@media (max-width:699px){
  .lgd{padding:8px}
  .lgd-w{height:100%;border-radius:22px}
  .lgd-h{padding:10px 10px 0}
  .lgd-b{padding:0 18px 28px}
  .lgd-doc h1{font-size:26px}
}