/* stylesheet */
:root {
  --clr-bg: hsl(217 22% 11%);
  --clr-surface: hsl(217 20% 15%);
  --clr-surface-2: hsl(217 19% 19%);
  --clr-border: hsl(217 16% 23%);
  --clr-teal: hsl(296 60% 51%);
  --clr-teal-dim: hsl(296 60% 39%);
  --clr-gold: hsl(86 70% 58%);
  --clr-gold-dim: hsl(86 70% 44%);
  --clr-text: hsl(210 25% 92%);
  --clr-text-dim: hsl(210 12% 66%);
  --ff-body: Verdana, Geneva, Tahoma, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--ff-body); line-height: 1.66; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.nu40 { position: absolute; left: -9999px; }
.nu40:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

.gy78 { background: linear-gradient(90deg, var(--clr-surface), var(--clr-surface-2)); border-bottom: 2px solid var(--clr-teal); }
.uv45, .vj66x { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.vj66x { display: flex; align-items: center; gap: 24px; height: 60px; }
.hq35 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.14rem; color: var(--clr-text); }
.bt96 { color: var(--clr-teal); }
.jz55 { color: var(--clr-teal); }
.sg44 { margin-left: auto; }
.sg44 ul { display: flex; gap: 4px; list-style: none; }
.sg44 a { padding: 19px 13px; text-decoration: none; color: var(--clr-text-dim); font-weight: 600; font-size: .93rem; border-bottom: 3px solid transparent; }
.sg44 a:hover { color: var(--clr-text); border-bottom-color: var(--clr-teal); }
.qq67 { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.ks67m, .ks67m::before, .ks67m::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.ks67m { top: 18px; } .ks67m::before { top: -6px; } .ks67m::after { top: 6px; }
.nv91 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.nv91 ul { list-style: none; padding: 6px 0; }
.nv91 a { display: block; padding: 11px 20px; color: var(--clr-text); text-decoration: none; font-weight: 600; }

.wq30 { max-width: 1180px; margin: 0 auto; padding: 30px 20px 50px; display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; }
.dc94 { min-width: 0; }
.eu12 { margin-bottom: 20px; }
.rl96 { color: var(--clr-gold); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.eu12 h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.18; margin-bottom: 12px; }
.pw82e { color: var(--clr-text-dim); font-size: 1.05rem; margin-bottom: 8px; }
.us12 { font-size: .84rem; color: var(--clr-gold); }
.ei69h { border: 1px solid var(--clr-border); border-radius: 10px; overflow: hidden; margin-bottom: 26px; }

.oi84t { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.oi84t h2 { font-size: 1.4rem; margin-bottom: 14px; color: var(--clr-teal); }
.oi84t h3 { margin: 20px 0 8px; font-size: 1.1rem; }
.oi84t h4 { margin: 16px 0 6px; }
.oi84t p { margin-bottom: 12px; }
.oi84t ul, .oi84t ol { margin: 0 0 14px 22px; }
.oi84t li { margin-bottom: 7px; }
.jr90 { font-size: .84rem; color: var(--clr-text-dim); }
.wo81 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-teal); border-radius: 0 8px 8px 0; padding: 12px 15px; margin: 12px 0; font-size: .95rem; }
.wo81.ae53q { border-left-color: var(--clr-gold); }
.bv26u { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0; }
.yg53g { margin-left: 22px; }
.yg53g li { margin-bottom: 10px; }
.rv34 { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 8px; margin: 12px 0; }
.ja22p, .fu77e { list-style: none; margin-left: 0 !important; }
.ja22p li, .fu77e li { padding-left: 24px; position: relative; }
.ja22p li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 800; }
.fu77e li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 800; }

