/* stylesheet */
:root {
  --clr-bg: hsl(152 22% 9%);
  --clr-surface: hsl(152 20% 13%);
  --clr-surface-2: hsl(152 19% 17%);
  --clr-border: hsl(152 16% 21%);
  --clr-teal: hsl(127 71% 52%);
  --clr-teal-dim: hsl(127 71% 40%);
  --clr-gold: hsl(277 81% 58%);
  --clr-gold-dim: hsl(277 81% 44%);
  --clr-text: hsl(210 25% 92%);
  --clr-text-dim: hsl(210 12% 66%);
  --ff-body: -apple-system, 'Segoe UI', Roboto, Ubuntu, 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); }
.cj47u { position: absolute; left: -9999px; }
.cj47u:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

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

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

.mo70 { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.mo70 h2 { font-size: 1.4rem; margin-bottom: 14px; color: var(--clr-teal); }
.mo70 h3 { margin: 20px 0 8px; font-size: 1.1rem; }
.mo70 h4 { margin: 16px 0 6px; }
.mo70 p { margin-bottom: 12px; }
.mo70 ul, .mo70 ol { margin: 0 0 14px 22px; }
.mo70 li { margin-bottom: 7px; }
.ns50 { font-size: .84rem; color: var(--clr-text-dim); }
.fd15 { 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; }
.fd15.fa93u { border-left-color: var(--clr-gold); }
.ch89x { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0; }
.jq94l { margin-left: 22px; }
.jq94l li { margin-bottom: 10px; }
.mw42y { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 8px; margin: 12px 0; }
.ci92, .wb70 { list-style: none; margin-left: 0 !important; }
.ci92 li, .wb70 li { padding-left: 24px; position: relative; }
.ci92 li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 800; }
.wb70 li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 800; }

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

.bo66 { position: sticky; top: 20px; display: grid; gap: 16px; }
.wa71a { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.wa71a h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.ie44 { text-align: center; border-top: 4px solid var(--clr-teal); }
.ty35 { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.cp68m { color: var(--clr-text-dim); }
.hq76 { font-weight: 700; margin: 4px 0 14px; }
.iq35 ul { list-style: none; }
.iq35 li { border-bottom: 1px solid var(--clr-border); }
.iq35 li:last-child { border-bottom: 0; }
.iq35 a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.iq35 a:hover { color: var(--clr-teal); padding-left: 6px; }
.ja70f p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.cm33k { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.wa71a .bx14 { min-width: 0; font-size: .85rem; }
.wa71a .mw42y, .wa71a .ut46 { border: 0; }

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

.ng72 { display: grid; gap: 9px; }
.hg42 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 8px; }
.zu98l { 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; }
.zr47e { position: absolute; right: 16px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.zr47e::before, .zr47e::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.zr47e::before { left: 0; right: 0; top: 5px; height: 2px; }
.zr47e::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.zu98l[aria-expanded="true"] .zr47e::after { transform: scaleY(0); }
.lj59r { padding: 0 16px 14px; color: var(--clr-text-dim); }

.mz26u { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.yj94 { margin-bottom: 12px; }
.zx36l { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.uw81r { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.ij44w { color: var(--clr-text-dim); }
.ir19 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.ir19 a { color: var(--clr-text-dim); text-decoration: none; }
.ir19 a:hover { color: var(--clr-teal); }
.xi60, .uz80a { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.tt61 { padding: 38px 0; }
.jm88d { margin: 0 auto; padding: 0 20px; max-width: 880px !important; }
.aq15i ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.aq15i li + li::before { content: '»'; margin-right: 8px; }
.jc70 { font-size: clamp(1.55rem, 3.3vw, 2.15rem); margin-bottom: 10px; }
.nm72s { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.is87f { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 20px; margin-bottom: 15px; }
.is87f h2 { margin-bottom: 9px; font-size: 1.2rem; }
.is87f p { margin-bottom: 11px; }
.is87f ul, .is87f ol { margin: 0 0 11px 21px; }
.ut46 { overflow-x: auto; }
.lt33 { font-size: .82rem; color: var(--clr-text-dim); margin-top: 9px; }
.sn58a label { display: block; font-weight: 600; margin-bottom: 6px; }
.sn58a .mz53y { margin-bottom: 15px; }
.sn58a input, .sn58a select, .sn58a 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; }
.sn58a textarea { min-height: 135px; }
.pm47g { font-size: .82rem; color: var(--clr-text-dim); }

@media (max-width: 980px) {
  .gn54x { grid-template-columns: 1fr; }
  .bo66 { position: static; order: -1; }
  .iq35 { display: none; }
}
@media (max-width: 860px) {
  .rj26 { display: none; }
  .yg34i { display: block; }
}

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

/* inner-page layout variants */
.fl50 { max-width: 900px; }
.pc16i { margin-bottom: 26px; }
.pc16i h2 { margin-bottom: 10px; }
.ir84 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.ir84 .aq15i, .ir84 .jc70 { grid-column: 1 / -1; }
.hb43q { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.br18 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.rr70r { font-weight: 700; }
.dz14u { max-width: 700px; }
.dz14u .is87f { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .ir84 { grid-template-columns: 1fr; }
  .hb43q { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

/* conversion hero */
.ys75 { padding: 30px 0 6px; }
.yy59 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.ys75.cv-solo .yy59 { display: block; }
.rh66e { font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.2; margin-bottom: 14px; }
.zm66d { list-style: none; margin: 0 0 18px !important; padding: 0; display: grid; gap: 9px; }
.zm66d li { position: relative; padding-left: 30px; font-size: 1.02rem; font-weight: 600; }
.zm66d 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; }
.sr19r { font-size: 1.04rem; padding: 13px 28px; }
.pv89b { font-size: .82rem; color: var(--clr-text-dim); margin-top: 10px; }
.ce81 { border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); margin: 0; }
.ce81 img { width: 100%; height: auto; display: block; }

/* author */
.hn64h { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.qv30 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.ru67v { color: var(--clr-text-dim); }
.iy36h { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.vi98r { display: flex; gap: 20px; align-items: flex-start; }
.oh91x { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ll37 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.jh15i { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ll37 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Palatino Linotype', Palatino, Georgia, serif; }

/* extras.qy63m — 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) ─────────────────────────────────────── */
.sr61f { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.il86 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.sr61f h2 { margin: 0 0 .75rem; }
.em29q { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.em29q li { margin: .35rem 0; }
.qz65d { display: grid; gap: 1rem; }
.ua80x {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.et59r {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.km53 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.zv40 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.et59r .zv40 { background: var(--clr-teal); color: var(--clr-bg); }
.ct57 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.om20w { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.ua80x p { margin: .5rem 0; }
.rs60k { font-size: .95rem; opacity: .8; }
.mg73x { margin-top: .9rem; }
.vc63 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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