/* stylesheet */
:root {
  --clr-bg: hsl(93 30% 97%);
  --clr-surface: hsl(0 0% 100%);
  --clr-surface-2: hsl(93 28% 93%);
  --clr-border: hsl(93 20% 86%);
  --clr-teal: hsl(30 75% 45%);
  --clr-teal-dim: hsl(30 75% 35%);
  --clr-gold: hsl(180 85% 48%);
  --clr-gold-dim: hsl(180 85% 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); }
.hy22k { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.xx99e { position: absolute; left: -9999px; }
.xx99e:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #fff; padding: 8px 14px; z-index: 99; }
.ms43v { font-size: .85rem; color: var(--clr-text-dim); }

.pt38p { background: var(--clr-surface); border-bottom: 2px solid var(--clr-teal); }
.cc18, .lz88t { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.lz88t { display: flex; align-items: center; gap: 22px; height: 58px; }
.xf31 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.14rem; color: var(--clr-text); }
.nv22a { color: var(--clr-teal); }
.fr65 { color: var(--clr-teal); }
.kf10r { margin-left: auto; }
.kf10r ul { display: flex; gap: 2px; list-style: none; }
.kf10r a { padding: 8px 12px; text-decoration: none; color: var(--clr-text); font-weight: 700; font-size: .93rem; }
.kf10r a:hover { color: var(--clr-teal); text-decoration: underline; }
.hs90n { display: none; margin-left: auto; background: none; border: 2px solid var(--clr-teal); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.il75, .il75::before, .il75::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-teal); }
.il75 { top: 17px; } .il75::before { top: -6px; } .il75::after { top: 6px; }
.qm40 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.qm40 ul { list-style: none; padding: 6px 0; }
.qm40 a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

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

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

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

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

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

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

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

.vf23 { background: var(--clr-surface-2); border-top: 1px solid var(--clr-border); padding: 32px 0 70px; font-size: .9rem; }
.ih40 { margin-bottom: 12px; }
.et48 { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ve62 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 900; }
.ig15 { color: var(--clr-text-dim); }
.zf95 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.zf95 a { color: var(--clr-text-dim); text-decoration: none; }
.zf95 a:hover { color: var(--clr-teal); }
.ge26g, .kt51z { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

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

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

/* inner-page layout variants */
.cg79t { max-width: 900px; }
.eg34s { margin-bottom: 26px; }
.eg34s h2 { margin-bottom: 10px; }
.cf63 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.cf63 .mf64, .cf63 .hq99m { grid-column: 1 / -1; }
.uu65z { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.bs57 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.hv49 { font-weight: 700; }
.pz41g { max-width: 700px; }
.pz41g .pj49c { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .cf63 { grid-template-columns: 1fr; }
  .uu65z { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.ai16 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.op91v { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.nn30s { color: var(--clr-text-dim); }
.hg11c { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.bz62q { display: flex; gap: 20px; align-items: flex-start; }
.sv37 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.lp83 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.tk18 { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.lp83 p { margin-bottom: 10px; }

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

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

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

/* extras.lz95 — 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) ─────────────────────────────────────── */
.aw72h { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.xm90p { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.aw72h h2 { margin: 0 0 .75rem; }
.xo71y { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.xo71y li { margin: .35rem 0; }
.um57 { display: grid; gap: 1rem; }
.rn54z {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.lc14c {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.th46 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.qd71 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.lc14c .qd71 { background: var(--clr-teal); color: var(--clr-bg); }
.ar63 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.qv73r { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.rn54z p { margin: .5rem 0; }
.jb18 { font-size: .95rem; opacity: .8; }
.mr20y { margin-top: .9rem; }
.bj71g { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.dw21, .nu82 { margin: 1.5rem 0; }
.dw21 img, .nu82 img,
.nj37f.fig img, .ha84o img, .ya99 img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.ki64n { padding: 1.5rem 0 3rem; }
.ai11 { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.xj94c { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.ki64n h1 { margin: 0 0 1rem; line-height: 1.2; }
.ge27 { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.ge27 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.rc52 { max-width: 1100px; }
.xh71h { max-width: 780px; }
.sr51o p, .at56 p { font-size: 1.05rem; }
.at56 {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.yy59v { font-size: .9rem; opacity: .8; }
.ai54p { margin: 1.75rem 0; }
.be26o { font-weight: 700; margin: 0 0 .5rem; }
.ai54p ol { margin: 0; padding-left: 1.2rem; }
.ai54p li { margin: .3rem 0; }
.re87u ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.re87u li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.oe40e { padding: 1.5rem 0; }
.oe40e + .oe40e { border-top: 1px solid var(--clr-border); }
.oe40e h2 { margin: 0 0 .75rem; }
.zs62 {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.nj46 {
  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);
}
.yr97b { display: block; margin: 0 0 1rem; }
.yr97b img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ki81 { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.yc75 { font-size: 1.3rem; font-weight: 700; }
.bd85 { font-weight: 700; color: var(--clr-gold); }
.fr54c { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.fr54c li { margin: .35rem 0; }
.zn93 { padding-left: 1.1rem; }
.ty27f { margin: 1rem 0 .5rem; }
.zj79, .og32f { font-size: .9rem; opacity: .8; }
.og32f { margin-top: 2rem; }
.tg36p { 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 */
.cv42l { min-height: 100vh; }
.dk40, .gf86o, .xp41 { display: block; }
.rc97, .hq58 { display: block; }
.hi82 ol { list-style: decimal; }