/* stylesheet */
:root {
  --clr-bg: hsl(175 22% 11%);
  --clr-surface: hsl(175 20% 15%);
  --clr-surface-2: hsl(175 19% 19%);
  --clr-border: hsl(175 16% 23%);
  --clr-teal: hsl(141 61% 55%);
  --clr-teal-dim: hsl(141 61% 43%);
  --clr-gold: hsl(291 71% 58%);
  --clr-gold-dim: hsl(291 71% 44%);
  --clr-text: hsl(210 25% 92%);
  --clr-text-dim: hsl(210 12% 66%);
  --ff-body: system-ui, -apple-system, 'Helvetica Neue', Arial, 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); }
.cp15s { position: absolute; left: -9999px; }
.cp15s:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

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

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

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

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

.ip25v { position: sticky; top: 20px; display: grid; gap: 16px; }
.jx74 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.jx74 h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.ds41 { text-align: center; border-top: 4px solid var(--clr-teal); }
.ng47 { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.ux98 { color: var(--clr-text-dim); }
.on66j { font-weight: 700; margin: 4px 0 14px; }
.ut56h ul { list-style: none; }
.ut56h li { border-bottom: 1px solid var(--clr-border); }
.ut56h li:last-child { border-bottom: 0; }
.ut56h a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.ut56h a:hover { color: var(--clr-teal); padding-left: 6px; }
.up15z p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.kq86 { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.jx74 .cm67 { min-width: 0; font-size: .85rem; }
.jx74 .xa88, .jx74 .yn64 { border: 0; }

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

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

.pa50y { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.sg93 { margin-bottom: 12px; }
.zj33e { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.oz77 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.bh35 { color: var(--clr-text-dim); }
.vm68 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.vm68 a { color: var(--clr-text-dim); text-decoration: none; }
.vm68 a:hover { color: var(--clr-teal); }
.hb90u, .yr18 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

@media (max-width: 980px) {
  .zl26h { grid-template-columns: 1fr; }
  .ip25v { position: static; order: -1; }
  .ut56h { display: none; }
}
@media (max-width: 860px) {
  .vb41h { display: none; }
  .md62j { display: block; }
}

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

/* inner-page layout variants */
.fp32k { max-width: 900px; }
.lq59a { margin-bottom: 26px; }
.lq59a h2 { margin-bottom: 10px; }
.tt90s { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.tt90s .uv94g, .tt90s .ai73 { grid-column: 1 / -1; }
.vl59i { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.um29f { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.xj33i { font-weight: 700; }
.zp32f { max-width: 700px; }
.zp32f .rb31r { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .tt90s { grid-template-columns: 1fr; }
  .vl59i { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.ci91 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.kh77f { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.ny75 { color: var(--clr-text-dim); }
.lj32 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.fa87 { display: flex; gap: 20px; align-items: flex-start; }
.xf75r { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.gh84 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.tv74 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.gh84 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; }

/* extras.pb62 — 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) ─────────────────────────────────────── */
.in21b { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ns54 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.in21b h2 { margin: 0 0 .75rem; }
.yv80o { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.yv80o li { margin: .35rem 0; }
.sp49 { display: grid; gap: 1rem; }
.qh37o {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.vj36 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.ps24d { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.hy24 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.vj36 .hy24 { background: var(--clr-teal); color: var(--clr-bg); }
.ch80 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.wn77 { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.qh37o p { margin: .5rem 0; }
.xo87 { font-size: .95rem; opacity: .8; }
.rx75 { margin-top: .9rem; }
.ab79x { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.ts20, .kq70g { margin: 1.5rem 0; }
.ts20 img, .kq70g img,
.mi11.fig img, .ov31 img, .io28 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.ch67 { padding: 1.5rem 0 3rem; }
.dw33 { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.xd44f { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.ch67 h1 { margin: 0 0 1rem; line-height: 1.2; }
.ku60 { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.ku60 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.di31 { max-width: 1100px; }
.jz86o { max-width: 780px; }
.bh50h p, .na64 p { font-size: 1.05rem; }
.na64 {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.rl86v { font-size: .9rem; opacity: .8; }
.yo51 { margin: 1.75rem 0; }
.qt42 { font-weight: 700; margin: 0 0 .5rem; }
.yo51 ol { margin: 0; padding-left: 1.2rem; }
.yo51 li { margin: .3rem 0; }
.yl68 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.yl68 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.ie72r { padding: 1.5rem 0; }
.ie72r + .ie72r { border-top: 1px solid var(--clr-border); }
.ie72r h2 { margin: 0 0 .75rem; }
.fm64r {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.jg78 {
  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);
}
.jz95 { display: block; margin: 0 0 1rem; }
.jz95 img { width: 100%; height: auto; border-radius: 10px; display: block; }
.li87z { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.ug70j { font-size: 1.3rem; font-weight: 700; }
.nr74l { font-weight: 700; color: var(--clr-gold); }
.bl61l { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.bl61l li { margin: .35rem 0; }
.sk49q { padding-left: 1.1rem; }
.zu14 { margin: 1rem 0 .5rem; }
.gz66d, .do90m { font-size: .9rem; opacity: .8; }
.do90m { margin-top: 2rem; }
.nv50 { 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 */
.yc17e { min-height: 100vh; }
.mn43, .cw36, .xm89 { display: block; }
.cx35d, .lr22 { display: block; }
.pv89 ol { list-style: decimal; }