/* PPP-023 redesign. Loaded after the live main.css and reviews.css: the live look
   stays, this file only tidies it. One spacing scale (4 8 12 16 24 32 48), one type scale,
   one heading style, list columns that line up, drawn ticks instead of typed ones,
   Barlow + Barlow Condensed in place of Roboto + Roboto Condensed (design-principles). */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --t-xs: 13px; --t-s: 14px; --t-m: 16px; --t-b: 18px; --t-l: 20px; --t-xl: 24px; --t-h2: 34px; --t-h1: 42px;
  --btn-h: 44px;
  --container-max: 1260px;
}
body { font-size: var(--t-m); line-height: 1.6; }
.hidden, [hidden] { display: none !important; }

/* ── header: the live one, a little less tall ── */
.header { min-height: 0; padding: var(--s5) 0; }
.header__nav-list { font-size: var(--t-b); gap: 0 var(--s7); }

/* ── headings: one H1, one section heading for every block ── */
.home-h1 { font: 900 var(--t-h1)/1.15 var(--font-main); color: var(--black); }
.page-updated { font-size: var(--t-s); color: #6b7280; margin: var(--s2) 0 0; }
.promo__title, .exposition__inner h2, .info-section__text h2 {
  font: 900 var(--t-h2)/1.2 var(--font-main); color: var(--black); letter-spacing: 0.2px; text-transform: none;
  border-bottom: 1px solid var(--ac); padding: 0 0 var(--s2); margin: 0 0 var(--s5);
}
.info-section__text h2 ~ h2, .exposition__inner h2 ~ h2 { margin-top: var(--s7); }
.promo__title-wrapper { justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s5); border-bottom: 1px solid var(--ac); padding: 0 0 var(--s2); margin: var(--s6) 0 var(--s5); }
.promo__title-wrapper .promo__title { border: 0; padding: 0; margin: 0; }
.exposition__inner h3, .info-section__text h3 { font: 700 var(--t-l)/1.3 var(--font-main); color: var(--black); margin: var(--s5) 0 var(--s2); }

