/* ============================================================
   ЛЕГКО — статья «Ипотека на модульный дом» (ipoteka)
   Подключение в Tilda: Настройки сайта -> Ещё -> HTML-код внутрь
   HEAD. Вставлять содержимое файла tilda-head-style.html целиком
   (он уже обёрнут в тег style). Никаких угловых скобок внутри
   этого комментария быть не должно — браузер закрывает тег style
   на первом же встреченном закрывающем литерале.
   Все селекторы имеют префикс legko-ip / legko-ipoteka и не
   конфликтуют со стилями Tilda. Отключить зебру: --legko-bg-alt:#fff.
   ============================================================ */

:root{
  --legko-space-xs:12px;
  --legko-space-sm:20px;
  --legko-space-md:32px;
  --legko-space-lg:56px;
  --legko-space-xl:96px;
  --legko-green-dark:#2a7844;
  --legko-green-mid:#5eba92;
  --legko-green-main:#80b893;
  --legko-green-light:#a9dcba;
  --legko-text:#292a2a;
  /* Shared by the zebra sections AND the sticky table column, so they can
     never drift apart; set to #fff to cancel the zebra everywhere at once. */
  --legko-bg-alt:#f4f9f6;
  /* Readable text column: paragraphs/lists/tables/etc. sit in this centered
     width; photos and full-bleed media break out to the full viewport width.
     clamp() instead of a flat value: stays 700px (~80 characters/line, the
     comfortable reading max) on every laptop-class screen, then grows with
     the viewport past ~1550px so it doesn't look lost in the middle of a
     wide monitor. Cap raised to 1280px per request — a true 1920px window
     (Mac, or a scrollbar-trimmed ~1900px Windows window, see
     [[tilda-integration-gotchas]] for why "1920" isn't always 1920) still
     lands around 860px; the wider 1280px ceiling only engages on genuinely
     large displays (~2850px+ — 2.5K/ultrawide/4K), so normal desktops don't
     jump straight to ~99-character lines. */
  --legko-col:clamp(700px, 45vw, 1280px);
  /* Fluid window-width container: side gutter scales with viewport. Still used
     by the hero and the "Предложение" block (full-bleed media with overlay). */
  --legko-pad-x:140px;
}
/* 1440-1919 and 1200-1439 share the same gutter, so one tier covers both. */
@media screen and (max-width:1919px){:root{--legko-pad-x:70px;}}
/* Tablet landscape (~1024-1199, e.g. iPad landscape). */
@media screen and (max-width:1199px){:root{--legko-pad-x:40px;}}
/* Tablet portrait (~768-1023) and phone share the same gutter. */
@media screen and (max-width:1023px){:root{--legko-pad-x:20px;}}
/* TOC anchors scroll smoothly (site-wide by design: this block owns the page's
   long-scroll navigation); reduced-motion users get instant jumps instead. */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth;}}
.legko-ipoteka{width:100%;font-family:Montserrat,Arial,sans-serif;color:var(--legko-text);}
.legko-ipoteka *{box-sizing:border-box;}
/* Anchor targets land with breathing room under Tilda's fixed menu. */
.legko-ipoteka [id]{scroll-margin-top:80px;}
/* Section padding is HALF the visual gap we want between two sections —
   each boundary is made of one section's bottom + the next section's top,
   so e.g. 48+48=96px, not 96+96=192px like before. Horizontal gutter comes
   from --legko-pad-x (window-width container), not a fixed column width. */
/* Section rhythm matches the "Мифы" article: ~112px between two sections
   (56 bottom + 56 top ≈ Tilda's native 120px divider), all-white background. */
/* Grid "content column": the middle track is the readable column (--legko-col,
   capped at 100% - 40px so there is always a 20px side gutter). Every child
   lands in that track and shares ONE left edge, so left-border accents
   (callout/quote) and the timeline connector line up with the body text instead
   of drifting into the gutter. A photo opts into the outer `full` track and
   spans the whole viewport width. To add a full-bleed photo later, drop an
   <img class="legko-ip-photo"> as a DIRECT child of a .legko-ip-section. */
