/* stylesheet */
:root {
  --clr-bg: hsl(132 22% 11%);
  --clr-surface: hsl(132 20% 15%);
  --clr-surface-2: hsl(132 19% 19%);
  --clr-border: hsl(132 16% 23%);
  --clr-teal: hsl(322 82% 49%);
  --clr-teal-dim: hsl(322 82% 37%);
  --clr-gold: hsl(112 90% 58%);
  --clr-gold-dim: hsl(112 90% 44%);
  --clr-text: hsl(210 25% 92%);
  --clr-text-dim: hsl(210 12% 66%);
  --ff-body: 'Segoe UI', system-ui, -apple-system, 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); }
.wd77o { position: absolute; left: -9999px; }
.wd77o:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #041018; padding: 8px 14px; z-index: 99; }

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

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

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

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

.rf55w { position: sticky; top: 20px; display: grid; gap: 16px; }
.vs55r { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 18px; }
.vs55r h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); margin-bottom: 10px; }
.qw71 { text-align: center; border-top: 4px solid var(--clr-teal); }
.no23 { font-size: 2.6rem; font-weight: 900; color: var(--clr-teal); }
.tn96 { color: var(--clr-text-dim); }
.yq20q { font-weight: 700; margin: 4px 0 14px; }
.jp74 ul { list-style: none; }
.jp74 li { border-bottom: 1px solid var(--clr-border); }
.jp74 li:last-child { border-bottom: 0; }
.jp74 a { display: block; padding: 8px 2px; text-decoration: none; color: var(--clr-text-dim); font-size: .92rem; }
.jp74 a:hover { color: var(--clr-teal); padding-left: 6px; }
.gx38 p { font-size: .88rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.pn75h { display: inline-block; border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 9px; font-weight: 800; }
.vs55r .ht12 { min-width: 0; font-size: .85rem; }
.vs55r .sd11, .vs55r .en15u { border: 0; }

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

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

.lr94 { background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 32px 0 24px; font-size: .9rem; }
.ff84d { margin-bottom: 12px; }
.np79g { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cm29 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 800; }
.uc56 { color: var(--clr-text-dim); }
.ac49o ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.ac49o a { color: var(--clr-text-dim); text-decoration: none; }
.ac49o a:hover { color: var(--clr-teal); }
.tm53v, .fl93z { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

@media (max-width: 980px) {
  .zc73k { grid-template-columns: 1fr; }
  .rf55w { position: static; order: -1; }
  .jp74 { display: none; }
}
@media (max-width: 860px) {
  .qp31 { display: none; }
  .cm17 { display: block; }
}

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

/* inner-page layout variants */
.nf66 { max-width: 900px; }
.by88o { margin-bottom: 26px; }
.by88o h2 { margin-bottom: 10px; }
.zr92k { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.zr92k .ic38k, .zr92k .qt36 { grid-column: 1 / -1; }
.cc57 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.xp62 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.rn70 { font-weight: 700; }
.by49q { max-width: 700px; }
.by49q .yn96 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .zr92k { grid-template-columns: 1fr; }
  .cc57 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.wy84 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.mh82 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.qj55a { color: var(--clr-text-dim); }
.am55n { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.me20e { display: flex; gap: 20px; align-items: flex-start; }
.aj75u { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ef41s h2 { font-size: 1.2rem; margin-bottom: 8px; }
.be82 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ef41s p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Segoe UI', system-ui, sans-serif; }

/* extras.hk12 — 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) ─────────────────────────────────────── */
.ci68 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ec17 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.ci68 h2 { margin: 0 0 .75rem; }
.pu68w { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.pu68w li { margin: .35rem 0; }
.se23 { display: grid; gap: 1rem; }
.lu77 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.fi81 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.nl47c { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.yw26c {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.fi81 .yw26c { background: var(--clr-teal); color: var(--clr-bg); }
.li11 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.pc53j { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.lu77 p { margin: .5rem 0; }
.ac59 { font-size: .95rem; opacity: .8; }
.ot76x { margin-top: .9rem; }
.bj61 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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