/* ══════════════════════════════════════════════════════════════
   Методология — «Данные, которым можно доверять»
   Файл: assets/css/inr-method.css · разметка: template-parts/methodology.php
   Всё внутри .im и с префиксом im-, чтобы не задевать стили сайта.
   ══════════════════════════════════════════════════════════════ */
.im{
  --im-navy:#151D3F;
  --im-green:#10CC97;
  --im-green-ink:#0A7F5E;
  --im-ink-2:#4A5068;
  --im-ink-3:#8A8E9F;
  --im-line:#E3EAF4;
  --im-panel:#F2F6FC;
  --im-hover:#F7F9FE;
  --im-dot:#D6E0EE;
  --im-dot-wave:#A9BAD6;
  --im-ghost:#E4E9F2;
  --im-on-navy:#FFFFFF;
  --im-on-navy-2:#C9D3EA;
  --im-display:'Unbounded', 'Inter', system-ui, sans-serif;
  --im-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k:1;
  --im-fast:calc(170ms * var(--k));
  --im-med:calc(320ms * var(--k));
  --im-slow:calc(480ms * var(--k));
  --im-ease:cubic-bezier(.22,1,.36,1);
  --im-settle:cubic-bezier(.34,1.32,.64,1);
  position:relative;
  padding:80px 0;
  color:var(--im-navy);
  font-family:var(--im-body);
}
.im *,.im *::before,.im *::after{box-sizing:border-box}
.im-wrap{max-width:1440px;margin:0 auto}
.im :focus-visible{outline:2px solid var(--im-green);outline-offset:3px}

