/* stylesheet */
:root {
  --clr-bg: hsl(304 30% 98%);
  --clr-surface: hsl(0 0% 100%);
  --clr-surface-2: hsl(304 28% 94%);
  --clr-border: hsl(304 20% 87%);
  --clr-teal: hsl(19 62% 46%);
  --clr-teal-dim: hsl(19 62% 36%);
  --clr-gold: hsl(169 72% 48%);
  --clr-gold-dim: hsl(169 72% 38%);
  --clr-text: hsl(150 20% 14%);
  --clr-text-dim: hsl(150 8% 40%);
  --ff-body: 'Segoe UI', system-ui, -apple-system, 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); }
.pm81 { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.xl97 { position: absolute; left: -9999px; }
.xl97:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #fff; padding: 8px 14px; z-index: 99; }
.pc60 { font-size: .85rem; color: var(--clr-text-dim); }

.ld66j { background: var(--clr-surface); border-bottom: 2px solid var(--clr-teal); }
.tt35i, .zv50 { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.zv50 { display: flex; align-items: center; gap: 22px; height: 58px; }
.jf71y { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.14rem; color: var(--clr-text); }
.ly49t { color: var(--clr-teal); }
.lt80 { color: var(--clr-teal); }
.mu39 { margin-left: auto; }
.mu39 ul { display: flex; gap: 2px; list-style: none; }
.mu39 a { padding: 8px 12px; text-decoration: none; color: var(--clr-text); font-weight: 700; font-size: .93rem; }
.mu39 a:hover { color: var(--clr-teal); text-decoration: underline; }
.qk95q { display: none; margin-left: auto; background: none; border: 2px solid var(--clr-teal); border-radius: 6px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.ko15b, .ko15b::before, .ko15b::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-teal); }
.ko15b { top: 17px; } .ko15b::before { top: -6px; } .ko15b::after { top: 6px; }
.yi59 { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.yi59 ul { list-style: none; padding: 6px 0; }
.yi59 a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }

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

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

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

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

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

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

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

.cz42 { background: var(--clr-surface-2); border-top: 1px solid var(--clr-border); padding: 32px 0 70px; font-size: .9rem; }
.ac22 { margin-bottom: 12px; }
.vh87n { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.aa57 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 2px 9px; font-weight: 900; }
.ka27j { color: var(--clr-text-dim); }
.zc82 ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin-bottom: 14px; }
.zc82 a { color: var(--clr-text-dim); text-decoration: none; }
.zc82 a:hover { color: var(--clr-teal); }
.py61y, .xs52t { color: var(--clr-text-dim); font-size: .8rem; margin-bottom: 8px; }

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

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

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

/* inner-page layout variants */
.kl20 { max-width: 900px; }
.kk48 { margin-bottom: 26px; }
.kk48 h2 { margin-bottom: 10px; }
.tm80 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.tm80 .qn87, .tm80 .cm79 { grid-column: 1 / -1; }
.yz87e { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.ht30o { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.zj43z { font-weight: 700; }
.ty24 { max-width: 700px; }
.ty24 .dl65 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .tm80 { grid-template-columns: 1fr; }
  .yz87e { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.rb63x { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.nf41 { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.ys23 { color: var(--clr-text-dim); }
.ua91e { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.ot42l { display: flex; gap: 20px; align-items: flex-start; }
.yv63t { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.lm75 h2 { font-size: 1.2rem; margin-bottom: 8px; }
.ld70y { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.lm75 p { margin-bottom: 10px; }

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

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

h1, h2, h3 { font-family: 'Segoe UI', system-ui, sans-serif; }

/* extras.um76 — 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) ─────────────────────────────────────── */
.fy87j { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.sq96n { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.fy87j h2 { margin: 0 0 .75rem; }
.pn82q { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.pn82q li { margin: .35rem 0; }
.hj91q { display: grid; gap: 1rem; }
.mz48 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.ef20 {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.ic57i { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.fq29b {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.ef20 .fq29b { background: var(--clr-teal); color: var(--clr-bg); }
.hr87j { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.pe98t { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.mz48 p { margin: .5rem 0; }
.se40q { font-size: .95rem; opacity: .8; }
.tz49 { margin-top: .9rem; }
.tv79 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.st18, .ap84x { margin: 1.5rem 0; }
.st18 img, .ap84x img,
.zh38.fig img, .ad63 img, .cp95z img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.jd19 { padding: 1.5rem 0 3rem; }
.st71s { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.fm23a { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.jd19 h1 { margin: 0 0 1rem; line-height: 1.2; }
.yv79 { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.yv79 img { width: 100%; height: auto; display: block; border-radius: 12px; }
.mo98h { max-width: 1100px; }
.jy47 { max-width: 780px; }
.bp55 p, .mj97p p { font-size: 1.05rem; }
.mj97p {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.kv67 { font-size: .9rem; opacity: .8; }
.yl93 { margin: 1.75rem 0; }
.dj35a { font-weight: 700; margin: 0 0 .5rem; }
.yl93 ol { margin: 0; padding-left: 1.2rem; }
.yl93 li { margin: .3rem 0; }
.ot71 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ot71 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.vo96 { padding: 1.5rem 0; }
.vo96 + .vo96 { border-top: 1px solid var(--clr-border); }
.vo96 h2 { margin: 0 0 .75rem; }
.kq65m {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.uv51w {
  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);
}
.zz58z { display: block; margin: 0 0 1rem; }
.zz58z img { width: 100%; height: auto; border-radius: 10px; display: block; }
.bh16r { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.fv14q { font-size: 1.3rem; font-weight: 700; }
.nd28s { font-weight: 700; color: var(--clr-gold); }
.sr51 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.sr51 li { margin: .35rem 0; }
.mm88u { padding-left: 1.1rem; }
.qa48z { margin: 1rem 0 .5rem; }
.mo77, .cb64q { font-size: .9rem; opacity: .8; }
.cb64q { margin-top: 2rem; }
.vu15q { 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 */
.vb74 { min-height: 100vh; }
.ow94, .cn12, .hs13 { display: block; }
.gh23, .mf46y { display: block; }
.jz87z ol { list-style: decimal; }