/**
 * Karta pobytu hubs under the hero (card grid, same visual language as "Другие виды доверенностей").
 * Self-contained: tokens copied from insurance-tokens.css, scoped under .op-karta-related.
 */
.op-karta-related{
  --kr-navy:#092b96;--kr-ink:#131313;--kr-blue2:#2380eb;--kr-soft:#eaf4ff;--kr-muted:#5d6f82;--kr-subtitle:#5d6f82;
  --kr-card:#fff;--kr-card-border:1px solid rgba(35,128,235,.12);--kr-card-shadow:0 16px 40px rgba(9,43,150,.05);--kr-radius:22px;--kr-radius-sm:18px;
  position:relative;box-sizing:border-box;margin:24px 0 8px;padding:64px 0 56px;border-radius:24px;background:#fff;overflow:hidden;isolation:isolate;
  font-family:Gilroy,sans-serif;color:var(--kr-ink);-webkit-font-smoothing:antialiased;
}
.op-karta-related *,.op-karta-related *::before,.op-karta-related *::after{box-sizing:border-box}
.op-karta-related__inner{position:relative;z-index:1;min-width:0}
.op-karta-related__header{max-width:820px;margin:0 auto 40px;text-align:center;padding:0 4px}
.op-karta-related__eyebrow{display:inline-flex;align-items:center;justify-content:center;width:fit-content;max-width:max-content;margin:0 auto 14px;padding:7px 16px;border-radius:999px;background:#eaf4ff;color:#0b4fa8;font-family:Gilroy,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.op-karta-related__title{margin:0 0 14px;font-family:Gilroy,sans-serif;font-size:clamp(28px,3.6vw,42px);font-weight:700;line-height:1.16;letter-spacing:-.01em;text-align:center;background:linear-gradient(91.91deg,#092b96 0%,#086cdc 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.op-karta-related__title{color:var(--kr-navy);-webkit-text-fill-color:var(--kr-navy);background:none}}
.op-karta-related__subtitle{margin:0 auto;max-width:52rem;color:var(--kr-subtitle);font-family:Gilroy,sans-serif;font-size:clamp(15px,1.4vw,17px);font-weight:400;line-height:1.6;text-align:center}
.op-karta-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none!important}
.op-karta-related__grid>li{display:flex;min-width:0;height:100%;margin:0;padding:0;list-style:none!important}
.op-karta-related__grid>li::before,.op-karta-related__grid>li::after{content:none!important;display:none!important}
.op-karta-related__grid>li::marker{content:""!important;font-size:0!important;color:transparent!important}
.op-karta-related__item{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;height:100%;padding:24px 20px 22px;text-align:center;text-decoration:none;color:inherit;cursor:pointer;border-radius:var(--kr-radius);background:var(--kr-card);border:var(--kr-card-border);box-shadow:var(--kr-card-shadow);transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s ease,border-color .32s ease,background .32s ease;-webkit-tap-highlight-color:transparent}
.op-karta-related__item:focus-visible{outline:2px solid var(--kr-blue2);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .op-karta-related__item:hover{transform:translateY(-6px);box-shadow:0 26px 55px rgba(9,43,150,.12);border-color:rgba(35,128,235,.3);background:#fbfdff}
  .op-karta-related__item:hover .op-karta-related__icon{transform:scale(1.06)}
  .op-karta-related__item:hover .op-karta-related__item-title{color:var(--kr-navy)}
  .op-karta-related__item--current:hover{transform:none;box-shadow:0 12px 32px rgba(9,43,150,.07);background:#f3f8ff}
  .op-karta-related__item--current:hover .op-karta-related__icon{transform:none}
}
.op-karta-related__item--current{cursor:default;pointer-events:none;border-color:rgba(35,128,235,.28);background:#f3f8ff;box-shadow:0 12px 32px rgba(9,43,150,.07)}
.op-karta-related__icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:56px;height:56px;margin:0 0 14px;color:var(--kr-blue2);background:var(--kr-soft);border:1px solid rgba(35,128,235,.12);border-radius:16px;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.op-karta-related__icon svg{display:block;width:32px;height:32px;flex-shrink:0;shape-rendering:geometricPrecision}
.op-karta-related__text{min-width:0}
.op-karta-related__item-title{margin:0;color:var(--kr-ink);font-family:Gilroy,sans-serif;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.01em;text-transform:none}
.op-karta-related__item-desc{margin:8px 0 0;color:var(--kr-muted);font-family:Gilroy,sans-serif;font-size:14px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
@media (max-width:1100px){
  .op-karta-related{padding:52px 0 48px;border-radius:20px}
  .op-karta-related__grid{gap:14px}
}
@media (max-width:767px){
  .op-karta-related{margin-top:16px;padding:40px 0 32px;border-radius:16px}
  .op-karta-related__header{margin-bottom:26px}
  .op-karta-related__title{font-size:clamp(24px,7vw,30px);line-height:1.2}
  .op-karta-related__subtitle{font-size:15px;padding:0 2px}
  .op-karta-related__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .op-karta-related__item{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;text-align:left;border-radius:var(--kr-radius-sm)}
  .op-karta-related__icon{width:48px;height:48px;margin:0;border-radius:14px}
  .op-karta-related__icon svg{width:26px;height:26px}
  .op-karta-related__item-title{font-size:15px}
  .op-karta-related__item-desc{font-size:13px;margin-top:4px}
  /* 9 cards: keep the phone block compact (titles only); the 3-card block keeps descriptions */
  .op-karta-related--types .op-karta-related__item-desc{display:none}
}
@media (prefers-reduced-motion:reduce){.op-karta-related__item,.op-karta-related__icon{transition:none}}