/* stylesheet */
:root {
  --clr-bg: hsl(115 22% 11%);
  --clr-surface: hsl(115 20% 15%);
  --clr-surface-2: hsl(115 19% 19%);
  --clr-border: hsl(115 16% 23%);
  --clr-teal: hsl(118 75% 50%);
  --clr-teal-dim: hsl(118 75% 38%);
  --clr-gold: hsl(268 85% 58%);
  --clr-gold-dim: hsl(268 85% 44%);
  --clr-text: hsl(268 30% 93%);
  --clr-text-dim: hsl(266 14% 68%);
  --ff-body: -apple-system, 'Segoe UI', Roboto, Ubuntu, 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.65; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.pk80 { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.ti75r { position: absolute; left: -9999px; }
.ti75r:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #16021f; padding: 8px 14px; z-index: 99; }
.nb65h { font-size: .84rem; color: var(--clr-text-dim); }

.jx85y { background: color-mix(in srgb, var(--clr-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; z-index: 50; }
.oc46x, .gl21 { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.gl21 { display: flex; align-items: center; gap: 24px; height: 62px; }
.xp21e { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.15rem; color: var(--clr-text); }
.wt26s { color: var(--clr-teal); text-shadow: 0 0 12px var(--clr-teal); }
.rn74f { color: var(--clr-teal); }
.iq32e { margin-left: auto; }
.iq32e ul { display: flex; gap: 6px; list-style: none; }
.iq32e a { padding: 8px 14px; border-radius: 99px; text-decoration: none; color: var(--clr-text-dim); font-weight: 700; font-size: .92rem; }
.iq32e a:hover { background: var(--clr-surface-2); color: var(--clr-teal); }
.sn37 { display: none; margin-left: auto; background: none; border: 1px solid var(--clr-border); border-radius: 8px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.ij93u, .ij93u::before, .ij93u::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.ij93u { top: 18px; } .ij93u::before { top: -6px; } .ij93u::after { top: 6px; }
.no47d { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.no47d ul { list-style: none; padding: 6px 0; }
.no47d a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

.xr28 { padding: 50px 0 40px; background:
  radial-gradient(700px 340px at 15% 0%, color-mix(in srgb, var(--clr-teal) 20%, transparent), transparent),
  radial-gradient(700px 340px at 85% 10%, color-mix(in srgb, var(--clr-gold) 12%, transparent), transparent); }
.ly29s { display: inline-block; border: 1px solid var(--clr-teal); color: var(--clr-teal); border-radius: 99px; padding: 4px 14px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px; box-shadow: 0 0 16px color-mix(in srgb, var(--clr-teal) 35%, transparent); }
.xr28 h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.12; margin-bottom: 14px; }
.yq82 { color: var(--clr-teal); text-shadow: 0 0 22px color-mix(in srgb, var(--clr-teal) 55%, transparent); }
.ej86t { max-width: 46rem; color: var(--clr-text-dim); font-size: 1.06rem; margin-bottom: 10px; }
.oc83e { font-size: .86rem; color: var(--clr-gold); margin-bottom: 20px; }
.ip66o { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.sg16r { display: inline-block; padding: 12px 24px; border-radius: 99px; font-weight: 800; text-decoration: none; }
.fw99r { background: linear-gradient(90deg, var(--clr-teal), var(--clr-teal-dim)); color: #16021f; box-shadow: 0 0 20px color-mix(in srgb, var(--clr-teal) 45%, transparent); }
.fw99r:hover { filter: brightness(1.12); }
.xq76x { border: 2px solid var(--clr-border); color: var(--clr-text); }
.xq76x:hover { border-color: var(--clr-teal); color: var(--clr-teal); }

.uy58 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; }
.lb69d { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); text-decoration: none; transition: .22s; }
.lb69d:hover { transform: translateY(-4px); border-color: var(--clr-teal); box-shadow: 0 8px 26px color-mix(in srgb, var(--clr-teal) 30%, transparent); }
.lb69d img { width: 100%; height: 100%; min-height: 140px; object-fit: cover; }
.sh36a { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(10, 2, 18, .92)); color: #fff; font-weight: 800; }
.lb69d.ic74 .sh36a { font-size: 1.15rem; }

.re13v { padding: 46px 0; }
.ot19 { background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.iy34a { display: flex; align-items: center; gap: 10px; font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; }
.iv73 { color: var(--clr-teal); text-shadow: 0 0 14px var(--clr-teal); font-size: .9em; }
.re13v h3 { margin: 24px 0 10px; font-size: 1.15rem; color: var(--clr-teal); }
.re13v h4 { margin: 18px 0 8px; }
.re13v p { margin-bottom: 13px; }
.re13v ul, .re13v ol { margin: 0 0 15px 22px; }
.re13v li { margin-bottom: 7px; }
.rt73r { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: start; }
.yp94f { background: var(--clr-surface-2); border: 1px solid var(--clr-teal); border-radius: 14px; text-align: center; padding: 22px 12px; box-shadow: inset 0 0 26px color-mix(in srgb, var(--clr-teal) 16%, transparent); }
.jk60 { font-size: 3rem; font-weight: 900; color: var(--clr-teal); text-shadow: 0 0 18px color-mix(in srgb, var(--clr-teal) 60%, transparent); }
.jk60.mc51x { font-size: 2rem; }
.uw79t { color: var(--clr-text-dim); }
.iq50 { font-weight: 800; margin-top: 6px; }
.ob38 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.nl62 { background: var(--clr-surface-2); border: 1px solid color-mix(in srgb, var(--clr-teal) 45%, var(--clr-border)); border-radius: 12px; padding: 12px 16px; margin: 14px 0; font-size: .95rem; }
.nl62.mg97 { border-color: color-mix(in srgb, var(--clr-gold) 45%, var(--clr-border)); }
.ih69 { border: 1px dashed var(--clr-teal); border-radius: 12px; padding: 16px; margin: 16px 0; }
.kp50i { list-style: none; margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.kp50i li { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 99px; padding: 6px 14px; margin: 0 !important; font-size: .92rem; }
.np78e, .ho59t { list-style: none; margin-left: 0 !important; }
.np78e li, .ho59t li { padding-left: 24px; position: relative; }
.np78e li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; }
.ho59t li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; }
.cm75v { margin-left: 22px; }
.cm75v li { margin-bottom: 10px; }
.cm75v b { color: var(--clr-teal); }
.cr47 { background: var(--clr-surface-2); border: 1px solid var(--clr-teal); border-radius: 14px; padding: 24px; box-shadow: 0 0 30px color-mix(in srgb, var(--clr-teal) 20%, transparent); }

.fl62 { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 12px; margin: 14px 0; }
.zp32c { width: 100%; border-collapse: collapse; min-width: 500px; font-size: .95rem; }
.zp32c th, .zp32c td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--clr-border); }
.zp32c thead th { background: var(--clr-surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-teal); }
.zp32c tbody tr:last-child td, .zp32c tbody tr:last-child th { border-bottom: 0; }
.zp32c th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.rl10l { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .76rem; font-weight: 800; }
.qx36j { background: color-mix(in srgb, var(--clr-gold) 22%, transparent); color: var(--clr-gold); }
.vd25 { background: color-mix(in srgb, var(--clr-teal) 22%, transparent); color: var(--clr-teal); }

.ri43z { display: grid; gap: 10px; }
.sv93 { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 12px; }
.wb92 { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 800; padding: 15px 48px 15px 18px; cursor: pointer; position: relative; }
.pz74m { position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.pz74m::before, .pz74m::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.pz74m::before { left: 0; right: 0; top: 5px; height: 2px; }
.pz74m::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.wb92[aria-expanded="true"] .pz74m::after { transform: scaleY(0); }
.xr31n { padding: 0 18px 15px; color: var(--clr-text-dim); }

.pt67 { border-top: 1px solid var(--clr-border); background: var(--clr-surface); padding: 34px 0 24px; font-size: .9rem; }
.tf58 { margin-bottom: 12px; }
.le20 { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.dy32 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 8px; padding: 2px 9px; font-weight: 800; }
.zt24 { color: var(--clr-text-dim); }
.ss60 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.ss60 a { color: var(--clr-text-dim); text-decoration: none; }
.ss60 a:hover { color: var(--clr-teal); }
.ke54x, .lm43 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.vg61v { padding: 42px 0; }
.lm76 { margin: 0 auto; padding: 0 22px; }
.my14p ol { display: flex; gap: 8px; list-style: none; font-size: .85rem; color: var(--clr-text-dim); margin-bottom: 17px; }
.my14p li + li::before { content: '·'; margin-right: 8px; }
.ia98 { font-size: clamp(1.55rem, 3.3vw, 2.2rem); margin-bottom: 11px; }
.au93 { color: var(--clr-text-dim); font-size: .88rem; margin-bottom: 20px; }
.yv27u { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 21px; margin-bottom: 15px; }
.yv27u h2 { margin-bottom: 9px; font-size: 1.22rem; color: var(--clr-teal); }
.yv27u p { margin-bottom: 11px; }
.yv27u ul, .yv27u ol { margin: 0 0 11px 21px; }
.jf24 { overflow-x: auto; }
.ag25 { font-size: .83rem; color: var(--clr-text-dim); margin-top: 9px; }
.oi55 label { display: block; font-weight: 700; margin-bottom: 6px; }
.oi55 .ak25 { margin-bottom: 15px; }
.oi55 input, .oi55 select, .oi55 textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 10px; padding: 11px 13px; font: inherit; }
.oi55 textarea { min-height: 135px; }
.tj15k { font-size: .83rem; color: var(--clr-text-dim); }

@media (max-width: 900px) {
  .iq32e { display: none; }
  .sn37 { display: block; }
  .uy58 { grid-template-columns: 1fr 1fr; }
  .lb69d.ic74 { grid-column: 1 / -1; }
  .rt73r, .ob38 { grid-template-columns: 1fr; }
}

.ar22 { padding: 46px 0; background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.bx92s { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.bx92s h2 { font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; }
.bx92s h2::before { content: '◆ '; color: var(--clr-teal); text-shadow: 0 0 14px var(--clr-teal); }
.bx92s p { margin-bottom: 13px; }
.bx92s ul { margin: 0 0 15px 22px; }
.bx92s li { margin-bottom: 7px; }

/* inner-page layout variants */
.vl76d { max-width: 900px; }
.uf86 { margin-bottom: 26px; }
.uf86 h2 { margin-bottom: 10px; }
.cg22n { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.cg22n .my14p, .cg22n .ia98 { grid-column: 1 / -1; }
.iz52t { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.rw60m { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.sp95r { font-weight: 700; }
.ry95 { max-width: 700px; }
.ry95 .yv27u { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .cg22n { grid-template-columns: 1fr; }
  .iz52t { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.vw53l { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.zs49 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.yz82x { color: var(--clr-text-dim); }
.nn85 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.rt29 { display: flex; gap: 20px; align-items: flex-start; }
.hp56y { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.sg20 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.fy61 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.sg20 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Palatino Linotype', Palatino, Georgia, serif; }

/* extras.st26y — 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) ─────────────────────────────────────── */
.cr20e { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.gr46 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.cr20e h2 { margin: 0 0 .75rem; }
.gv88k { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.gv88k li { margin: .35rem 0; }
.tl90 { display: grid; gap: 1rem; }
.ek17 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.fu93 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.nd61k { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.zn13c {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.fu93 .zn13c { background: var(--clr-teal); color: var(--clr-bg); }
.og19l { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.cc67f { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.ek17 p { margin: .5rem 0; }
.pi51h { font-size: .95rem; opacity: .8; }
.so49o { margin-top: .9rem; }
.rh83u { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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