/* stylesheet */
:root {
  --clr-bg: hsl(254 30% 96%);
  --clr-surface: hsl(0 0% 100%);
  --clr-surface-2: hsl(254 28% 92%);
  --clr-border: hsl(254 20% 85%);
  --clr-teal: hsl(204 58% 46%);
  --clr-teal-dim: hsl(204 58% 36%);
  --clr-gold: hsl(354 68% 48%);
  --clr-gold-dim: hsl(354 68% 38%);
  --clr-text: hsl(150 20% 14%);
  --clr-text-dim: hsl(150 8% 40%);
  --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.7; font-size: 17px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.rq84 { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.bw32q { position: absolute; left: -9999px; }
.bw32q:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #fff; padding: 8px 14px; z-index: 99; }
.af18 { font-size: .85rem; color: var(--clr-text-dim); }

.pw53q { background: var(--clr-surface); border-bottom: 2px solid var(--clr-teal); }
.qf70, .gb35 { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.gb35 { display: flex; align-items: center; gap: 22px; height: 58px; }
.nv72a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.14rem; color: var(--clr-text); }
.bp68 { color: var(--clr-teal); }
.nk76 { color: var(--clr-teal); }
.rp47 { margin-left: auto; }
.rp47 ul { display: flex; gap: 2px; list-style: none; }
.rp47 a { padding: 8px 12px; text-decoration: none; color: var(--clr-text); font-weight: 700; font-size: .93rem; }
.rp47 a:hover { color: var(--clr-teal); text-decoration: underline; }
.px11z { display: none; margin-left: auto; background: none; border: 2px solid var(--clr-teal); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.ub64n, .ub64n::before, .ub64n::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-teal); }
.ub64n { top: 17px; } .ub64n::before { top: -6px; } .ub64n::after { top: 6px; }
.qc60 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.qc60 ul { list-style: none; padding: 6px 0; }
.qc60 a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

.ja14t { padding: 40px 0 8px; }
.pi38c { font-size: .82rem; font-weight: 800; color: var(--clr-teal); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.ja14t h1 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); line-height: 1.2; margin-bottom: 14px; }
.fe73 { color: var(--clr-text-dim); font-size: 1.06rem; margin-bottom: 8px; }
.ga25 { font-size: .84rem; color: var(--clr-gold); margin-bottom: 18px; }

.jt91o { background: var(--clr-surface-2); border: 2px solid var(--clr-teal); border-radius: 12px; padding: 20px 22px; margin: 18px 0 30px; }
.jt91o.ru52j { margin: 18px 0 0; }
.jy72i { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--clr-teal); margin-bottom: 6px; }
.ts88n { font-size: 1.15rem; margin-bottom: 12px; }
.ts88n b { font-size: 1.9rem; color: var(--clr-teal); }
.oj70n { background: var(--clr-surface); border-left: 4px solid var(--clr-teal); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 10px 0; font-size: .95rem; }
.oj70n.cc91t { border-left-color: var(--clr-gold); }
.jt91o .hx19 { margin-top: 8px; }

