/* stylesheet */
:root {
  --clr-bg: hsl(335 22% 10%);
  --clr-surface: hsl(335 20% 14%);
  --clr-surface-2: hsl(335 19% 18%);
  --clr-border: hsl(335 16% 22%);
  --clr-teal: hsl(28 68% 45%);
  --clr-teal-dim: hsl(28 68% 33%);
  --clr-gold: hsl(178 78% 58%);
  --clr-gold-dim: hsl(178 78% 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); }
.vw17q { position: absolute; left: -9999px; }
.vw17q:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

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

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

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

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

.rs50e { position: sticky; top: 20px; display: grid; gap: 16px; }
.we98 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.we98 h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.ud16 { text-align: center; border-top: 4px solid var(--clr-teal); }
.hn27 { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.zg79m { color: var(--clr-text-dim); }
.ma66 { font-weight: 700; margin: 4px 0 14px; }
.mq71f ul { list-style: none; }
.mq71f li { border-bottom: 1px solid var(--clr-border); }
.mq71f li:last-child { border-bottom: 0; }
.mq71f a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.mq71f a:hover { color: var(--clr-teal); padding-left: 6px; }
.yb93 p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.nj65 { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.we98 .uh51 { min-width: 0; font-size: .85rem; }
.we98 .yn90, .we98 .de20k { border: 0; }

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

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

.cn82f { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.uv73 { margin-bottom: 12px; }
.ud44f { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.zm68o { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.ca58 { color: var(--clr-text-dim); }
.aw20 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.aw20 a { color: var(--clr-text-dim); text-decoration: none; }
.aw20 a:hover { color: var(--clr-teal); }
.qv79, .jj15z { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

@media (max-width: 980px) {
  .gv70 { grid-template-columns: 1fr; }
  .rs50e { position: static; order: -1; }
  .mq71f { display: none; }
}
@media (max-width: 860px) {
  .ob46r { display: none; }
  .vt29 { display: block; }
}

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

/* inner-page layout variants */
.hx61v { max-width: 900px; }
.xb96 { margin-bottom: 26px; }
.xb96 h2 { margin-bottom: 10px; }
.rk11 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.rk11 .qa60, .rk11 .lz77 { grid-column: 1 / -1; }
.ax30y { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.bx40v { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.uk65l { font-weight: 700; }
.dd95w { max-width: 700px; }
.dd95w .kh56 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .rk11 { grid-template-columns: 1fr; }
  .ax30y { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.qj55z { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.ly94 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.hk88 { color: var(--clr-text-dim); }
.in51 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.go67j { display: flex; gap: 20px; align-items: flex-start; }
.sb87 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ar93h h2 { font-size: 1.2rem; margin-bottom: 8px; }
.ps33i { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ar93h p { margin-bottom: 10px; }

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

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

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

/* extras.sm23 — 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) ─────────────────────────────────────── */
.st10 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.xg52i { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.st10 h2 { margin: 0 0 .75rem; }
.pr59 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.pr59 li { margin: .35rem 0; }
.wv64h { display: grid; gap: 1rem; }
.nk37q {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.gs62 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.kw93 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.gm87 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.gs62 .gm87 { background: var(--clr-teal); color: var(--clr-bg); }
.zm74l { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.jl71a { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.nk37q p { margin: .5rem 0; }
.ww35e { font-size: .95rem; opacity: .8; }
.ws47y { margin-top: .9rem; }
.dg77 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.vz61g, .if63z { margin: 1.5rem 0; }
.vz61g img, .if63z img,
.xv28j.fig img, .yy80p img, .ym78 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.hm23a { padding: 1.5rem 0 3rem; }
.lu91s { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.wv11 { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.hm23a h1 { margin: 0 0 1rem; line-height: 1.2; }
.og21 { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.og21 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ub84k { max-width: 1100px; }
.pb11j { max-width: 780px; }
.pb14o p, .xg22h p { font-size: 1.05rem; }
.xg22h {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.ls34 { font-size: .9rem; opacity: .8; }
.me96 { margin: 1.75rem 0; }
.sq85 { font-weight: 700; margin: 0 0 .5rem; }
.me96 ol { margin: 0; padding-left: 1.2rem; }
.me96 li { margin: .3rem 0; }
.lu70 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lu70 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.dp41 { padding: 1.5rem 0; }
.dp41 + .dp41 { border-top: 1px solid var(--clr-border); }
.dp41 h2 { margin: 0 0 .75rem; }
.zq50j {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.kz37i {
  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);
}
.iu52d { display: block; margin: 0 0 1rem; }
.iu52d img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ag37o { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.ae52 { font-size: 1.3rem; font-weight: 700; }
.fs32l { font-weight: 700; color: var(--clr-gold); }
.uv59 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.uv59 li { margin: .35rem 0; }
.ow81 { padding-left: 1.1rem; }
.fx82 { margin: 1rem 0 .5rem; }
.tr57j, .sk30 { font-size: .9rem; opacity: .8; }
.sk30 { margin-top: 2rem; }
.oj99 { 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 */
.dr55 { min-height: 100vh; }
.cr23v, .wg55z, .yp63n { display: block; }
.th57q, .vc50d { display: block; }
.qj27i ol { list-style: decimal; }