/* ── sections: one rhythm ── */
.promo { margin: 0; padding: var(--s7) 0; }
.top5-section { padding-top: var(--s2); }
.text-section--alt { background: #fff; }


/* ── ticks: drawn, not typed (no dingbats on the page) ── */
.cat-pick-pro::before, .rank-pro::before, .info-section__text td li::before {
  content: ""; width: 5px; height: 10px; top: .2em; left: 3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.info-section__text td li::before { color: var(--ac); top: .3em; }

/* ── top three: the live cards, three in a row, larger ── */
.cat-picks-grid.top3 { grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin: 0; }
.top3 .cat-pick-img, .top3 .cat-pick-shadow { height: 280px; }
.top3 .cat-pick-img-wrap { position: relative; }
.top3__n { position: absolute; z-index: 12; top: 10px; right: 12px; font: 900 32px/1 var(--font-cond); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.top3 .promo__info { gap: var(--s3); padding: 0 var(--s4) var(--s3); }
.top3 .promo__name-portal { font-size: var(--t-xl); line-height: 1.15; padding: 0; }
.top3 .card-date { padding: var(--s1) 0 0; font-size: var(--t-xs); }
.top3 .promo__prices { margin: 0; text-align: right; flex-shrink: 0; }
.top3 .promo__old-price { font-size: var(--t-b); letter-spacing: 0; }
.top3 .promo__old-price::before { border-bottom-width: 2px; top: 6px; }
.top3 .promo__new-price { font-size: 40px; line-height: 1; }
.promo__period { display: block; color: #fff; font: 500 var(--t-s)/1.2 var(--font-cond); }
.top3 .cat-pick-body { padding: var(--s4) var(--s5) var(--s5); gap: var(--s3); }
.top3 .rank-cat { align-self: flex-start; }
.top3 .cat-pick-excerpt { font-size: var(--t-b); line-height: 1.5; margin: 0; }
.top3 .cat-pick-pros { margin: 0; gap: var(--s1); }
.top3 .cat-pick-pro { font-size: var(--t-s); line-height: 1.4; font-family: var(--font-cond); }
.cat-pick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding-top: var(--s2); }
.cat-btn-review, .cat-pick-btns .thumbnail-btn { height: var(--btn-h); width: auto; margin: 0; font-size: var(--t-b); padding: 0 var(--s3); min-width: 0; }

/* ── the rest of the ranking: the live rows, columns that line up ── */
.rank-list { margin-top: var(--s6); }
.rank-item { display: grid; grid-template-columns: 56px 168px minmax(0,1fr) 270px; align-items: center; gap: 0 var(--s5); padding: var(--s4) var(--s3); }
.rank-num { min-width: 0; font-size: 30px; }
.rank-img-wrap { width: 168px; height: 112px; }
.rank-header { gap: var(--s1) var(--s3); margin-bottom: var(--s2); }
.rank-name { font-size: var(--t-xl); }
.rank-cat { font-size: 12px; }
.rank-date { font-size: var(--t-xs); color: #8a8a8a; }
.rank-excerpt { font: 400 var(--t-m)/1.5 var(--font-cond); color: var(--dark); margin: 0 0 var(--s2); max-width: 70ch; }
.rank-pros { gap: 2px; }
.rank-pro { font-size: var(--t-s); line-height: 1.4; }
.rank-cta { min-width: 0; width: 270px; align-items: stretch; gap: var(--s2); }
.rank-price { text-align: right; }
.rank-price-old { font-size: var(--t-s); }
.rank-price-main { font-size: 30px; }
.rank-price-period { font-size: var(--t-s); margin-left: var(--s1); }
.rank-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.rank-btn-review, .rank-btn-visit { height: var(--btn-h); font-size: var(--t-m); padding: 0 var(--s2); }

/* ── texts below the list: one paragraph style (the live selectors for it never matched) ── */
.exposition__inner, .info-section__text { max-width: 900px; font: 400 var(--t-b)/1.65 var(--font-main); color: var(--dark); }
.exposition__inner p, .info-section__text p { font: 400 var(--t-b)/1.65 var(--font-main); color: var(--dark); margin: 0 0 var(--s4); letter-spacing: 0; }
.exposition__inner ul, .exposition__inner ol, .info-section__text ul, .info-section__text ol { margin: 0 0 var(--s4) var(--s5); }
.exposition__inner li, .info-section__text li { font-size: var(--t-b); line-height: 1.6; margin-bottom: var(--s1); }
.info-section__text table { margin: var(--s2) 0 var(--s5); font-size: var(--t-m); }
.info-section__text th { font-size: var(--t-m); padding: var(--s3) var(--s4); }
.info-section__text td { padding: var(--s3) var(--s4); }
.info-section__text td li { font-size: var(--t-m); margin: 0 0 var(--s2); list-style: none; }
.info-section__text td ul { margin: 0; }

/* ── FAQ: the live cards ── */
.review-faq__list { max-width: 900px; gap: 0; }
.v2-faq-question { font-size: var(--t-b); padding: var(--s4) var(--s5); }
.v2-faq-answer { font-size: var(--t-m); padding: 0 var(--s5) var(--s4) 44px; }

/* ── footer ── */
.footer { min-height: 0; padding-bottom: var(--s7); }
.footer__list-title { font-size: var(--t-l); margin-bottom: var(--s4); }
.footer__list { gap: var(--s3) 0; }

/* ── tablet ── */
@media (max-width: 1100px) {
  .rank-item { grid-template-columns: 44px 140px minmax(0,1fr) 220px; gap: 0 var(--s4); }
  .rank-img-wrap { width: 140px; height: 94px; }
  .rank-cta { width: 220px; }
  .top3 .cat-pick-img, .top3 .cat-pick-shadow { height: 220px; }
  .top3 .promo__new-price { font-size: 32px; }
}
@media (max-width: 900px) {
  .cat-picks-grid.top3 { grid-template-columns: 1fr; gap: var(--s4); }
  .top3 .cat-pick-img, .top3 .cat-pick-shadow { height: 260px; }
}

/* ── phone: no extra height ── */
@media (max-width: 640px) {
  :root { --t-h1: 28px; --t-h2: 24px; --t-b: 17px; --s7: 32px; --s6: 24px; }
  .container { max-width: 100% !important; padding: 0 var(--s4); }
  .header { padding: var(--s4) 0; }
  .header__logo { max-width: 150px; }
  .home-h1 { line-height: 1.2; }
  .promo__title-wrapper { flex-direction: column; align-items: stretch; }
  .top3 .cat-pick-img, .top3 .cat-pick-shadow { height: 200px; }
  .top3 .cat-pick-body { padding: var(--s3) var(--s4) var(--s4); gap: var(--s2); }
  .top3 .cat-pick-excerpt { font-size: var(--t-m); }
  .top3 .cat-pick-pro { font-size: var(--t-xs); }
  .top3 .promo__name-portal { font-size: var(--t-l); }

  /* row: frame and name on top, price and one button on the line below */
  .rank-list { margin-top: var(--s5); }
  .rank-item { grid-template-columns: 112px minmax(0,1fr); grid-template-areas: "img body" "cta cta"; gap: var(--s2) var(--s3); padding: var(--s3) 0; border-radius: 0; }
  .rank-item:hover { background: none; box-shadow: none; }
  .rank-num { display: none; }
  .rank-img-wrap { grid-area: img; width: 112px; height: 76px; }
  .rank-body { grid-area: body; flex-basis: auto; }
  .rank-header { margin: 0; gap: 2px var(--s2); }
  .rank-name { font-size: var(--t-l); line-height: 1.2; }
  .rank-cat { font-size: 11px; padding: 1px 7px; }
  .rank-date { width: 100%; }
  .rank-excerpt, .rank-pros { display: none; }
  .rank-cta { grid-area: cta; width: auto; flex-direction: row; align-items: center; justify-content: space-between; }
  .rank-price { text-align: left; }
  .rank-price-main { font-size: var(--t-xl); }
  .rank-btns { display: flex; flex: 0 0 auto; width: auto; }
  .rank-price-period { display: block; margin: 0; white-space: nowrap; }
  .rank-btn-review { display: none; }
  .rank-btn-visit { height: 40px; width: 150px; padding: 0 var(--s4); }
  .exposition__inner p, .info-section__text p, .exposition__inner li, .info-section__text li { font-size: var(--t-m); }
  .info-section__text th, .info-section__text td { padding: var(--s2) var(--s3); }
  .v2-faq-question { padding: var(--s3) var(--s4); font-size: var(--t-m); }
  .v2-faq-answer { padding: 0 var(--s4) var(--s3) 36px; }
  .footer__inner { flex-direction: column; gap: var(--s5); }
}

/* ══ Rows from #4 (variant B chosen by the user 29.10.2026) ══ */
.rest-section .rank-list { margin-top: 0; }
.rank-n-img { display: none; }

/* B, card row: the live white card laid sideways, big frame on the left, price and buttons along the bottom */
.rank-list { display: flex; flex-direction: column; gap: var(--s5); }
.rank-item { display: grid; grid-template-columns: 360px minmax(0,1fr); grid-template-areas: "img body" "img cta"; grid-template-rows: 1fr auto; gap: 0 var(--s5); align-items: stretch; padding: 0; border: 0; background: #fff; border-radius: var(--radius) 0 var(--radius) 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); overflow: hidden; }
.rank-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.rank-num { display: none; }
.rank-n-img { display: block; position: absolute; top: 10px; right: 12px; z-index: 2; font: 900 30px/1 var(--font-cond); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.rank-img-wrap { grid-area: img; width: 100%; height: 100%; min-height: 230px; border-radius: 0; }
.rank-score { top: 10px; bottom: auto; left: 10px; background: var(--dark); color: var(--ac3); font-size: var(--t-l); padding: 4px 10px; border-radius: 6px; }
.rank-body { grid-area: body; padding: var(--s5) var(--s5) 0 0; }
.rank-cta { grid-area: cta; width: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s3) var(--s5) var(--s5) 0; margin-top: var(--s3); border-top: 1px solid #eee; }
.rank-price { text-align: left; }
.rank-btns { width: 300px; }
@media (max-width: 1100px) {
  .rank-item { grid-template-columns: 260px minmax(0,1fr); }
  .rank-btns { width: 260px; }
}
@media (max-width: 640px) {
  .rank-list { gap: var(--s4); }
  .rank-item { grid-template-columns: 1fr; grid-template-areas: "img" "body" "cta"; grid-template-rows: auto; }
  .rank-img-wrap { height: 190px; min-height: 0; }
  .rank-body { padding: var(--s3) var(--s4) 0; }
  .rank-cta { padding: var(--s3) var(--s4) var(--s4); margin-top: var(--s3); }
  .rank-btns { width: auto; }
}


/* ══ Review: the live v2 review, tidied ══ */
.review--v2 { margin: var(--s4) 0 0; }
.review--v2 .review__inner > * { margin-top: 0; margin-bottom: var(--s7); }
.review--v2 .review__inner > .v2-hero { margin-bottom: var(--s4); }
.review--v2 .review__inner > .v2-byline { margin-bottom: var(--s6); }
.v2-byline { font-size: var(--t-s); color: #6b7280; }
.v2-byline a { color: var(--ac); font-weight: 600; }
.v2-section-label, .related-rows .promo__title { font: 900 var(--t-h2)/1.2 var(--font-main); color: var(--black); border-bottom: 1px solid var(--ac); padding: 0 0 var(--s2); margin: 0 0 var(--s5); }
.vb-score__header .v2-section-label { border: 0; margin: 0; padding: 0; }
.vb-score__how { font: 600 var(--t-m) var(--font-main); color: var(--ac); margin-left: var(--s3); }
.v2-hero__title { font-family: var(--font-main); font-weight: 900; }

/* one card look: the live white card with the 12-0-12-0 corner */
.v2-verdict-safe, .v2-verdict-watch, .v2-pros, .v2-cons, .vb-score, .v2-plan-card, .v2-flow-step, .v2-feature-card, .v2-facts-grid, .v2-nm-card, .v2-reviewer {
  background: #fff; border-radius: var(--radius) 0 var(--radius) 0; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.v2-verdict-safe, .v2-verdict-watch, .v2-pros, .v2-cons, .vb-score, .v2-facts-grid, .v2-reviewer { padding: var(--s5); }
.v2-verdict-grid, .v2-proscons, .v2-plans-grid, .v2-features-grid, .v2-nm-grid { gap: var(--s4); }
.v2-verdict-item, .v2-pros li, .v2-cons li { font-size: var(--t-m); padding: var(--s2) 0 var(--s2) 26px; }

/* no traffic light: blue for the good side, dark for the warnings; drawn marks, not typed */
.v2-verdict-heading, .v2-proscons__head { font: 800 var(--t-l)/1.3 var(--font-main); padding-bottom: var(--s2); margin-bottom: var(--s2); }
.v2-verdict-heading, .v2-proscons__head--pro { color: var(--ac); border-bottom: 2px solid var(--ac); }
.v2-verdict-heading--watch, .v2-proscons__head--con { color: var(--black); border-bottom: 2px solid var(--dark); }
.v2-verdict-item--safe::before, .v2-pros li::before { content: ""; left: 4px; top: calc(var(--s2) + .25em); width: 5px; height: 10px; border: solid var(--ac); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v2-verdict-item--watch::before, .v2-cons li::before { content: ""; left: 2px; top: calc(var(--s2) + .75em); width: 11px; height: 2px; background: var(--dark); }
.v2-billing-row--pass .v2-billing-value, .v2-billing-row--warn .v2-billing-value { color: var(--black); }
.v2-billing-row--warn .v2-billing-label { color: var(--ac2); }
.v2-modifier--plus, .v2-modifier--minus { background: #f0f0f0; color: var(--dark); }
.v2-plan-badge { background: var(--ac); }

/* steps: plain blue numbers, no circles, no arrows */
.v2-flow-steps { gap: var(--s4); }
.v2-flow-step { padding: var(--s5) var(--s4); }
.v2-flow-step__num { width: auto; height: auto; line-height: 1; background: none; color: var(--ac); border-radius: 0; font: 900 34px/1 var(--font-cond); margin: 0 0 var(--s2); }
.v2-flow-step__title { font-size: var(--t-b); }
.v2-flow-step__desc { font-size: var(--t-s); }

/* plans: even cards, same height */
.v2-plans-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.v2-plan-card { padding: var(--s5) var(--s3) var(--s4); }
.v2-plan-card__price { font-family: var(--font-price); font-size: 34px; color: var(--ac); }

/* buttons: the live gradient and the live type everywhere */
.v2-inline-cta { border-radius: var(--radius) 0 var(--radius) 0; padding: var(--s5); }
.v2-inline-cta__name { font: 800 var(--t-xl)/1.2 var(--font-main); }
.v2-inline-cta__price { font-size: var(--t-m); }
.v2-inline-cta__btn, .v2-sticky-cta__btn, .v2-nm-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 var(--s5); border-radius: var(--radius); font: 700 var(--t-l)/1 var(--font-price); text-transform: uppercase; letter-spacing: .5px; text-decoration: none; transform: none !important; }
.v2-inline-cta__btn { background: #fff; color: var(--ac); }
.v2-sticky-cta__btn, .v2-nm-btn { background: linear-gradient(to bottom, var(--ac3) 0%, var(--ac2) 50%, var(--ac3) 100%); background-size: auto 200%; color: #fff; transition: background-position .4s; }
.v2-sticky-cta__btn:hover, .v2-nm-btn:hover { background-position: bottom center; }
.v2-sticky-cta { padding: var(--s2) var(--s4); background: var(--dark); }
.v2-sticky-cta__name { font: 700 var(--t-xl)/1 var(--font-cond); color: var(--ac3); }

/* the review text and FAQ: the same text style as the homepage */
.v2-review-body { font: 400 var(--t-b)/1.65 var(--font-main); color: var(--dark); max-width: 900px; }
.v2-review-body p { margin: 0 0 var(--s4); }
.v2-review-body h3 { font: 700 var(--t-l)/1.3 var(--font-main); color: var(--black); margin: var(--s5) 0 var(--s2); }
.review__interlink { font-size: var(--t-m); margin-top: var(--s4); }
.v2-faq-item { margin-bottom: var(--s2); }
.v2-reviewer__name { font: 700 var(--t-l) var(--font-main); }
.v2-reviewer__bio { font-size: var(--t-m); }
.related-rows { padding-top: 0; }

@media (max-width: 640px) {
  .review--v2 .review__inner > * { margin-bottom: var(--s6); }
  .v2-verdict-grid, .v2-proscons { grid-template-columns: 1fr; }
  .v2-verdict-safe, .v2-verdict-watch, .v2-pros, .v2-cons, .vb-score, .v2-facts-grid, .v2-reviewer { padding: var(--s4); }
  .v2-flow-steps { flex-direction: column; gap: var(--s2); }
  .v2-flow-step { display: grid; grid-template-columns: 32px 1fr; text-align: left; padding: var(--s3) var(--s4); column-gap: var(--s2); }
  .v2-flow-step__num { grid-row: span 2; font-size: var(--t-xl); margin: 0; }
  .v2-features-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  .v2-plans-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .v2-plan-card__price { font-size: 26px; }
  .v2-inline-cta { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .v2-review-body { font-size: var(--t-m); }
  .v2-sticky-cta__name { font-size: var(--t-b); }
}
.v2-billing-card { padding: var(--s5); border-radius: var(--radius) 0 var(--radius) 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.v2-billing-grid { background: none; box-shadow: none; padding: 0; }
.v2-billing-row, .v2-fact-row { font-size: var(--t-m); }
@media (max-width: 640px) { .v2-billing-card { padding: var(--s4); } }
.v2-nm .v2-section-label { border-bottom: 1px solid var(--ac); }

/* ── static pages: hub, guide, service pages on the live column ── */
.exposition { margin: 0; padding: var(--s6) 0; }
.article-content { font-size: var(--t-b); line-height: 1.7; }
.article-content h1 { font: 900 var(--t-h1)/1.15 var(--font-main); color: var(--black); margin: var(--s2) 0 var(--s4); }
.article-content .page-updated a { color: inherit; text-decoration: underline; }
.exposition + .rest-section { padding-top: 0; }

/* guide: byline, three sites under the H1, contents on the right */
.guide__by { font-size: var(--t-s); color: #6b7280; margin: 0 0 var(--s5); }
.guide__by a { color: var(--ac); }
.guide-top { max-width: 820px; background: #fff; border-radius: 12px 0 12px 0; box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: var(--s4) var(--s5); margin: 0 0 var(--s6); }
.guide-top__h { font: 700 var(--t-l)/1.3 var(--font-main); color: var(--black); margin: 0 0 var(--s2); }
.guide-top__row { display: grid; grid-template-columns: 40px 1fr 56px 130px 150px; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid #e5e7eb; }
.guide-top__n { font: 700 var(--t-b) var(--font-main); color: var(--ac); }
.guide-top__name { font: 700 var(--t-b)/1.3 var(--font-main); color: var(--black); }
.guide-top__score { font: 700 var(--t-m) var(--font-main); color: var(--ac); text-align: right; }
.guide-top__price { font: 700 24px/1 var(--font-price); color: var(--black); text-align: right; }
.guide-top__price small { display: block; font: 400 var(--t-xs)/1.3 var(--font-main); color: #6b7280; margin-top: 2px; }
.guide-top .thumbnail-btn { height: var(--btn-h); width: 150px; margin: 0; font-size: var(--t-b); }
.guide-top__more { display: inline-block; margin-top: var(--s3); font-weight: 700; color: var(--ac); text-decoration: underline; }
.guide__grid { display: grid; grid-template-columns: minmax(0, 820px) 280px; gap: var(--s6); align-items: start; }
.guide__body { max-width: none; }
.guide__rail { position: sticky; top: var(--s5); }
.guide__main .guide-top { max-width: none; }
.guide-toc { background: #fff; border-radius: 12px 0 12px 0; box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: var(--s4) var(--s5); }
.guide-toc__h { font: 700 var(--t-b)/1.3 var(--font-main); color: var(--black); margin: 0 0 var(--s2); }
.guide-toc ol { list-style: decimal; margin: 0 0 0 var(--s5); font-size: var(--t-s); line-height: 1.45; }
.guide-toc li { margin: 0 0 var(--s2); }
.guide-toc a { color: var(--ac); }
.guide-offer { max-width: 820px; }
@media (max-width: 1100px) {
  .guide__grid { grid-template-columns: 1fr; }
  .guide__rail { display: none; }
}
@media (max-width: 640px) {
  .article-content h1 { font-size: 30px; }
  .guide-top { padding: var(--s3) var(--s4); }
  .guide-top__row { grid-template-columns: 32px 1fr auto; grid-template-areas: "n name score" "n price btn"; row-gap: var(--s2); }
  .guide-top__n { grid-area: n; align-self: start; }
  .guide-top__name { grid-area: name; }
  .guide-top__score { grid-area: score; }
  .guide-top__price { grid-area: price; text-align: left; font-size: 22px; }
  .guide-top .thumbnail-btn { grid-area: btn; width: 130px; }
}