.pv87i { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.pv87i h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pv87i h3 { margin: 22px 0 8px; font-size: 1.12rem; }
.pv87i p { margin-bottom: 13px; }
.pv87i ul, .pv87i ol { margin: 0 0 15px 24px; }
.pv87i li { margin-bottom: 8px; }
.ud67f, .mp71 { list-style: none; margin-left: 0 !important; }
.ud67f li, .mp71 li { padding-left: 28px; position: relative; }
.ud67f li::before { content: '✔'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; }
.mp71 li::before { content: '✘'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; }
.wg66d { margin-left: 24px; }
.wg66d li { margin-bottom: 12px; }
.wg66d li::marker { font-weight: 900; color: var(--clr-teal); }
.hu45j { background: var(--clr-surface-2); border: 1px dashed var(--clr-teal); border-radius: 10px; padding: 16px; margin: 14px 0; }

.pb42g { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; overflow-x: auto; margin: 13px 0; }
.nz25w { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .95rem; }
.nz25w th, .nz25w td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--clr-border); }
.nz25w thead th { background: var(--clr-surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-dim); }
.nz25w tbody tr:last-child td, .nz25w tbody tr:last-child th { border-bottom: 0; }
.nz25w th[scope="row"] { color: var(--clr-text-dim); font-weight: 700; width: 40%; }
.ap67c { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .76rem; font-weight: 800; }
.rd25 { background: color-mix(in srgb, var(--clr-teal) 14%, #fff); color: var(--clr-teal-dim); }
.ro56j { background: color-mix(in srgb, var(--clr-gold) 15%, #fff); color: var(--clr-gold-dim); }

.hx19 { display: inline-block; padding: 12px 24px; border-radius: 8px; font-weight: 800; text-decoration: none; }
.td91y { background: var(--clr-teal); color: #fff; }
.td91y:hover { background: var(--clr-teal-dim); }
.hs24 { border: 2px solid var(--clr-teal); color: var(--clr-teal); }

.is13 { display: grid; gap: 0; border: 1px solid var(--clr-border); border-radius: 10px; background: var(--clr-surface); overflow: hidden; }
.ot44e { border-bottom: 1px solid var(--clr-border); }
.ot44e:last-child { border-bottom: 0; }
.xv72l { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 800; padding: 15px 46px 15px 17px; cursor: pointer; position: relative; }
.gy69 { position: absolute; right: 17px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.gy69::before, .gy69::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.gy69::before { left: 0; right: 0; top: 5px; height: 2px; }
.gy69::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.xv72l[aria-expanded="true"] .gy69::after { transform: scaleY(0); }
.ni96z { padding: 0 17px 15px; color: var(--clr-text-dim); }

.bv18b { position: sticky; bottom: 0; z-index: 45; background: var(--clr-surface); border-top: 2px solid var(--clr-teal); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 18px; box-shadow: 0 -4px 16px rgba(10, 40, 25, .08); }
.vy38 b { color: var(--clr-teal); font-size: 1.2rem; }

.pp33k { background: var(--clr-surface-2); border-top: 1px solid var(--clr-border); padding: 32px 0 70px; font-size: .9rem; }
.fu52 { margin-bottom: 12px; }
.ri61o { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.tx36m { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 900; }
.xl26 { color: var(--clr-text-dim); }
.mj81x ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.mj81x a { color: var(--clr-text-dim); text-decoration: none; }
.mj81x a:hover { color: var(--clr-teal); }
.sq93e, .za87g { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.re96i { padding: 36px 0; }
.rd41a { margin: 0 auto; padding: 0 20px; max-width: 720px !important; }
.fh90b ol { display: flex; gap: 8px; list-style: none; font-size: .84rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.fh90b li + li::before { content: '›'; margin-right: 8px; }
.xc21j { font-size: clamp(1.55rem, 3.4vw, 2.15rem); margin-bottom: 10px; }
.kq57 { color: var(--clr-text-dim); font-size: .86rem; margin-bottom: 20px; }
.dm12 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 20px; margin-bottom: 15px; }
.dm12 h2 { margin-bottom: 9px; font-size: 1.2rem; }
.dm12 p { margin-bottom: 11px; }
.dm12 ul, .dm12 ol { margin: 0 0 11px 22px; }
.dx71z { overflow-x: auto; }
.vm36 { font-size: .83rem; color: var(--clr-text-dim); margin-top: 9px; }
.ly60n label { display: block; font-weight: 800; margin-bottom: 6px; }
.ly60n .sa32 { margin-bottom: 15px; }
.ly60n input, .ly60n select, .ly60n textarea { width: 100%; background: var(--clr-surface); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; padding: 11px 13px; font: inherit; }
.ly60n textarea { min-height: 135px; }
.nt44 { font-size: .83rem; color: var(--clr-text-dim); }

@media (max-width: 780px) {
  .rp47 { display: none; }
  .px11z { display: block; }
}

.vc47 { border-top: 1px solid var(--clr-border); padding: 26px 0; }
.fl31 h2 { font-size: 1.5rem; margin-bottom: 14px; }
.fl31 p { margin-bottom: 13px; }
.fl31 ul { margin: 0 0 15px 24px; }
.fl31 li { margin-bottom: 8px; }

/* inner-page layout variants */
.mi30o { max-width: 900px; }
.zn29p { margin-bottom: 26px; }
.zn29p h2 { margin-bottom: 10px; }
.fo67 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.fo67 .fh90b, .fo67 .xc21j { grid-column: 1 / -1; }
.wu78k { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.yb92 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.qg25 { font-weight: 700; }
.kk35h { max-width: 700px; }
.kk35h .dm12 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .fo67 { grid-template-columns: 1fr; }
  .wu78k { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.ta13z { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.yp30 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.pc79l { color: var(--clr-text-dim); }
.ry44 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.ku57c { display: flex; gap: 20px; align-items: flex-start; }
.ez98w { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.ew41q h2 { font-size: 1.2rem; margin-bottom: 8px; }
.uu17k { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.ew41q p { margin-bottom: 10px; }

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

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

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

/* extras.jj13 — 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) ─────────────────────────────────────── */
.bt82 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.ve71x { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.bt82 h2 { margin: 0 0 .75rem; }
.xx41n { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.xx41n li { margin: .35rem 0; }
.lh78 { display: grid; gap: 1rem; }
.dw22 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.jw84n {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.nf71l { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.jx87t {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.jw84n .jx87t { background: var(--clr-teal); color: var(--clr-bg); }
.ql66a { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.xt48y { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.dw22 p { margin: .5rem 0; }
.hy16 { font-size: .95rem; opacity: .8; }
.nw72 { margin-top: .9rem; }
.nt87a { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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