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

.wd38p { background: var(--clr-surface); border-bottom: 2px solid var(--clr-teal); }
.ai88, .dq96 { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.dq96 { display: flex; align-items: center; gap: 22px; height: 58px; }
.rx20 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.14rem; color: var(--clr-text); }
.gy73 { color: var(--clr-teal); }
.nm46p { color: var(--clr-teal); }
.li77h { margin-left: auto; }
.li77h ul { display: flex; gap: 2px; list-style: none; }
.li77h a { padding: 8px 12px; text-decoration: none; color: var(--clr-text); font-weight: 700; font-size: .93rem; }
.li77h a:hover { color: var(--clr-teal); text-decoration: underline; }
.rr36 { display: none; margin-left: auto; background: none; border: 2px solid var(--clr-teal); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.as71, .as71::before, .as71::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-teal); }
.as71 { top: 17px; } .as71::before { top: -6px; } .as71::after { top: 6px; }
.fk80l { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.fk80l ul { list-style: none; padding: 6px 0; }
.fk80l a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

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

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

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

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

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

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

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

.gm94 { background: var(--clr-surface-2); border-top: 1px solid var(--clr-border); padding: 32px 0 70px; font-size: .9rem; }
.fj75 { margin-bottom: 12px; }
.uf16m { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.vo57o { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 900; }
.vl15l { color: var(--clr-text-dim); }
.us18c ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.us18c a { color: var(--clr-text-dim); text-decoration: none; }
.us18c a:hover { color: var(--clr-teal); }
.nf33q, .ie77 { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

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

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

/* inner-page layout variants */
.zg35m { max-width: 900px; }
.ba98 { margin-bottom: 26px; }
.ba98 h2 { margin-bottom: 10px; }
.pd31h { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.pd31h .wk30, .pd31h .cl45n { grid-column: 1 / -1; }
.kq69 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.pa58y { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.jp64v { font-weight: 700; }
.lb74a { max-width: 700px; }
.lb74a .uz15g { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .pd31h { grid-template-columns: 1fr; }
  .kq69 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.tl85w { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.qs59 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.ur24q { color: var(--clr-text-dim); }
.vs95s { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.ue61 { display: flex; gap: 20px; align-items: flex-start; }
.jz72 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.mi27d h2 { font-size: 1.2rem; margin-bottom: 8px; }
.qd55 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.mi27d p { margin-bottom: 10px; }

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

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

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

/* extras.qn28g — 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) ─────────────────────────────────────── */
.bo67 { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.dt98 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.bo67 h2 { margin: 0 0 .75rem; }
.zv17o { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.zv17o li { margin: .35rem 0; }
.uk35 { display: grid; gap: 1rem; }
.kk50 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.kv20p {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.nw62m { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.qe54b {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.kv20p .qe54b { background: var(--clr-teal); color: var(--clr-bg); }
.nj28i { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.cs76r { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.kk50 p { margin: .5rem 0; }
.va22 { font-size: .95rem; opacity: .8; }
.aw12 { margin-top: .9rem; }
.dr25 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.vn35r, .tm78c { margin: 1.5rem 0; }
.vn35r img, .tm78c img,
.dy58u.fig img, .rj95 img, .gg34 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.vs31 { padding: 1.5rem 0 3rem; }
.bc45i { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.xw99 { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.vs31 h1 { margin: 0 0 1rem; line-height: 1.2; }
.en21t { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.en21t img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ck98h { max-width: 1100px; }
.au90 { max-width: 780px; }
.bc12z p, .jb22p p { font-size: 1.05rem; }
.jb22p {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.nw94y { font-size: .9rem; opacity: .8; }
.xw86 { margin: 1.75rem 0; }
.ah83j { font-weight: 700; margin: 0 0 .5rem; }
.xw86 ol { margin: 0; padding-left: 1.2rem; }
.xw86 li { margin: .3rem 0; }
.pq73t ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pq73t li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.ca80t { padding: 1.5rem 0; }
.ca80t + .ca80t { border-top: 1px solid var(--clr-border); }
.ca80t h2 { margin: 0 0 .75rem; }
.gq24y {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.ao13 {
  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);
}
.jk31 { display: block; margin: 0 0 1rem; }
.jk31 img { width: 100%; height: auto; border-radius: 10px; display: block; }
.iw72u { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.vv57v { font-size: 1.3rem; font-weight: 700; }
.bk15s { font-weight: 700; color: var(--clr-gold); }
.fs66r { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.fs66r li { margin: .35rem 0; }
.xa96 { padding-left: 1.1rem; }
.jb75x { margin: 1rem 0 .5rem; }
.eu98, .ma91 { font-size: .9rem; opacity: .8; }
.ma91 { margin-top: 2rem; }
.ra39 { 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 */
.nn27z { min-height: 100vh; }
.by68, .ty38t, .mk90 { display: block; }
.pq58i, .vs43d { display: block; }
.sl53l ol { list-style: decimal; }