/* stylesheet */
:root {
  --clr-bg: hsl(121 30% 98%);
  --clr-surface: hsl(0 0% 100%);
  --clr-surface-2: hsl(121 28% 94%);
  --clr-border: hsl(121 20% 87%);
  --clr-teal: hsl(75 64% 46%);
  --clr-teal-dim: hsl(75 64% 36%);
  --clr-gold: hsl(225 74% 48%);
  --clr-gold-dim: hsl(225 74% 38%);
  --clr-text: hsl(215 28% 15%);
  --clr-text-dim: hsl(215 12% 42%);
  --ff-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --shadow: 0 2px 14px rgba(20, 40, 80, .08);
  --radius: 12px;
}
* { 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.68; font-size: 16.5px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.hy14 { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.yh57m { position: absolute; left: -9999px; }
.yh57m:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #fff; padding: 8px 14px; z-index: 99; }

.fh80 { background: var(--clr-surface); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 50; }
.hl51 { border-bottom: 1px solid var(--clr-border); }
.jr89v { display: block; font-size: .76rem; color: var(--clr-text-dim); padding: 5px 0; }
.pc68h { display: flex; align-items: center; gap: 24px; height: 66px; }
.cd69d { text-decoration: none; display: flex; align-items: center; gap: 8px; }
.ho62 { color: var(--clr-teal); font-size: 1.2rem; }
.el84 { font-weight: 900; font-size: 1.3rem; color: var(--clr-text); letter-spacing: -.02em; }
.ov80 { color: var(--clr-teal); }
.wg76 { margin-left: auto; }
.wg76 ul { display: flex; gap: 2px; list-style: none; }
.wg76 a { padding: 9px 13px; text-decoration: none; color: var(--clr-text); font-weight: 600; font-size: .95rem; border-radius: 8px; }
.wg76 a:hover { background: var(--clr-surface-2); color: var(--clr-teal); }
.bh94k { white-space: nowrap; }
.pa86q { display: none; background: none; border: 1px solid var(--clr-border); border-radius: 8px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.zo69, .zo69::before, .zo69::after { content: ''; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--clr-text); }
.zo69 { top: 18px; } .zo69::before { top: -6px; } .zo69::after { top: 6px; }
.fi45m { border-top: 1px solid var(--clr-border); background: var(--clr-surface); }
.fi45m ul { list-style: none; padding: 6px 0; }
.fi45m a { display: block; padding: 12px 24px; color: var(--clr-text); text-decoration: none; font-weight: 600; }

.fb76b { display: inline-block; padding: 11px 22px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.uc17e { background: var(--clr-teal); color: #fff; box-shadow: var(--shadow); }
.uc17e:hover { background: var(--clr-teal-dim); }
.if85 { color: var(--clr-teal); font-weight: 700; }

.bl97 { background: linear-gradient(180deg, var(--clr-surface), var(--clr-bg)); padding: 52px 0 40px; }
.cs64 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
.nu96m { color: var(--clr-gold); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; margin-bottom: 14px; }
.bl97 h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.14; margin-bottom: 16px; letter-spacing: -.02em; }
.bl97 em { color: var(--clr-teal); font-style: normal; }
.lh88u { font-size: 1.1rem; color: var(--clr-text-dim); margin-bottom: 20px; }
.ao26g { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pg76m { font-size: .84rem; color: var(--clr-text-dim); }
.sy91o { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bv61g { position: absolute; left: 14px; bottom: 14px; background: var(--clr-surface); border-radius: 99px; padding: 7px 16px; font-size: .95rem; box-shadow: var(--shadow); }
.bv61g strong { color: var(--clr-gold); font-size: 1.2rem; }
.bv61g.xm54 { position: static; display: inline-block; margin-bottom: 16px; font-size: 1.05rem; }
.bv61g.xm54 strong { font-size: 1.6rem; }

.on99 { background: var(--clr-surface); border-block: 1px solid var(--clr-border); position: sticky; top: 66px; z-index: 40; overflow-x: auto; }
.on99 ul { display: flex; gap: 2px; list-style: none; padding: 6px 0; white-space: nowrap; }
.on99 a { display: block; padding: 7px 13px; border-radius: 99px; text-decoration: none; color: var(--clr-text-dim); font-weight: 600; font-size: .88rem; }
.on99 a:hover { background: var(--clr-surface-2); color: var(--clr-teal); }

.cs34k { padding: 50px 0; }
.yg89k { background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.og28k { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.4rem, 2.8vw, 1.85rem); margin-bottom: 22px; letter-spacing: -.01em; }
.og28k span { color: var(--clr-border); font-size: 1.05em; font-weight: 900; }
.cs34k h3 { margin: 26px 0 10px; font-size: 1.2rem; }
.cs34k h4 { margin: 20px 0 8px; }
.cs34k p { margin-bottom: 14px; }
.cs34k ul, .cs34k ol { margin: 0 0 16px 22px; }
.cs34k li { margin-bottom: 8px; }
.ik30q { column-gap: 40px; }
.sx19d { font-size: .84rem; color: var(--clr-text-dim); }

.mb36 { background: color-mix(in srgb, var(--clr-teal) 8%, var(--clr-surface)); border: 1px solid color-mix(in srgb, var(--clr-teal) 30%, var(--clr-border)); border-radius: var(--radius); padding: 14px 18px; margin: 16px 0; }
.ac30p { background: color-mix(in srgb, var(--clr-gold) 9%, var(--clr-surface)); border-color: color-mix(in srgb, var(--clr-gold) 32%, var(--clr-border)); }
.ir13 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.ex77g { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.yg89k .ex77g { background: var(--clr-bg); }
.ex77g.js17o { border-top: 4px solid var(--clr-teal); }
.ex77g.ov10r { border-top: 4px solid var(--clr-gold); }
.qz49v, .jv15 { list-style: none; margin-left: 0 !important; }
.qz49v li, .jv15 li { padding-left: 26px; position: relative; }
.qz49v li::before { content: '✓'; position: absolute; left: 0; color: var(--clr-teal); font-weight: 900; }
.jv15 li::before { content: '✕'; position: absolute; left: 0; color: var(--clr-gold); font-weight: 900; }

.ou47t { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); margin: 14px 0; }
.hx44 { width: 100%; border-collapse: collapse; min-width: 520px; }
.hx44 th, .hx44 td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--clr-border); }
.hx44 thead th { background: var(--clr-surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-dim); }
.hx44 tbody tr:last-child td, .hx44 tbody tr:last-child th { border-bottom: 0; }
.hx44 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 38%; }
.ne97a { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; }
.rd37 { background: color-mix(in srgb, var(--clr-teal) 14%, #fff); color: var(--clr-teal-dim); }
.dy52 { background: color-mix(in srgb, var(--clr-gold) 16%, #fff); color: var(--clr-gold-dim); }

.mo94n { display: grid; grid-template-columns: 1fr 1.3fr; gap: 26px; align-items: center; margin: 26px 0; }
.mx19 { grid-template-columns: 1.3fr 1fr; }
.mx19 figure { order: 2; }
.mo94n figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bl54p { counter-reset: s; list-style: none; margin-left: 0 !important; display: grid; gap: 12px; }
.bl54p li { counter-increment: s; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 16px 18px 16px 60px; position: relative; box-shadow: var(--shadow); }
.bl54p li::before { content: counter(s); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--clr-teal); color: #fff; font-weight: 800; display: grid; place-items: center; }
.bl54p p { margin: 4px 0 0; color: var(--clr-text-dim); font-size: .95rem; }
.ul31 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 5px solid var(--clr-gold); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); margin-top: 22px; }

.ow49 { display: grid; gap: 10px; }
.pt64 { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius); }
.cs34k:not(.yg89k) .pt64 { background: var(--clr-surface); box-shadow: var(--shadow); }
.sr30 { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 700; padding: 16px 48px 16px 18px; cursor: pointer; position: relative; }
.ne18n { position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.ne18n::before, .ne18n::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.ne18n::before { left: 0; right: 0; top: 5px; height: 2px; }
.ne18n::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.sr30[aria-expanded="true"] .ne18n::after { transform: scaleY(0); }
.ww99n { padding: 0 18px 16px; color: var(--clr-text-dim); }

.dj43q { background: var(--clr-text); color: hsl(210 20% 82%); padding: 40px 0 26px; margin-top: 30px; font-size: .92rem; }
.dj43q a { color: hsl(210 60% 72%); }
.zo84g { display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; margin-bottom: 20px; }
.dl22 { font-size: 1.2rem; margin-bottom: 12px; color: #fff; }
.xq85 { margin-bottom: 12px; }
.km76 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pq93 { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 8px; padding: 2px 9px; font-weight: 800; }
.em62i { color: hsl(210 20% 70%); }
.fk10e ul { list-style: none; display: grid; gap: 8px; }
.fk10e a { text-decoration: none; }
.hk73x { font-size: .8rem; color: hsl(210 12% 62%); margin-bottom: 12px; }
.ne67 { font-size: .8rem; color: hsl(210 12% 62%); }

.gj51o { padding: 46px 0; }
.jv89 { margin: 0 auto; padding: 0 24px; }
.hl26d ol { display: flex; gap: 8px; list-style: none; font-size: .86rem; color: var(--clr-text-dim); margin-bottom: 18px; }
.hl26d li + li::before { content: '›'; margin-right: 8px; }
.yt23g { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 12px; letter-spacing: -.01em; }
.ze68z { color: var(--clr-text-dim); font-size: .9rem; margin-bottom: 22px; }
.ce36v { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.ce36v h2 { margin-bottom: 10px; font-size: 1.25rem; }
.ce36v p { margin-bottom: 12px; }
.ce36v ul, .ce36v ol { margin: 0 0 12px 22px; }
.wg93z { overflow-x: auto; }
.bm38y { font-size: .84rem; color: var(--clr-text-dim); margin-top: 10px; }
.wj70 label { display: block; font-weight: 700; margin-bottom: 6px; }
.wj70 .wg29 { margin-bottom: 16px; }
.wj70 input, .wj70 select, .wj70 textarea { width: 100%; background: var(--clr-bg); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 10px; padding: 11px 13px; font: inherit; }
.wj70 textarea { min-height: 140px; }
.zo37 { font-size: .84rem; color: var(--clr-text-dim); }

@media (max-width: 900px) {
  .wg76, .bh94k { display: none; }
  .pa86q { display: block; margin-left: auto; }
  .cs64, .ir13, .mo94n, .mx19, .zo84g { grid-template-columns: 1fr; }
  .mx19 figure { order: 0; }
  .on99 { top: 0; }
}

.lt36 { padding: 50px 0; background: var(--clr-surface); border-block: 1px solid var(--clr-border); }
.oo23i { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.oo23i h2 { font-size: clamp(1.35rem, 2.7vw, 1.8rem); margin-bottom: 18px; letter-spacing: -.01em; }
.oo23i p { margin-bottom: 14px; }
.oo23i ul { margin: 0 0 16px 22px; }
.oo23i li { margin-bottom: 8px; }

/* inner-page layout variants */
.if76 { max-width: 900px; }
.ll87x { margin-bottom: 26px; }
.ll87x h2 { margin-bottom: 10px; }
.ka90 { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.ka90 .hl26d, .ka90 .yt23g { grid-column: 1 / -1; }
.kd16j { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.nn60 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.ot55 { font-weight: 700; }
.jg54 { max-width: 700px; }
.jg54 .ce36v { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .ka90 { grid-template-columns: 1fr; }
  .kd16j { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

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

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

/* author */
.ph96 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.jd66t { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.rm46 { color: var(--clr-text-dim); }
.fj41 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.rj36 { display: flex; gap: 20px; align-items: flex-start; }
.zh24y { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.pc41m h2 { font-size: 1.2rem; margin-bottom: 8px; }
.lc41t { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.pc41m p { margin-bottom: 10px; }

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

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

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

/* extras.fk44 — 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) ─────────────────────────────────────── */
.fx22r { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.fc77y { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.fx22r h2 { margin: 0 0 .75rem; }
.ai89 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.ai89 li { margin: .35rem 0; }
.db31 { display: grid; gap: 1rem; }
.vv80 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.ce67d {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.vr20f { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.ip34 {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.ce67d .ip34 { background: var(--clr-teal); color: var(--clr-bg); }
.ng25f { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.ch17j { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.vv80 p { margin: .5rem 0; }
.to13x { font-size: .95rem; opacity: .8; }
.fl75l { margin-top: .9rem; }
.wk15 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

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

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

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

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

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

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.hp30v, .vr45y { margin: 1.5rem 0; }
.hp30v img, .vr45y img,
.vn39.fig img, .jc56m img, .hj68o img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ── topic mode: the article layouts ────────────────────────────────────── */
.cv72 { padding: 1.5rem 0 3rem; }
.qm40y { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
.ks20 { font-size: .85rem; opacity: .7; margin: 0 0 .5rem; }
.cv72 h1 { margin: 0 0 1rem; line-height: 1.2; }
.ju11r { margin: 1.5rem auto; max-width: 900px; padding: 0 1.25rem; }
.ju11r img { width: 100%; height: auto; display: block; border-radius: 12px; }
.ls73 { max-width: 1100px; }
.nu25x { max-width: 780px; }
.ee83x p, .co44 p { font-size: 1.05rem; }
.co44 {
  border-left: 3px solid var(--clr-teal);
  padding-left: 1rem;
}
.nc25 { font-size: .9rem; opacity: .8; }
.qf48q { margin: 1.75rem 0; }
.qi67 { font-weight: 700; margin: 0 0 .5rem; }
.qf48q ol { margin: 0; padding-left: 1.2rem; }
.qf48q li { margin: .3rem 0; }
.nd63 ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.nd63 li a {
  display: inline-block; padding: .35rem .7rem;
  background: var(--clr-surface-2); border-radius: 999px; font-size: .9rem;
}
.vl69p { padding: 1.5rem 0; }
.vl69p + .vl69p { border-top: 1px solid var(--clr-border); }
.vl69p h2 { margin: 0 0 .75rem; }
.pq95c {
  display: inline-block; margin-bottom: .4rem;
  font-weight: 700; font-size: 1.4rem; color: var(--clr-teal);
}
.kh59y {
  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);
}
.ib13f { display: block; margin: 0 0 1rem; }
.ib13f img { width: 100%; height: auto; border-radius: 10px; display: block; }
.cz75 { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.qy58 { font-size: 1.3rem; font-weight: 700; }
.iu74l { font-weight: 700; color: var(--clr-gold); }
.ep31 { margin: .75rem 0 1rem; padding-left: 1.1rem; }
.ep31 li { margin: .35rem 0; }
.pw33 { padding-left: 1.1rem; }
.xi13f { margin: 1rem 0 .5rem; }
.nr33w, .qb92 { font-size: .9rem; opacity: .8; }
.qb92 { margin-top: 2rem; }
.qg43z { 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 */
.ab70 { min-height: 100vh; }
.qn41a, .yk27, .xx84a { display: block; }
.qr46, .ag20r { display: block; }
.cw93 ol { list-style: decimal; }