/* stylesheet */
:root {
  --clr-bg: hsl(7 22% 10%);
  --clr-surface: hsl(7 20% 14%);
  --clr-surface-2: hsl(7 19% 18%);
  --clr-border: hsl(7 16% 22%);
  --clr-teal: hsl(127 83% 47%);
  --clr-teal-dim: hsl(127 83% 35%);
  --clr-gold: hsl(277 90% 58%);
  --clr-gold-dim: hsl(277 90% 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); }
.rh44 { position: absolute; left: -9999px; }
.rh44:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

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

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

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

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

.ib79 { position: sticky; top: 20px; display: grid; gap: 16px; }
.hp39u { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.hp39u h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.ad61h { text-align: center; border-top: 4px solid var(--clr-teal); }
.dy62 { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.cd56c { color: var(--clr-text-dim); }
.wl31 { font-weight: 700; margin: 4px 0 14px; }
.hv22r ul { list-style: none; }
.hv22r li { border-bottom: 1px solid var(--clr-border); }
.hv22r li:last-child { border-bottom: 0; }
.hv22r a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.hv22r a:hover { color: var(--clr-teal); padding-left: 6px; }
.se17 p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.cr95 { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.hp39u .ms42 { min-width: 0; font-size: .85rem; }
.hp39u .ws71, .hp39u .rf28 { border: 0; }

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

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

.rd51 { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.tk37 { margin-bottom: 12px; }
.re38k { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.qw63 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.fe18r { color: var(--clr-text-dim); }
.qj29n ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.qj29n a { color: var(--clr-text-dim); text-decoration: none; }
.qj29n a:hover { color: var(--clr-teal); }
.oh41, .vm65 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

@media (max-width: 980px) {
  .gp94x { grid-template-columns: 1fr; }
  .ib79 { position: static; order: -1; }
  .hv22r { display: none; }
}
@media (max-width: 860px) {
  .aq33 { display: none; }
  .zj81p { display: block; }
}

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

/* inner-page layout variants */
.ri71o { max-width: 900px; }
.uu57 { margin-bottom: 26px; }
.uu57 h2 { margin-bottom: 10px; }
.pv90 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.pv90 .zr30j, .pv90 .ps67y { grid-column: 1 / -1; }
.ji72w { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.bo71e { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.vi64z { font-weight: 700; }
.ps57i { max-width: 700px; }
.ps57i .lv99 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .pv90 { grid-template-columns: 1fr; }
  .ji72w { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.ii43 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.pc81c { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.qg83 { color: var(--clr-text-dim); }
.ym34p { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.si63t { display: flex; gap: 20px; align-items: flex-start; }
.ep13o { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.bj61 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.vs10t { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.bj61 p { margin-bottom: 10px; }

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

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

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

/* extras.qd92q — 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) ─────────────────────────────────────── */
.hg85 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.dm20 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.hg85 h2 { margin: 0 0 .75rem; }
.oj37g { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.oj37g li { margin: .35rem 0; }
.qr84 { display: grid; gap: 1rem; }
.uu51 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.sa10f {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.qg59 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.uh44 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.sa10f .uh44 { background: var(--clr-teal); color: var(--clr-bg); }
.wj47y { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.za10 { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.uu51 p { margin: .5rem 0; }
.nz15o { font-size: .95rem; opacity: .8; }
.al53q { margin-top: .9rem; }
.cn80 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

/* ── fallback figure, used when a theme renders no picture of its own ────── */
.ge62j { margin: 1.5rem 0; }
.ge62j img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ty21e { margin: 1.5rem 0; }
.ty21e img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* ── brand hero, added when the theme shows it only in og:image ──────────── */
.tw83 { margin: 0 0 1.75rem; }
.tw83 img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.fr51q, .xe17 { margin: 1.5rem 0; }
.fr51q img, .xe17 img,
.pi83k.fig img, .vz69u img, .id47 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.eg63b { padding: 1.5rem 0 3rem; }
.vt31j { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.na43 { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.eg63b h1 { margin: 0 0 1rem; line-height: 1.2; }
.qy62z { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.qy62z img { width: 100%; height: auto; display: block; border-radius: 12px; }
.yy71 { max-width: 1100px; }
.nn84l { max-width: 780px; }
.pj87w p, .tk47 p { font-size: 1.05rem; }
.tk47 {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.gj82b { font-size: .9rem; opacity: .8; }
.ls77s { margin: 1.75rem 0; }
.tu48 { font-weight: 700; margin: 0 0 .5rem; }
.ls77s ol { margin: 0; padding-left: 1.2rem; }
.ls77s li { margin: .3rem 0; }
.wv13p ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wv13p li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.nw89 { padding: 1.5rem 0; }
.nw89 + .nw89 { border-top: 1px solid var(--clr-border); }
.nw89 h2 { margin: 0 0 .75rem; }
.mj41 {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.rg30t {
  margin: 2rem 0; padding: 1.75rem 0;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-teal);
  border-bottom: 1px solid var(--clr-teal);
}
.gp87y { display: block; margin: 0 0 1rem; }
.gp87y img { width: 100%; height: auto; border-radius: 10px; display: block; }
.vy98x { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.jf57 { font-size: 1.3rem; font-weight: 700; }
.wh90q { font-weight: 700; color: var(--clr-gold); }
.fw55 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.fw55 li { margin: .35rem 0; }
.ai39n { padding-left: 1.1rem; }
.yn22 { margin: 1rem 0 .5rem; }
.os10n, .lm43n { font-size: .9rem; opacity: .8; }
.lm43n { margin-top: 2rem; }
.oh62v { display: block; }

/* structural hooks of the article layouts — no visual rules of their own, but
   they must exist in the stylesheet so the renamer covers them like everything else */
.vc34 { min-height: 100vh; }
.bq64l, .fv92, .ko82b { display: block; }
.tg99b, .go44l { display: block; }
.im68n ol { list-style: decimal; }