.legko-ip-section{padding-top:var(--legko-space-lg);padding-bottom:var(--legko-space-lg);display:grid;grid-template-columns:[full-start] 1fr [content-start] min(var(--legko-col),100% - 40px) [content-end] 1fr [full-end];}
@media screen and (max-width:640px){.legko-ip-section{padding-top:var(--legko-space-md);padding-bottom:var(--legko-space-md);}}
.legko-ip-section > *{grid-column:content;min-width:0;}
.legko-ip-section > .legko-ip-photo{grid-column:full;width:100%;}
/* Light green zebra: alternating sections get a barely-there brand tint to
   chunk the long page into chapters. Deliberate deviation from the all-white
   "Мифы" article — set --legko-bg-alt to #fff to undo.
   The box-shadow + clip-path pair pushes the fill out to the viewport edges
   even when Tilda wraps the block in a padded/centered container: the shadow
   paints 100vmax beyond the element on every side, the clip keeps only the
   horizontal overhang. Shadows never create scrollbars, so no overflow. */
.legko-ip-section_alt{background:var(--legko-bg-alt);box-shadow:0 0 0 100vmax var(--legko-bg-alt);clip-path:inset(0 -100vmax);}
/* Brand-tinted text selection instead of the system blue. */
.legko-ipoteka ::selection{background:var(--legko-green-light);color:#1c1d1d;}
/* Font weights follow the "Мифы" design system: 300 body, 400 accent/italic,
   500 headings/emphasis/button — no 600 anywhere. */
/* text-wrap: balance evens out multi-line headings (no hanging last word);
   pretty avoids single-word last lines in prose. Progressive enhancement —
   browsers without support just keep default wrapping. */
.legko-ip-h1,.legko-ip-h2,.legko-ip-h3{text-wrap:balance;}
.legko-ip-p,.legko-ip-lead,.legko-ip-scenario__a,.legko-ip-list li,.legko-ip-callout p,.legko-ip-faq__a p{text-wrap:pretty;}
.legko-ip-h1{font-size:44px;font-weight:500;line-height:1.1;margin:0 0 var(--legko-space-sm);}
@media screen and (max-width:640px){.legko-ip-h1{font-size:30px;}}
/* The lead is the article's "short answer" — one size up from body text and
   framed by the system's green accent line so it reads as the key takeaway,
   not as a regular paragraph. */
.legko-ip-lead{font-size:18px;font-weight:300;line-height:32px;margin:0;border-left:1px solid var(--legko-green-dark);padding-left:var(--legko-space-sm);}
.legko-ip-lead b{font-weight:500;}
@media screen and (max-width:640px){.legko-ip-lead{font-size:16px;line-height:28px;}}
.legko-ip-h2{font-size:36px;font-weight:500;line-height:1.2;margin:0 0 var(--legko-space-md);text-transform:uppercase;}
@media screen and (max-width:640px){.legko-ip-h2{font-size:27px;}}
.legko-ip-h2 em{font-style:normal;color:var(--legko-green-dark);}
/* margin-top is xs (not md) because grid items don't margin-collapse: xs(12) +
   the preceding element's mb(sm/20) = 32px, matching the pre-grid rhythm. */
.legko-ip-h3{font-size:20px;font-weight:500;line-height:26px;color:#000;margin:var(--legko-space-xs) 0;}
/* h3 straight after the section h2 (mb md/32) needs no top margin to keep 32px. */
.legko-ip-h2 + .legko-ip-h3{margin-top:0;}
.legko-ip-p{font-size:15px;font-weight:300;line-height:28px;margin:0 0 var(--legko-space-sm);}
.legko-ip-p:last-child{margin-bottom:0;}
.legko-ip-p b{font-weight:500;}
.legko-ip-list{margin:0 0 var(--legko-space-sm);padding-left:20px;}
.legko-ip-list li{font-size:15px;font-weight:300;line-height:28px;margin-bottom:var(--legko-space-xs);}
/*  inside lists follows the 300/400/500 weight system (browser default
   "bolder" would land on the unloaded 600/700 tier). */
.legko-ip-list b{font-weight:500;}
.legko-ip-list_num{list-style:none;counter-reset:ip-counter;padding-left:0;}
.legko-ip-list_num li{counter-increment:ip-counter;position:relative;padding-left:34px;}
.legko-ip-list_num li::before{content:counter(ip-counter);position:absolute;left:0;top:0;width:24px;height:24px;background:var(--legko-green-dark);color:#fff;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;z-index:1;}
/* Timeline connector: only for the numbered process steps ("Как мы строим
   дома"), not the 3-item benefits list — a vertical line linking the
   circles reads as one continuous path instead of a plain enumerated list.
   The line is drawn per-item (from its own circle down to the next one), so
   it always ends exactly at the last circle — no tail below a multi-line
   final step. -24px = the li margin (12) plus the next circle's center (12). */
.legko-ip-list_timeline li::after{content:'';position:absolute;left:11px;top:12px;bottom:-24px;width:1px;background:var(--legko-green-dark);}
.legko-ip-list_timeline li:last-child::after{content:none;}
.legko-ip-list_timeline li{padding-bottom:var(--legko-space-sm);}
.legko-ip-list_timeline li:last-child{padding-bottom:0;}

.legko-ip-callout{border-left:1px solid var(--legko-green-dark);padding:0 0 0 var(--legko-space-sm);margin:0 0 var(--legko-space-md);}
.legko-ip-callout__title{font-size:15px;font-weight:500;color:var(--legko-green-dark);margin:0 0 var(--legko-space-xs);text-transform:uppercase;letter-spacing:.3px;}
.legko-ip-callout p{font-size:15px;font-weight:300;line-height:28px;margin:0;color:var(--legko-text);}

/* Standalone CTA (direct child of .legko-ipoteka, not inside a .legko-ip-section)
   uses the same window-width gutter as everything else, so its edges always
   line up with the surrounding text/table instead of drifting narrower. */
.legko-ip-cta{padding:var(--legko-space-md) 20px;margin:var(--legko-space-md) 0;text-align:center;}
.legko-ipoteka > .legko-ip-cta{max-width:var(--legko-col);margin-left:auto;margin-right:auto;}
/* CTA divider rails are drawn as inset pseudo-element lines (same 560px
   column as the button), not edge-to-edge borders. */
.legko-ip-cta_top::before{content:'';display:block;height:1px;max-width:560px;margin:0 auto var(--legko-space-md);background:var(--legko-green-mid);}
.legko-ip-cta_bottom::after{content:'';display:block;height:1px;max-width:560px;margin:var(--legko-space-md) auto 0;background:var(--legko-green-mid);}
/* Inside a .legko-ip-section, the section itself already applies the
   gutter — the CTA just fills that padded content box, no extra inset. */
.legko-ip-section > .legko-ip-cta{margin-top:var(--legko-space-lg);}
.legko-ip-cta__lead{margin:0 0 var(--legko-space-sm);font-size:15px;font-weight:300;line-height:28px;color:var(--legko-green-dark);}
/* CTA button — copied 1:1 from the live-site "Рассчитать стоимость" /
   "Перейти к выбору" buttons: full-width green bar (~42px tall), Montserrat
   12px/500 uppercase, no radius, framed by a 1px green accent line both above
   AND below it, each separated by a ~3px gap and matching the button width. */
.legko-ip-btn{position:relative;display:block;width:100%;max-width:560px;margin:0 auto;padding:14px 24px;background:var(--legko-green-dark);color:#fff !important;text-decoration:none;font-weight:500;font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.5px;text-align:center;transition:background .2s ease,transform .16s cubic-bezier(.23,1,.32,1);}
.legko-ip-btn::before,.legko-ip-btn::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--legko-green-dark);}
.legko-ip-btn::before{top:-4px;}
.legko-ip-btn::after{bottom:-4px;}
.legko-ip-btn:hover{background:var(--legko-green-main);}
/* Press feedback: the button visibly responds to the click itself. */
.legko-ip-btn:active{transform:scale(.98);}

.legko-ip-table{width:100%;border-collapse:collapse;margin:0 0 var(--legko-space-sm);}
.legko-ip-table td{font-size:15px;font-weight:300;line-height:24px;padding:14px 0;border-bottom:1px solid #e2e2e2;vertical-align:top;}
.legko-ip-table td:first-child{color:var(--legko-green-dark);font-weight:500;width:42%;padding-right:20px;}

/* Comparison table: the three mortgage programs side by side, so the reader
   answers "which one is mine" in one glance instead of scrolling between
   three separate per-program tables. On phones the wrapper scrolls
   horizontally — the table keeps its readable min-width. */
.legko-ip-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--legko-space-sm);}
.legko-ip-compare{width:100%;min-width:620px;border-collapse:collapse;}
.legko-ip-compare th{font-size:15px;font-weight:500;color:var(--legko-green-dark);text-align:left;padding:0 20px 14px 0;border-bottom:1px solid var(--legko-green-mid);vertical-align:bottom;}
.legko-ip-compare td{font-size:15px;font-weight:300;line-height:24px;padding:14px 20px 14px 0;border-bottom:1px solid #e2e2e2;vertical-align:top;}
.legko-ip-compare td:first-child{color:var(--legko-green-dark);font-weight:500;}
.legko-ip-compare th:first-child,.legko-ip-compare td:first-child{width:21%;}
.legko-ip-compare th:last-child,.legko-ip-compare td:last-child{padding-right:0;}
/* Parameter names stay pinned while the programs scroll horizontally on
   phones (no effect on desktop — the table fits without scrolling). The
   opaque background is required so scrolling cells pass underneath. */
.legko-ip-compare th:first-child,.legko-ip-compare td:first-child{position:sticky;left:0;background:var(--legko-bg-alt);}
/* Digits share one width so the columns of numbers don't wobble. */
.legko-ip-compare td,.legko-ip-stats__num{font-variant-numeric:tabular-nums;}

/* Case-study stat strip: the three numbers that sell the story, pulled out
   of the paragraph so a scanning reader catches them. */
.legko-ip-stats{display:flex;gap:var(--legko-space-md);margin:0 0 var(--legko-space-sm);}
.legko-ip-stats__item{flex:1;}
.legko-ip-stats__item + .legko-ip-stats__item{border-left:1px solid #e2e2e2;padding-left:var(--legko-space-md);}
.legko-ip-stats__num{display:block;font-size:34px;font-weight:500;line-height:1.15;color:var(--legko-green-dark);}
.legko-ip-stats__label{display:block;margin-top:6px;font-size:13px;font-weight:300;line-height:19px;color:var(--legko-text);}
@media screen and (max-width:640px){
  .legko-ip-stats{flex-direction:column;gap:var(--legko-space-sm);}
  .legko-ip-stats__item + .legko-ip-stats__item{border-left:0;padding-left:0;border-top:1px solid #e2e2e2;padding-top:var(--legko-space-sm);}
  .legko-ip-stats__num{font-size:28px;}
}

.legko-ip-scenario{border-bottom:1px solid #e2e2e2;padding:var(--legko-space-sm) 0;}
.legko-ip-scenario:first-child{padding-top:0;}
.legko-ip-scenario:last-child{border-bottom:none;padding-bottom:0;}
.legko-ip-scenario__q{font-size:15px;font-weight:500;margin:0 0 6px;}
.legko-ip-scenario__a{font-size:15px;font-weight:300;line-height:28px;margin:0;color:var(--legko-text);}

/* Expert quote gets an editorial voice: one size up from body, larger
   portrait, and the attribution split into name (green, 500) over role
   (muted) — it is the only human face on the page. */
.legko-ip-quote{border-left:1px solid var(--legko-green-dark);padding-left:var(--legko-space-sm);margin:0 0 var(--legko-space-sm);}
.legko-ip-quote p{font-size:17px;font-weight:400;font-style:italic;line-height:30px;margin:0 0 var(--legko-space-sm);}
@media screen and (max-width:640px){.legko-ip-quote p{font-size:16px;line-height:28px;}}
.legko-ip-quote cite{display:block;font-size:12px;font-weight:300;font-style:normal;line-height:19px;color:#767676;}
.legko-ip-quote__name{display:block;font-size:14px;font-weight:500;color:var(--legko-green-dark);margin-bottom:2px;}

/* FAQ questions are real s: keyboard-focusable, screen-reader
   announced via aria-expanded. The reset below strips UA button chrome so
   the visual stays identical to the old div version. */
.legko-ip-faq__item{border-bottom:1px solid var(--legko-green-mid);}
.legko-ip-faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--legko-space-sm);width:100%;background:none;border:0;color:inherit;font-family:inherit;text-align:left;padding:var(--legko-space-sm) 0;cursor:pointer;font-size:15px;font-weight:500;line-height:1.45;text-transform:uppercase;letter-spacing:.2px;}
.legko-ip-faq__q:focus-visible{outline:2px solid var(--legko-green-dark);outline-offset:2px;}
/* Tilda paints every link через "#allrecords a" (селектор с id всегда
   сильнее наших классов) — зеркалим фирменные цвета ссылок с той же
   id-специфичностью. Вне Tilda эти селекторы просто не совпадают. */
#allrecords .legko-ipoteka a{color:var(--legko-green-dark);}
#allrecords .legko-ipoteka .legko-ip-toc__list a:hover,
#allrecords .legko-ipoteka .legko-ip-tocmenu a:hover{color:var(--legko-green-main);}

/* One focus style for every interactive element in the block. */
.legko-ip-toc__list a:focus-visible,.legko-ip-btn:focus-visible,.legko-ip-tocbtn:focus-visible,.legko-ip-tocmenu a:focus-visible,.legko-ip-contacts a:focus-visible{outline:2px solid var(--legko-green-dark);outline-offset:2px;}
.legko-ip-faq__icon{flex:0 0 auto;font-size:20px;font-weight:300;color:var(--legko-green-main);width:20px;text-align:center;transition:transform .2s cubic-bezier(.23,1,.32,1);}
/* Answers animate via grid-template-rows 0fr→1fr: real measured height (no
   max-height guess that clips long answers), and the timing matches the
   actual travel distance. The inner div is the collapsible track child. */
.legko-ip-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.23,1,.32,1);}
.legko-ip-faq__a > div{overflow:hidden;min-height:0;}
.legko-ip-faq__a p{font-size:15px;font-weight:300;line-height:28px;padding-bottom:var(--legko-space-sm);margin:0;}
.legko-ip-faq__item.is-open .legko-ip-faq__a{grid-template-rows:1fr;}
.legko-ip-faq__item.is-open .legko-ip-faq__icon{transform:rotate(45deg);}

.legko-ip-offer{position:relative;color:#fff;padding-top:var(--legko-space-xl);padding-bottom:var(--legko-space-xl);padding-left:var(--legko-pad-x);padding-right:var(--legko-pad-x);text-align:center;background-image:linear-gradient(rgba(42,120,68,.82),rgba(42,120,68,.82)),url('images/Legko_ipoteka_ulyanovsk_6.webp');background-size:cover;background-position:center;}
@media screen and (max-width:640px){.legko-ip-offer{padding-top:var(--legko-space-lg);padding-bottom:var(--legko-space-lg);}}
.legko-ip-offer .legko-ip-h2{color:#fff;}
.legko-ip-offer__price{font-size:15px;font-weight:300;line-height:28px;margin:0 auto var(--legko-space-md);max-width:var(--legko-col);}
.legko-ip-offer .legko-ip-btn{background:#fff;color:var(--legko-green-dark) !important;}
.legko-ip-offer .legko-ip-btn::before,.legko-ip-offer .legko-ip-btn::after{background:#fff;}
.legko-ip-offer .legko-ip-btn:hover{background:var(--legko-green-main);}

.legko-ip-contacts{padding-top:var(--legko-space-xl);padding-bottom:var(--legko-space-xl);padding-left:var(--legko-pad-x);padding-right:var(--legko-pad-x);text-align:center;}
@media screen and (max-width:640px){.legko-ip-contacts{padding-top:var(--legko-space-lg);padding-bottom:var(--legko-space-lg);}}
.legko-ip-contacts a{color:var(--legko-green-dark);text-decoration:underline;}
.legko-ip-contacts p{font-size:15px;font-weight:300;line-height:28px;margin:0 auto var(--legko-space-xs);max-width:var(--legko-col);}

.legko-ip-photo{width:100%;display:block;object-fit:cover;}
/* Hero is always 80% of the viewport height (svh: excludes mobile browser
   chrome so the bar never hides the headline). min-height (not height) lets it
   grow on short landscape screens where the headline+lead need more room —
   the photo is an absolutely-positioned cover background, so text can never
   spill above it. */
.legko-ip-hero__wrap{position:relative;min-height:80vh;min-height:80svh;display:flex;align-items:flex-end;}
.legko-ip-hero__photo{position:absolute;inset:0;width:100%;height:100%;}
.legko-ip-hero__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.05) 75%);}
.legko-ip-hero{position:relative;width:100%;padding-top:var(--legko-space-lg);padding-bottom:var(--legko-space-lg);padding-left:var(--legko-pad-x);padding-right:var(--legko-pad-x);}
@media screen and (max-width:640px){.legko-ip-hero{padding-top:var(--legko-space-md);padding-bottom:var(--legko-space-md);}}
.legko-ip-hero .legko-ip-h1,.legko-ip-hero .legko-ip-lead{color:#fff;}
.legko-ip-hero .legko-ip-lead{font-weight:400;}
/* Meta line under the H1: freshness + reading time, the standard article
   trust markers, right where the reader decides whether to commit. */
.legko-ip-hero__meta{margin:0;font-size:13px;font-weight:400;line-height:20px;letter-spacing:.4px;color:rgba(255,255,255,.85);}
/* Two photos side by side, full viewport width; stacks on phones. Same
   opt-out from the content column as .legko-ip-photo (grid-column:full). */
.legko-ip-photo-pair{grid-column:full;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--legko-space-md);}
.legko-ip-photo-pair img{width:100%;height:420px;object-fit:cover;display:block;}
@media screen and (max-width:640px){.legko-ip-photo-pair{grid-template-columns:1fr;}.legko-ip-photo-pair img{height:260px;}}
/* The portrait is a transparent-background cutout; the soft green-tinted
   plate behind it makes the cutout read as intentional, not as a missing
   background. object-position keeps the face in frame at both sizes. */
.legko-ip-quote-photo{width:160px;height:160px;object-fit:cover;object-position:50% 0;flex:0 0 auto;background:#eef5f0;}
.legko-ip-quote-wrap{display:flex;gap:var(--legko-space-sm);align-items:flex-start;}
@media screen and (max-width:640px){.legko-ip-quote-wrap{flex-direction:column;}.legko-ip-quote-photo{width:120px;height:120px;}}
.legko-ip-example-photo{height:320px;margin-bottom:var(--legko-space-sm);}
/* Mid-section full-bleed banner photo (follows text rather than preceding it). */
.legko-ip-photo_banner{height:420px;margin-top:var(--legko-space-md);}
@media screen and (max-width:640px){.legko-ip-photo_banner{height:260px;}}
.legko-ip-banks{display:flex;gap:var(--legko-space-sm);margin:var(--legko-space-sm) 0;}
.legko-ip-banks__card{flex:1;border:1px solid var(--legko-green-mid);padding:var(--legko-space-md);display:flex;align-items:center;justify-content:center;}
.legko-ip-banks__card img{max-width:100%;max-height:50px;}
@media screen and (max-width:640px){.legko-ip-banks{flex-direction:column;}}

/* Long-read comfort: body prose steps up to 16px on desktop (15px is the
   lower comfort bound for a 10 000px article). Data tables, captions, TOC
   and buttons keep their denser 15/12px sizes. */
@media screen and (min-width:641px){
  .legko-ip-p,.legko-ip-list li,.legko-ip-scenario__q,.legko-ip-scenario__a,.legko-ip-callout p,.legko-ip-cta__lead,.legko-ip-faq__a p{font-size:16px;line-height:29px;}
}

/* Table of contents — mirrors the "Мифы" article: centered "ОГЛАВЛЕНИЕ"
   heading over a left-aligned list of green underlined uppercase links, each
   line prefixed with a muted counter and closed with a semicolon.
   Counter gray is #767676 (4.5:1 on white) so the numbering passes WCAG AA. */
.legko-ip-toc .legko-ip-h2{text-align:center;}
.legko-ip-toc__list{list-style:none;counter-reset:toc-counter;margin:0 auto;padding:0;max-width:820px;}
/* Desktop: 8 uppercase lines take a whole screen in one column — two
   columns halve the section (reading order stays vertical: 01–04 left,
   05–08 right). Single column below 641px. */
@media screen and (min-width:641px){
  .legko-ip-toc__list{column-count:2;column-gap:var(--legko-space-md);}
  .legko-ip-toc__list li{break-inside:avoid;}
}
/* Hanging indent: the counter sits in an absolutely positioned slot, so a
   wrapped second line starts exactly under the first line of the link text,
   not under the number. */
.legko-ip-toc__list li{counter-increment:toc-counter;position:relative;padding-left:56px;margin-bottom:var(--legko-space-xs);font-size:15px;font-weight:300;line-height:28px;text-transform:uppercase;letter-spacing:.3px;color:#767676;}
.legko-ip-toc__list li:last-child{margin-bottom:0;}
.legko-ip-toc__list li::before{content:counter(toc-counter,decimal-leading-zero)" —";position:absolute;left:0;top:0;color:#767676;}
.legko-ip-toc__list a{color:var(--legko-green-dark);text-decoration:underline;text-underline-offset:3px;font-weight:500;transition:color .2s ease;}
.legko-ip-toc__list a:hover{color:var(--legko-green-main);}

/* Floating "Оглавление": appears once the hero scrolls out of view (the
   article is ~13 000px tall), docked on the right edge at mid-height (not
   a corner — reads as a persistent side rail, doesn't compete with the
   browser's own corner chrome or drift with page length). Click opens a
   menu with the article sections that expands upward from the button;
   both hidden and visible states keep translateY(-50%) so the element
   never drifts off the vertical center. */
.legko-ip-tocfab{position:fixed;right:24px;top:50%;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;opacity:0;visibility:hidden;transform:translate(8px,-50%);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1),visibility .2s;}
.legko-ip-tocfab.is-visible{opacity:1;visibility:visible;transform:translate(0,-50%);}
.legko-ip-tocbtn{background:#fff;border:1px solid var(--legko-green-dark);color:var(--legko-green-dark);font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:.5px;padding:14px 20px;cursor:pointer;pointer-events:auto;transition:background .2s ease,color .2s ease,transform .16s cubic-bezier(.23,1,.32,1);}
.legko-ip-tocbtn:hover{background:var(--legko-green-dark);color:#fff;}
.legko-ip-tocbtn:active{transform:scale(.97);}
/* The menu panel rises from the button; soft shadow separates the floating
   layer from photos underneath (the only shadow in the block — functional,
   not decorative). Height is capped relative to 50vh (the space between an
   at-center button and the viewport top), not a flat vh value, so it can
   never poke above the browser window on short screens. */
.legko-ip-tocmenu{background:#fff;border:1px solid var(--legko-green-dark);box-shadow:0 12px 32px rgba(41,42,42,.10);padding:6px 20px;width:min(320px,calc(100vw - 48px));max-height:min(calc(50vh - 96px),420px);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1),visibility .2s;}
.legko-ip-tocfab.is-open .legko-ip-tocmenu{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.legko-ip-tocmenu a{display:block;padding:11px 0;font-size:12px;font-weight:500;letter-spacing:.3px;line-height:1.5;text-transform:uppercase;color:var(--legko-green-dark);text-decoration:none;border-bottom:1px solid #e2e2e2;}
.legko-ip-tocmenu a:last-child{border-bottom:none;}
.legko-ip-tocmenu a:hover{color:var(--legko-green-main);}
@media screen and (max-width:640px){.legko-ip-tocfab{right:16px;}}
/* На телефонах (до 480px) сайт показывает свою фиксированную нижнюю панель
   («Каталог / Наверх / Связаться») — плавающий блок там скрыт; мобильную
   версию делаем отдельно позже. */
@media screen and (max-width:480px){.legko-ip-tocfab{display:none;}}

/* Scroll reveal: sections fade-rise, full-bleed photos wipe open from the
   top edge. The hidden state classes are added ONLY by JS (and only to
   elements below the fold, with reduced-motion off), so content is never
   gated on JavaScript: no JS — no hidden state. */
.legko-ip-reveal{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1);}
.legko-ip-reveal.is-in{opacity:1;transform:none;}
.legko-ip-reveal-photo{clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.23,1,.32,1);}
.legko-ip-reveal-photo.is-in{clip-path:inset(0 0 0 0);}

/* Reduced motion: collapse every transition this block owns to an instant
   state change (the smooth-scroll opt-out lives next to its declaration). */
@media (prefers-reduced-motion: reduce){
  .legko-ip-btn,.legko-ip-faq__a,.legko-ip-faq__icon,.legko-ip-toc__list a,.legko-ip-tocfab,.legko-ip-tocbtn,.legko-ip-tocmenu{transition:none;}
  .legko-ip-reveal,.legko-ip-reveal-photo{opacity:1;transform:none;clip-path:none;transition:none;}
}
</style>