/* stylesheet */
:root {
  --clr-bg: hsl(97 30% 98%);
  --clr-surface: hsl(0 0% 100%);
  --clr-surface-2: hsl(97 28% 94%);
  --clr-border: hsl(97 20% 87%);
  --clr-teal: hsl(189 65% 46%);
  --clr-teal-dim: hsl(189 65% 36%);
  --clr-gold: hsl(339 75% 48%);
  --clr-gold-dim: hsl(339 75% 38%);
  --clr-text: hsl(150 20% 14%);
  --clr-text-dim: hsl(150 8% 40%);
  --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.7; font-size: 17px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.ml18 { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.mj45 { position: absolute; left: -9999px; }
.mj45:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #fff; padding: 8px 14px; z-index: 99; }
.ln23 { font-size: .85rem; color: var(--clr-text-dim); }

.oy42 { background: var(--clr-surface); border-bottom: 2px solid var(--clr-teal); }
.vf51y, .ou23q { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.ou23q { display: flex; align-items: center; gap: 22px; height: 58px; }
.wm43 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.14rem; color: var(--clr-text); }
.dv53i { color: var(--clr-teal); }
.mb40q { color: var(--clr-teal); }
.wr85n { margin-left: auto; }
.wr85n ul { display: flex; gap: 2px; list-style: none; }
.wr85n a { padding: 8px 12px; text-decoration: none; color: var(--clr-text); font-weight: 700; font-size: .93rem; }
.wr85n a:hover { color: var(--clr-teal); text-decoration: underline; }
.so45 { display: none; margin-left: auto; background: none; border: 2px solid var(--clr-teal); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.ee74, .ee74::before, .ee74::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-teal); }
.ee74 { top: 17px; } .ee74::before { top: -6px; } .ee74::after { top: 6px; }
.mr52 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.mr52 ul { list-style: none; padding: 6px 0; }
.mr52 a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

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

.as78 { background: var(--clr-surface-2); border: 2px solid var(--clr-teal); border-radius: 12px; padding: 20px 22px; margin: 18px 0 30px; }
.as78.hn26o { margin: 18px 0 0; }
.rf99 { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--clr-teal); margin-bottom: 6px; }
.ss11e { font-size: 1.15rem; margin-bottom: 12px; }
.ss11e b { font-size: 1.9rem; color: var(--clr-teal); }
.ff99z { 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; }
.ff99z.nx20z { border-left-color: var(--clr-gold); }
.as78 .tt39o { margin-top: 8px; }

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

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

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

.en85w { display: grid; gap: 0; border: 1px solid var(--clr-border); border-radius: 10px; background: var(--clr-surface); overflow: hidden; }
.ru31l { border-bottom: 1px solid var(--clr-border); }
.ru31l:last-child { border-bottom: 0; }
.dz57 { 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; }
.rh49m { position: absolute; right: 17px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.rh49m::before, .rh49m::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.rh49m::before { left: 0; right: 0; top: 5px; height: 2px; }
.rh49m::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.dz57[aria-expanded="true"] .rh49m::after { transform: scaleY(0); }
.fr76k { padding: 0 17px 15px; color: var(--clr-text-dim); }

.fo61 { 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); }
.du68v b { color: var(--clr-teal); font-size: 1.2rem; }

.es50r { background: var(--clr-surface-2); border-top: 1px solid var(--clr-border); padding: 32px 0 70px; font-size: .9rem; }
.mb98 { margin-bottom: 12px; }
.su81p { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ye28 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 900; }
.bc70 { color: var(--clr-text-dim); }
.vg10 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.vg10 a { color: var(--clr-text-dim); text-decoration: none; }
.vg10 a:hover { color: var(--clr-teal); }
.tj58, .gs25 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

.gp39z { padding: 36px 0; }
.da91z { margin: 0 auto; padding: 0 20px; max-width: 720px !important; }
.ef50 ol { display: flex; gap: 8px; list-style: none; font-size: .84rem; color: var(--clr-text-dim); margin-bottom: 16px; }
.ef50 li + li::before { content: '›'; margin-right: 8px; }
.bf81i { font-size: clamp(1.55rem, 3.4vw, 2.15rem); margin-bottom: 10px; }
.xt81 { color: var(--clr-text-dim); font-size: .86rem; margin-bottom: 20px; }
.uy53 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 20px; margin-bottom: 15px; }
.uy53 h2 { margin-bottom: 9px; font-size: 1.2rem; }
.uy53 p { margin-bottom: 11px; }
.uy53 ul, .uy53 ol { margin: 0 0 11px 22px; }
.vo82 { overflow-x: auto; }
.ur74 { font-size: .83rem; color: var(--clr-text-dim); margin-top: 9px; }
.yr40 label { display: block; font-weight: 800; margin-bottom: 6px; }
.yr40 .ny39y { margin-bottom: 15px; }
.yr40 input, .yr40 select, .yr40 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; }
.yr40 textarea { min-height: 135px; }
.gy64g { font-size: .83rem; color: var(--clr-text-dim); }

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

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

/* inner-page layout variants */
.eg43w { max-width: 900px; }
.lh65i { margin-bottom: 26px; }
.lh65i h2 { margin-bottom: 10px; }
.yh16 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.yh16 .ef50, .yh16 .bf81i { grid-column: 1 / -1; }
.pk47 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.gk17 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.wx13c { font-weight: 700; }
.mp58 { max-width: 700px; }
.mp58 .uy53 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .yh16 { grid-template-columns: 1fr; }
  .pk47 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.nf25 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.ch66b { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.cg36 { color: var(--clr-text-dim); }
.ux76s { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.ye23 { display: flex; gap: 20px; align-items: flex-start; }
.kv41 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.fo26d h2 { font-size: 1.2rem; margin-bottom: 8px; }
.jt29z { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.fo26d p { margin-bottom: 10px; }

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

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

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

/* extras.cv96o — 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) ─────────────────────────────────────── */
.bf95d { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.up48 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.bf95d h2 { margin: 0 0 .75rem; }
.wb73s { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.wb73s li { margin: .35rem 0; }
.ut35 { display: grid; gap: 1rem; }
.lw24 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.av85b {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.rl58j { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.nl28 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.av85b .nl28 { background: var(--clr-teal); color: var(--clr-bg); }
.fu15d { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.ef34 { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.lw24 p { margin: .5rem 0; }
.ig15 { font-size: .95rem; opacity: .8; }
.vh99 { margin-top: .9rem; }
.wd30s { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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