/* ===== Страница анализов (LAB) — синий характер: синий, белый, чёрный, розовый, немного мятного =====
   Раскладка: синий hero с протоколом-примером → короткие блоки на светлом и ледяном фоне → ссылки на Атлас и подбор.
   Общие токены и шапка/подвал — из product-page-v1.css. */
:root{
  --lab:#465cff; --lab-deep:#2b3ad1; --lab-shade:#1c2896;
  --lab-pink:#ff9ec7; --lab-pink-soft:#ffe3ef;
  --lab-ice:#eceffe; --lab-ink:#08110f;
}
:root[data-theme="dark"]{ --lab-ice:#12152b; --lab-pink-soft:#3a1f2c }

.lab-page{display:block}
.lab-page .wrap{max-width:1440px;margin:0 auto}

/* ---------- hero ---------- */
.lab-hero{background:var(--lab);color:#fff;position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.3px);background-size:22px 22px}
.lab-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(36px,6vw,88px)}
.lab-kick{display:inline-flex;align-items:center;gap:10px;margin:0;font:600 13px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.lab-kick i{font-style:normal;display:grid;place-items:center;height:30px;padding:0 10px;border-radius:999px;background:#fff;color:var(--lab)}
.lab-hero h1{margin:16px 0 0;font:900 clamp(52px,9vw,128px)/.9 var(--font-display);letter-spacing:-.07em;text-wrap:balance}
.lab-lead{margin:18px 0 0;max-width:34em;font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:rgba(255,255,255,.88)}
.lab-prices{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lab-price{display:grid;gap:4px;padding:12px 18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;transition:background .2s}
.lab-price:hover{background:rgba(255,255,255,.2)}
.lab-price b{font:900 clamp(24px,2.4vw,34px)/1 var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.lab-price span{font:500 12.5px var(--font-mono);letter-spacing:.04em;color:rgba(255,255,255,.82)}
.lab-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

.lab-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:999px;border:2px solid transparent;
  background:var(--lab);color:#fff;font:800 16px var(--font-body);cursor:pointer;box-shadow:0 5px 0 var(--lab-shade);transition:transform .15s,box-shadow .15s,background .2s}
.lab-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--lab-shade)}
.lab-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--lab-shade)}
.lab-btn:focus-visible{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--lab)}
.lab-hero .lab-btn{background:#fff;color:var(--lab)}
.lab-hero .lab-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);box-shadow:none}
.lab-hero .lab-btn.ghost:hover{background:rgba(255,255,255,.12)}
.lab-btn.dark{background:var(--lab-ink);color:#fff;box-shadow:0 5px 0 #000}
:root[data-theme="dark"] .lab-btn.dark{background:#fff;color:var(--lab-ink);box-shadow:0 5px 0 rgba(255,255,255,.35)}

.lab-deal{display:flex;align-items:center;gap:12px;max-width:31em;margin:26px 0 0;padding:12px 16px;border-radius:18px;background:var(--lab-pink);color:var(--lab-ink);font:600 15px/1.35 var(--font-body);transform:rotate(-1deg)}
.lab-deal b{flex:none;font:900 14px var(--font-display);letter-spacing:-.03em;padding:8px 12px;border-radius:12px;background:var(--lab-ink);color:var(--lab-pink)}

/* протокол-пример */
.proto{margin:0;background:#fff;color:var(--lab-ink);border-radius:22px;padding:18px 18px 16px;box-shadow:0 30px 60px rgba(13,20,90,.35),0 0 0 1px rgba(0,0,0,.04);transform:rotate(1.4deg);min-width:0}
.proto figcaption{display:flex;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--lab-ink);font:600 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.proto figcaption span:first-child{color:var(--lab)}
.proto-rows{list-style:none;margin:0;padding:0}
.proto-rows li{display:grid;grid-template-columns:minmax(0,1.25fr) 3.4em 3.6em minmax(40px,.9fr) 5.6em;align-items:center;gap:8px;padding:9px 0;border-bottom:1px dashed rgba(8,17,15,.16);font-size:14px}
.proto-rows b{font-weight:700;min-width:0;overflow-wrap:anywhere}
.proto-rows em{font:700 15px var(--font-mono);font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.proto-rows small{font:500 12px var(--font-mono);color:#5b6670}
.proto-rows i{height:8px;border-radius:4px;background:rgba(8,17,15,.08);position:relative;overflow:hidden}
.proto-rows i::after{content:"";position:absolute;inset:0;width:calc(var(--v,1)*100%);border-radius:4px;background:var(--lab-pink)}
.proto-rows li.ok i::after{background:var(--mint)}
.proto-rows li:not(.ok) em{color:#c2185b}
.proto-rows s{text-decoration:none;font:500 12px var(--font-mono);color:#5b6670;text-align:right}
.proto-out{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--lab-ice);font:600 14px/1.4 var(--font-body)}
:root[data-theme="dark"] .proto-out{background:#eceffe}
.proto-out a{color:var(--lab);text-decoration:underline;text-underline-offset:3px}
.proto-note{margin:10px 0 0;font:500 12px var(--font-mono);color:#5b6670}

/* ---------- секции ---------- */
.lab-sec{padding-block:clamp(48px,6vw,96px)}
.lab-sec.lab-ice{background:var(--lab-ice)}
.lab-h2{margin:0;font:900 clamp(32px,4.6vw,68px)/.98 var(--font-display);letter-spacing:-.065em;text-wrap:balance}
.lab-h2 em{font-style:normal;color:var(--lab)}
:root[data-theme="dark"] .lab-h2 em{color:#8d9bff}
.lab-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,4vw,60px);align-items:end}
.lab-head p{margin:0;max-width:34em;font-size:clamp(16px,1.15vw,18px);color:var(--muted-strong)}

.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(22px,3vw,36px)}
.why-grid article{padding:22px;border-radius:var(--r-l);background:var(--white);border:1px solid var(--line)}
.why-grid b{display:block;font:850 clamp(19px,1.5vw,23px)/1.12 var(--font-display);letter-spacing:-.045em}
.why-grid b::before{content:"";display:block;width:12px;height:12px;border-radius:50%;background:var(--lab);margin-bottom:14px}
.why-grid p{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--muted-strong)}

/* показатели */
.ind{list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0;border-top:2px solid var(--ink)}
.ind li{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr);gap:8px 20px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.ind i{font:600 13px var(--font-mono);font-style:normal;display:grid;place-items:center;width:56px;height:44px;border-radius:12px;background:var(--lab);color:#fff;letter-spacing:.02em}
.ind b{display:block;font:850 18px/1.15 var(--font-display);letter-spacing:-.04em}
.ind small{display:block;margin-top:4px;font:500 12px var(--font-mono);color:var(--muted)}
.ind p{margin:0;font-size:15.5px;line-height:1.45;color:var(--muted-strong)}
.ind .ind-sys{color:var(--ink);font-weight:600}
.ind a{color:var(--lab);text-decoration:underline;text-underline-offset:3px;font-weight:700}
:root[data-theme="dark"] .ind a{color:#8d9bff}
.ind-ext{margin:18px 0 0;padding:16px 18px;border-radius:var(--r-l);background:var(--white);border:1px dashed var(--lab);font-size:16px;line-height:1.5;max-width:60em}

/* отправка */
.send{list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.send li{padding:22px;border-radius:var(--r-l);background:var(--white);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.send span{font:600 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lab)}
.send b{font:850 clamp(19px,1.5vw,23px)/1.12 var(--font-display);letter-spacing:-.045em}
.send p{margin:0;font-size:16px;line-height:1.5;color:var(--muted-strong)}
.send-act{margin-top:18px}

/* тарифы */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(22px,3vw,36px)}
.tier{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,32px);border-radius:var(--r-xl);background:var(--white);border:2px solid var(--ink)}
.tier.main{background:var(--lab);border-color:var(--lab);color:#fff}
.tier p{margin:0}
.tier-k{font:600 13px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.tier-p{font:900 clamp(40px,5vw,64px)/1 var(--font-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.tier-s{font:600 14px var(--font-mono);opacity:.8}
.tier>p:not([class]){font-size:16px;opacity:.85}
.tier ul{list-style:none;margin:8px 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:15px}
.tier li{display:flex;gap:8px;align-items:baseline}
.tier li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lab);transform:translateY(-1px)}
.tier.main li::before{background:var(--lab-pink)}
.tier .lab-btn{margin-top:auto;align-self:flex-start}
.tier.main .lab-btn{background:#fff;color:var(--lab)}
.tiers-deal{margin:14px 0 0;padding:16px 18px;border-radius:var(--r-l);background:var(--lab-pink);color:var(--lab-ink);font-size:16px;line-height:1.5}
.tiers-deal .link{border:0;background:none;padding:0;font:inherit;font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tiers-fine{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* Атлас и путь воды */
.before{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:12px;margin-top:clamp(22px,3vw,36px)}
.atlas-card,.route-card{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-xl);transition:transform .25s}
.atlas-card:hover,.route-card:hover{transform:translateY(-3px)}
.atlas-card{position:relative;overflow:hidden;color:#e8eee9;border:1.5px solid transparent;
  background:radial-gradient(120% 90% at 100% 0%,rgba(36,216,188,.28),transparent 55%) padding-box,linear-gradient(#0a1311,#0a1311) padding-box,linear-gradient(110deg,var(--mint),var(--acid) 55%,#c9d2d8) border-box}
.atlas-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(220,230,236,.16) 50%,transparent 60%);transform:translateX(-100%);animation:labGlint 6s ease-in-out infinite;pointer-events:none}
@keyframes labGlint{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.atlas-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-weight:800;font-size:15px}
.atlas-tag i{font:600 12px/1 var(--font-mono);font-style:normal;letter-spacing:.08em;display:grid;place-items:center;height:30px;padding:0 9px;border-radius:999px;background:linear-gradient(100deg,var(--mint),var(--acid));color:#08110f}
.atlas-card b{font:900 clamp(26px,3vw,44px)/1 var(--font-display);letter-spacing:-.06em;background:linear-gradient(100deg,#fff 30%,#bfe9df 60%,#dfe6ea);-webkit-background-clip:text;background-clip:text;color:transparent}
.atlas-card p,.route-card p{margin:0;font-size:16px;line-height:1.45;max-width:34em}
.atlas-card p{color:rgba(232,238,233,.78)}
.go{margin-top:auto;font-weight:800}
.atlas-card .go{color:var(--mint)}
.route-card{background:var(--white);border:2px solid var(--ink)}
.route-card b{font:900 clamp(22px,2.2vw,30px)/1.02 var(--font-display);letter-spacing:-.055em}
.route-card p{color:var(--muted-strong)}
.route-card .go{color:var(--lab)}
.route-ico{display:flex;align-items:center;gap:6px}
.route-ico i{width:16px;height:16px;border-radius:50%;background:#d8a85a}
.route-ico i:nth-child(2){background:#b7b48a}.route-ico i:nth-child(3){background:#7fd0b8}.route-ico i:nth-child(4){background:var(--mint)}.route-ico i:nth-child(5){background:var(--lab)}

/* дальше */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(22px,3vw,36px)}
.next a{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-l);background:var(--white);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.next a:hover{border-color:var(--lab);transform:translateY(-3px)}
.next b{font:850 clamp(19px,1.5vw,23px)/1.12 var(--font-display);letter-spacing:-.045em}
.next p{margin:0;font-size:15.5px;line-height:1.45;color:var(--muted-strong)}
.next span{margin-top:auto;padding-top:8px;font-weight:800;color:var(--lab)}
:root[data-theme="dark"] .next span,:root[data-theme="dark"] .route-card .go{color:#8d9bff}

/* заявка */
.tier-pick .msgr-row{display:flex;flex-wrap:wrap;gap:8px}
.lab-body .site-header .lab[aria-current]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .lab-hero-in{grid-template-columns:minmax(0,1fr)}
  .proto{transform:none}
  .lab-head{grid-template-columns:minmax(0,1fr)}
  .ind li{grid-template-columns:56px minmax(0,1fr);}
  .ind li>p{grid-column:2}
}
@media (max-width:760px){
  .why-grid,.send,.tiers,.before,.next{grid-template-columns:minmax(0,1fr)}
  .lab-acts .lab-btn{flex:1 1 100%}
  .proto-rows li{grid-template-columns:minmax(0,1fr) 3.2em 3.4em 4.8em;font-size:13.5px}
  .proto-rows i{display:none}
  .tier ul{grid-template-columns:1fr}
  .ind i{width:48px;height:40px;font-size:12px}
  .ind li{grid-template-columns:48px minmax(0,1fr);gap:6px 14px}
  .lab-deal{transform:none}
}
@media (prefers-reduced-motion:reduce){.atlas-card::after{animation:none}}
.tier-pick{border:0;padding:0;margin:0;min-width:0}
.tier-pick legend{padding:0;margin-bottom:8px}
#orderDialog .about-head h2 em{color:var(--lab)}
#orderDialog .lead-submit{background:var(--lab);border-color:var(--lab);color:#fff}
#orderDialog .lead-submit .arr{color:#fff}
#orderDialog .msgr-row input:checked+b{background:var(--lab);border-color:var(--lab);color:#fff}