/* ── шапка: по центру, переключатель рынков под заголовком ── */
.im-head{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.im-intro{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;max-width:100%}
.im-eyebrow{margin:0;font:400 16px/1.2 var(--im-display);color:var(--im-ink-3)}
.im-h2{margin:0;max-width:1000px;font:500 40px/1.15 var(--im-display);letter-spacing:-.01em;color:var(--im-navy);text-wrap:balance}
.im-lead{margin:0;max-width:640px;font:400 17px/1.6 var(--im-body);color:var(--im-ink-2)}

/* ── переключатель рынков ── */
.im-seg{position:relative;display:flex;gap:4px;padding:4px;border:1px solid var(--im-line);border-radius:999px;background:#FFFFFF}
.im-seg-thumb{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--im-navy);opacity:0;transition:transform var(--im-med) var(--im-ease),width var(--im-med) var(--im-ease)}
.im--js .im-seg-thumb{opacity:1}
.im-seg-b{position:relative;appearance:none;-webkit-appearance:none;border:0;margin:0;height:40px;padding:0 18px;border-radius:999px;background:transparent;color:var(--im-ink-2);font:500 13px/1 var(--im-display);white-space:nowrap;cursor:pointer;transition:color var(--im-fast) ease,background-color var(--im-fast) ease}
.im-seg-b[aria-pressed="true"]{color:var(--im-on-navy);transition-delay:calc(60ms * var(--k))}
.im:not(.im--js) .im-seg-b[aria-pressed="true"]{background:var(--im-navy)}
@media (hover:hover){.im-seg-b:not([aria-pressed="true"]):hover{color:var(--im-navy)}}
.im-short{display:none}

/* ── сетка: поле слева, шаги справа ── */
.im-grid{margin-top:48px;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px;align-items:stretch}

.im-panel{min-width:0;display:flex;flex-direction:column;gap:18px;padding:28px 44px 30px;border-radius:28px;background:var(--im-panel)}
.im-ph{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.im-pt{font:500 14px/1.3 var(--im-display);color:var(--im-navy)}
.im-sc{font:400 13px/1.3 var(--im-body);color:var(--im-ink-2);white-space:nowrap}

/* Поле: одна канва вместо 1 548 элементов — рисует inr-method.js.
   47 × 33 квадрата на компьютере, 36 × 43 на телефоне. */
.im-field{position:relative;width:100%;aspect-ratio:47 / 33}
.im-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.im:not(.im--js) .im-field{background-image:radial-gradient(circle,var(--im-dot) 3px,transparent 3.5px);background-size:10px 10px;background-position:-1px -1px}

.im-legend{display:flex;align-items:center;gap:10px;font:400 14px/1.4 var(--im-body);color:var(--im-navy);transition:opacity var(--im-med) ease}
.im-legend i{flex:none;width:10px;height:10px;border-radius:2px;background:var(--im-green)}
.im-legend.is-off{opacity:.35}
.im-legend-tx{transition:opacity var(--im-fast) ease}

.im-smb{padding:14px 18px;border:1.5px dashed var(--im-green);border-radius:16px;font:400 14px/1.5 var(--im-body);color:var(--im-navy);transition:opacity var(--im-slow) ease}
.im-smb b{font-weight:600}
.im-smb.im-ghost{opacity:.28}
.im-smb.im-lift{animation:im-lift calc(560ms * var(--k)) var(--im-settle)}
@keyframes im-lift{0%{transform:translateY(12px)}100%{transform:none}}

.im-formula{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;padding:16px 20px;border-radius:16px;background:var(--im-navy);transition:background-color var(--im-slow) ease}
.im-fl{font:400 14px/1.5 var(--im-body);color:var(--im-on-navy-2);transition:color var(--im-slow) ease}
.im-fv{font:500 20px/1.2 var(--im-display);color:var(--im-green);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color var(--im-slow) ease}
.im-formula.im-ghost{background:var(--im-ghost)}
.im-formula.im-ghost .im-fl,.im-formula.im-ghost .im-fv{color:var(--im-ink-3)}

/* ── шаги ── */
.im-side{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.im-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.im-step{position:relative;appearance:none;-webkit-appearance:none;border:0;margin:0;width:100%;text-align:left;cursor:pointer;background:transparent;border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:16px;align-items:center;font-family:var(--im-body);color:var(--im-navy);transition:background-color var(--im-med) ease}
@media (hover:hover){.im-step:not(.is-on):hover{background:var(--im-hover)}}
.im-step.is-on{background:var(--im-panel)}
.im-sn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--im-dot);font:500 12px/1 var(--im-display);color:var(--im-ink-2);transition:background-color var(--im-med) ease,border-color var(--im-med) ease,color var(--im-med) ease}
.im-step.is-on .im-sn{background:var(--im-navy);border-color:var(--im-navy);color:var(--im-on-navy)}
.im-stt{min-width:0;font:500 17px/1.3 var(--im-display);color:var(--im-navy)}
.im-sf{font:500 22px/1.2 var(--im-display);letter-spacing:-.01em;color:var(--im-navy);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color var(--im-med) ease}
.im-step.is-on .im-sf{color:var(--im-green-ink)}
.im-sx{grid-column:2 / 4;display:grid;grid-template-rows:1fr}
.im-sxi{overflow:hidden;min-height:0}
.im-sxt{display:block;max-width:600px;padding-top:12px;font:400 15px/1.6 var(--im-body);color:var(--im-ink-2)}
/* С JS раскрыт только выбранный шаг */
.im--js .im-sx{grid-template-rows:0fr;transition:grid-template-rows var(--im-slow) var(--im-ease)}
.im--js .im-step.is-on .im-sx{grid-template-rows:1fr}
.im--js .im-sxt{opacity:0;transform:translateY(-4px);transition:opacity var(--im-med) ease,transform var(--im-med) var(--im-ease)}
.im--js .im-step.is-on .im-sxt{opacity:1;transform:none;transition-delay:calc(90ms * var(--k))}
.im--js.im-quiet .im-sx,.im--js.im-quiet .im-sxt{transition:none}
.im-spr{position:absolute;left:20px;right:20px;bottom:8px;height:2px;border-radius:2px;background:var(--im-green);transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none}
.im-step.is-on.is-auto .im-spr{opacity:1}

.im-sum{display:flex;flex-direction:column;gap:14px;padding:24px 20px 0;border-top:1px solid var(--im-line)}
.im-sumt{margin:0;max-width:620px;font:400 17px/1.6 var(--im-body);color:var(--im-navy);transition:opacity var(--im-fast) ease}
.im-more{align-self:flex-start;font:500 14px/1.4 var(--im-display);color:var(--im-navy);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color var(--im-fast) ease}
@media (hover:hover){.im-more:hover{color:var(--im-green-ink)}}
.im-note{margin:6px 0 0;font:400 14px/1.6 var(--im-body);color:var(--im-ink-2)}
.im-swap{opacity:0 !important}

/* ── шаги в узкой колонке: число под названием ── */
@media (min-width:1101px) and (max-width:1239px){
  .im-step{grid-template-columns:30px minmax(0,1fr);row-gap:6px;align-items:start}
  .im-sn{grid-row:1 / 3}
  .im-sx{grid-column:2 / 3}
  .im-sxt{padding-top:6px}
}

/* ── планшет: поле над шагами ── */
@media (max-width:1100px){
  .im{padding:64px 0}
  .im-h2{font-size:32px}
  .im-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .im-panel{max-width:640px}
}

/* ── телефон ── */
@media (max-width:767px){
  .im{padding:48px 0}
  .im-intro{gap:10px}
  .im-eyebrow{font-size:14px}
  .im-h2{font-size:26px;line-height:1.2}
  .im-lead{font-size:15px}
  .im-head{align-items:stretch;gap:24px}
  .im-seg{width:100%}
  .im-seg-b{flex:1 1 auto;height:44px;padding:0 12px;font-size:12px}
  .im-long{display:none}
  .im-short{display:inline}
  .im-grid{margin-top:28px;gap:28px}
  .im-panel{padding:20px;border-radius:22px;gap:16px}
  .im-ph{flex-direction:column;align-items:flex-start;gap:4px}
  .im-pt{font-size:13px}
  .im-sc{font-size:12.5px}
  .im-field{aspect-ratio:36 / 43}
  .im-legend{font-size:13.5px}
  .im-smb{padding:12px 14px;border-radius:14px;font-size:13.5px}
  .im-formula{flex-direction:column;align-items:flex-start;padding:14px 16px;border-radius:14px}
  .im-fl{font-size:13px}
  .im-step{grid-template-columns:28px minmax(0,1fr);row-gap:6px;column-gap:12px;align-items:start;padding:16px;border-radius:16px}
  .im-sn{grid-row:1 / 3;width:28px;height:28px;font-size:11px}
  .im-stt{font-size:15px}
  .im-sf{font-size:19px}
  .im-sx{grid-column:2 / 3}
  .im-sxt{padding-top:6px;font-size:14.5px}
  .im-spr{left:16px;right:16px;bottom:6px}
  .im-sum{padding:22px 0 0}
  .im-sumt{font-size:15.5px}
  .im-more{padding:10px 0;font-size:13.5px}
}

@media (prefers-reduced-motion: reduce){
  .im{--k:.01}
  .im-smb.im-lift{animation:none !important}
}