.ar91f { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .95rem; }
.ar91f th, .ar91f td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--clr-border); }
.ar91f thead th { background: var(--clr-surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-dim); }
.ar91f tbody tr:last-child td, .ar91f tbody tr:last-child th { border-bottom: 0; }
.ar91f th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.xi25w { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 700; }
.yp72 { background: color-mix(in srgb, var(--clr-teal) 22%, transparent); color: var(--clr-teal); }
.jc12 { background: color-mix(in srgb, var(--clr-gold) 22%, transparent); color: var(--clr-gold); }

.zd97 { position: sticky; top: 20px; display: grid; gap: 16px; }
.wu20 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.wu20 h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.bq88u { text-align: center; border-top: 4px solid var(--clr-teal); }
.jm75 { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.ha88 { color: var(--clr-text-dim); }
.qp92 { font-weight: 700; margin: 4px 0 14px; }
.zj22j ul { list-style: none; }
.zj22j li { border-bottom: 1px solid var(--clr-border); }
.zj22j li:last-child { border-bottom: 0; }
.zj22j a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.zj22j a:hover { color: var(--clr-teal); padding-left: 6px; }
.hh82z p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.qo22g { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.wu20 .ar91f { min-width: 0; font-size: .85rem; }
.wu20 .rv34, .wu20 .fw93v { border: 0; }

.fr25 { display: inline-block; padding: 11px 20px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.ou96b { background: var(--clr-teal); color: #041018; }
.ou96b:hover { background: var(--clr-teal-dim); color: #eaf6ff; }
.lf65x { display: block; text-align: center; }

.sn33 { display: grid; gap: 9px; }
.fo60z { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; }
.mw63 { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 700; padding: 14px 46px 14px 16px; cursor: pointer; position: relative; }
.xj50w { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.xj50w::before, .xj50w::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.xj50w::before { left: 0; right: 0; top: 5px; height: 2px; }
.xj50w::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.mw63[aria-expanded="true"] .xj50w::after { transform: scaleY(0); }
.my37 { padding: 0 16px 14px; color: var(--clr-text-dim); }

.jz23 { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.vo64 { margin-bottom: 12px; }
.lk43n { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.on67n { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.qu57p { color: var(--clr-text-dim); }
.ey99c ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.ey99c a { color: var(--clr-text-dim); text-decoration: none; }
.ey99c a:hover { color: var(--clr-teal); }
.vx53z, .xg56 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.tg59 { padding: 38px 0; }
.bd44b { margin: 0 auto; padding: 0 20px; max-width: 880px !important; }
.an67y ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.an67y li + li::before { content: '»'; margin-right: 8px; }
.bi30 { font-size: clamp(1.55rem, 3.3vw, 2.15rem); margin-bottom: 10px; }
.gq44w { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.xg95u { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 20px; margin-bottom: 15px; }
.xg95u h2 { margin-bottom: 9px; font-size: 1.2rem; }
.xg95u p { margin-bottom: 11px; }
.xg95u ul, .xg95u ol { margin: 0 0 11px 21px; }
.fw93v { overflow-x: auto; }
.hc81 { font-size: .82rem; color: var(--clr-text-dim); margin-top: 9px; }
.od49m label { display: block; font-weight: 600; margin-bottom: 6px; }
.od49m .ze37a { margin-bottom: 15px; }
.od49m input, .od49m select, .od49m textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 12px; font: inherit; }
.od49m textarea { min-height: 135px; }
.vf84 { font-size: .82rem; color: var(--clr-text-dim); }

@media (max-width: 980px) {
  .wq30 { grid-template-columns: 1fr; }
  .zd97 { position: static; order: -1; }
  .zj22j { display: none; }
}
@media (max-width: 860px) {
  .sg44 { display: none; }
  .qq67 { display: block; }
}

.au29 { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.cx68 h2 { font-size: 1.4rem; margin-bottom: 14px; color: var(--clr-teal); }
.cx68 p { margin-bottom: 12px; }
.cx68 ul { margin: 0 0 14px 22px; }
.cx68 li { margin-bottom: 7px; }

/* inner-page layout variants */
.cp64 { max-width: 900px; }
.yw45 { margin-bottom: 26px; }
.yw45 h2 { margin-bottom: 10px; }
.fs42 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.fs42 .an67y, .fs42 .bi30 { grid-column: 1 / -1; }
.ju54q { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.mw57w { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.xp35 { font-weight: 700; }
.bl53n { max-width: 700px; }
.bl53n .xg95u { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .fs42 { grid-template-columns: 1fr; }
  .ju54q { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

.bk31 { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 8px; }
.mg19h { padding-left: 0; font-size: .95rem; }
.mg19h time { font-weight: 700; color: var(--clr-teal); margin-right: 6px; }

/* conversion hero */
.yz50 { padding: 30px 0 6px; }
.qx36i { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.yz50.cv-solo .qx36i { display: block; }
.yp14 { font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.2; margin-bottom: 14px; }
.gc23 { list-style: none; margin: 0 0 18px !important; padding: 0; display: grid; gap: 9px; }
.gc23 li { position: relative; padding-left: 30px; font-size: 1.02rem; font-weight: 600; }
.gc23 li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--clr-teal); color: var(--clr-bg); font-size: .78rem; font-weight: 900; display: grid; place-items: center; }
.vi54l { font-size: 1.04rem; padding: 13px 28px; }
.fn78 { font-size: .82rem; color: var(--clr-text-dim); margin-top: 10px; }
.nb68 { border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); margin: 0; }
.nb68 img { width: 100%; height: auto; display: block; }

/* author */
.gy23t { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.cg26 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.bm61s { color: var(--clr-text-dim); }
.zi12z { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.kq71b { display: flex; gap: 20px; align-items: flex-start; }
.cg24e { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.pw64v h2 { font-size: 1.2rem; margin-bottom: 8px; }
.mx95h { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.pw64v p { margin-bottom: 10px; }

@media (max-width: 860px) {
  .qx36i { grid-template-columns: 1fr; }
  .kq71b { flex-direction: column; }
}

/* открытое верхнее меню на узких экранах — запасной путь, если панель #mobile-menu недоступна */
@media (max-width: 1000px) {
  .sg44.rm28n { display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); z-index: 60; }
  .sg44.rm28n ul { flex-direction: column; gap: 0; }
  .sg44.rm28n a { display: block; padding: 12px 20px; }
}

h1, h2, h3 { font-family: 'Trebuchet MS', Verdana, sans-serif; }

/* extras.di29 — appended to the theme stylesheet at build time and renamed with
   the rest of the classes. Only theme variables are used, so the block inherits
   whatever palette and mode the site got. */

/* ── ranked shortlist (rating mode) ─────────────────────────────────────── */
.rp54o { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.oi74 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.rp54o h2 { margin: 0 0 .75rem; }
.ep82n { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.ep82n li { margin: .35rem 0; }
.qz53 { display: grid; gap: 1rem; }
.wt78w {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.ft84p {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.to67z { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.zj58 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.ft84p .zj58 { background: var(--clr-teal); color: var(--clr-bg); }
.ys97u { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.yx69x { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.wt78w p { margin: .5rem 0; }
.ub57 { font-size: .95rem; opacity: .8; }
.ig57 { margin-top: .9rem; }
.lb77 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

/* ── affiliate disclosure ───────────────────────────────────────────────── */
.uw13 {
  margin: 0 0 .75rem;
  font-size: .85rem;
  opacity: .75;
}

@media (max-width: 640px) {
  .to67z { flex-wrap: wrap; }
  .ys97u { flex: 1 1 60%; }
}

/* ── 404 page ───────────────────────────────────────────────────────────── */
.ug26d {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-body);
  margin: 0;
}
.vj63g {
  max-width: 560px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.rz65b {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--clr-teal);
  letter-spacing: .05em;
}
.xi50 { margin: 0 0 1rem; font-size: 1.5rem; }
.vj63g p { margin: .6rem 0; opacity: .9; }
.lq42 { margin-top: 1.75rem; }