/* ── TrustsMatch design system v2 ────────────────────────────────────────────
   Tokens follow design-guide-v2. Legacy aliases (--accent, --bg, --card …) are
   kept pointing at the new palette so existing templates restyle themselves.  */
:root{
  --tm-bg:#FAF9F6;--tm-surface:#FFFFFF;--tm-ink:#15131C;--tm-muted:#625E73;
  --tm-brand:#6044ED;--tm-brand-hover:#4D32D1;--tm-brand-soft:#EEE9FF;
  --tm-lime:#C5F36B;--tm-line:#DEDAE6;
  --tm-green:#26724A;--tm-green-soft:#E9F3E9;--tm-blue:#3667C9;--tm-blue-soft:#EAF0FC;
  --tm-shadow-card:0 28px 60px -24px rgb(49 29 101 / 28%), 0 4px 12px rgb(49 29 101 / 4%);
  --tm-shadow-search:0 12px 32px -16px rgb(49 29 101 / 22%);
  --tm-r-sm:12px;--tm-r-search:16px;--tm-r-lg:24px;--tm-r-pill:999px;
  /* Page-background layer. The artwork is rendered on #FDFCFB, so the hero's
     opaque backing uses the same value — otherwise a faint seam shows where the
     hero meets the page. */
  --tm-page-base:#FDFCFB;--tm-background-opacity:1;
  /* legacy aliases */
  --ink:var(--tm-ink);--muted:var(--tm-muted);--line:var(--tm-line);--bg:var(--tm-bg);
  --card:var(--tm-surface);--accent:var(--tm-brand);--accent-soft:var(--tm-brand-soft);
  --star:var(--tm-brand);--green:var(--tm-green);--red:#C2334D
}
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- archived products ---- */
/* Muted, not hidden. The page still has to be readable — someone landed here on
   purpose — but nothing about it should read as a live recommendation. */
.pcard--archived{background:transparent;border-style:dashed}
.pcard--archived .plogo,.pcard--archived .catimg{filter:grayscale(1);opacity:.55}
.pcard--archived .pname{color:var(--tm-muted)}
.badge--archived{background:var(--tm-line);color:var(--tm-muted)}
.price--archived{color:var(--tm-muted);font-weight:600}
.tomb{border:1px solid var(--tm-line);border-left:3px solid var(--tm-muted);
  background:var(--tm-surface);border-radius:var(--tm-r-md);padding:18px 20px;margin:0 0 20px}
.tomb-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;margin-bottom:8px}
.tomb-dot{width:9px;height:9px;border-radius:50%;background:var(--tm-muted);flex:none}
.tomb-date{font-weight:500;color:var(--tm-muted);font-size:13px}
.tomb p{margin:0 0 10px;font-size:14.5px;line-height:1.65}
.tomb p:last-child{margin-bottom:0}
.tomb-next{padding:10px 12px;background:var(--tm-brand-soft);border-radius:var(--tm-r-sm)}
.tomb-why{font-size:12.5px;color:var(--tm-muted)}
.lineage{font-size:13.5px;color:var(--tm-muted);margin:0 0 18px;padding-left:12px;
  border-left:2px solid var(--tm-line)}
.rform--closed{background:var(--tm-page-base)}
/* Форма отзыва стоит под списком, а списки бывают по 30 карточек — до неё
   просто не долистывают. Поэтому два входа сверху: кнопка в шапке и ссылка
   в строке рейтинга. Сама форма выделена рамкой, чтобы якорь было видно,
   куда он привёл. */
.rform--write{border:2px solid var(--tm-brand-soft);background:var(--tm-surface)}
.rform--write:target{border-color:var(--tm-brand)}
.rline-add{font-size:13.5px;font-weight:700;color:var(--tm-brand);margin-left:4px;white-space:nowrap}
.rline-add:hover{text-decoration:underline}
@media print{.tomb{border-left-width:1px}}

/* ---- подсказки к функциям ---- */
/* Один общий элемент на странице, position:fixed — иначе .cmp-scroll обрезал бы
   пузырёк сверху, ровно там, где он и нужен. */
.tipbox{position:fixed;z-index:80;max-width:300px;padding:10px 13px;
  background:var(--tm-ink);color:#fff;border-radius:10px;font-size:13px;line-height:1.5;
  box-shadow:0 8px 24px rgba(20,16,50,.24);pointer-events:none}
.tipbox::after{content:"";position:absolute;left:50%;margin-left:-6px;border:6px solid transparent}
.tipbox:not(.below)::after{top:100%;border-top-color:var(--tm-ink)}
.tipbox.below::after{bottom:100%;border-bottom-color:var(--tm-ink)}
@media(prefers-reduced-motion:no-preference){
  .tipbox{animation:tip-in 110ms ease-out}
  @keyframes tip-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}
@media print{.tipbox{display:none}}

/* ---- compare picker & wide tables ---- */
/* Five columns do not fit a phone, so both tables scroll sideways instead of
   squeezing the checkmark columns into nothing. The label column stays put. */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-scroll > table{min-width:640px}
.cmp-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cmp-count{font-size:13.5px;color:var(--tm-muted)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* На пределе карточки гаснут, но остаются кликабельными: клик по шестой
   объясняет причину, а не молча ничего не делает. */
.pcard:has(.csel:not(:checked)){transition:opacity 140ms ease}
.cmp-full .pcard:has(.csel:not(:checked)){opacity:.55}

.tmdialog{border:0;border-radius:var(--tm-r-lg);padding:26px 28px;max-width:440px;width:calc(100% - 32px);
  box-shadow:0 18px 50px rgba(20,16,50,.22);color:var(--tm-ink);background:var(--tm-surface)}
.tmdialog::backdrop{background:rgba(20,16,50,.42);backdrop-filter:blur(2px)}
.tmdialog h3{font-size:18px;font-weight:800;margin:0 0 10px}
.tmdialog p{font-size:14.5px;line-height:1.6;margin:0 0 12px;color:var(--tm-muted)}
.tmdialog-hint{padding:10px 12px;background:var(--tm-brand-soft);border-radius:var(--tm-r-sm);
  color:var(--tm-ink)}
.tmdialog form{margin:4px 0 0;display:flex;justify-content:flex-end}
@media(prefers-reduced-motion:no-preference){
  .tmdialog[open]{animation:tmdialog-in 140ms ease-out}
  @keyframes tmdialog-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
}

/* ---- feature comparison on /compare ---- */
.cmpfeat{margin-top:34px}
.cmpfeat h3{font-size:20px;font-weight:800;margin:0 0 8px}
.cmpfeat-lede{color:var(--tm-muted);font-size:14.5px;line-height:1.6;margin:0 0 18px;max-width:70ch}
.cmpfeat-lede b{color:var(--tm-ink)}
.uniq-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.uniq{border:1px solid var(--tm-line);border-radius:var(--tm-r-md);padding:14px 16px;background:var(--tm-surface)}
.uniq-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tm-brand);margin-bottom:8px}
.uniq ul{margin:0;padding-left:18px}
.uniq li{font-size:14px;line-height:1.55;margin-bottom:3px}
.cmpfeat-toolbar{margin-bottom:12px}
.cmpfeat-toolbar label{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;
  padding:7px 12px;border:1px solid var(--tm-line);border-radius:999px;background:var(--tm-surface)}
.cmpfeat-toolbar input{cursor:pointer}
.cmp--feat th span[data-tip]{cursor:help;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--tm-line);text-underline-offset:3px}
.cmp--feat th span[data-tip]:focus-visible,.fname:focus-visible{outline:2px solid var(--tm-brand);
  outline-offset:2px;border-radius:3px}
.cmp--feat .fgrouprow th{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tm-muted);background:var(--tm-page-base);padding-top:14px}
.cmp--feat .fgrouprow span{margin-left:10px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--tm-muted);opacity:.85}
.cmp--feat .fgrouprow span::before{content:"· "}
.cmp--feat td{text-align:center;font-weight:700;white-space:nowrap}
.cmp--feat th,.cmp--feat td{padding-top:9px;padding-bottom:9px}
.cmp--feat thead td{font-weight:700;color:var(--ink);text-align:center}
.cmp--feat td.fy{color:#2f6d23}
.cmp--feat td.fn{color:var(--tm-line-strong,var(--tm-muted));font-weight:400}
.cmp--feat .row-diff th{font-weight:600}
.cmp--feat .row-same th,.cmp--feat .row-same td{opacity:.62}
.cmp--feat.diffs-only .row-same{display:none}
@media print{.cmpfeat-toolbar{display:none}.cmp--feat .row-same{opacity:1}}

/* ---- feature matrix on the product page ---- */
.feats h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.feat-count{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--tm-muted);
  background:var(--tm-brand-soft);border-radius:999px;padding:3px 9px}
.fgroup{margin-top:18px}
.fgroup:first-of-type{margin-top:14px}
.fgroup-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tm-muted);padding-bottom:7px;border-bottom:1px solid var(--tm-line)}
.fgroup-h span{font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-weight:600}
.flist{list-style:none;margin:9px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 20px}
.flist li{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:14.5px;line-height:1.45}
.fmark{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1}
.flist li.yes .fmark{background:var(--tm-lime);color:#22331a}
.flist li.no .fmark{background:var(--tm-line);color:var(--tm-muted)}
.flist li.no .fname{color:var(--tm-muted)}
/* Partly supported reads as a weaker yes, not as a no: amber, full-strength text. */
.flist li.part .fmark{background:#F4A340;color:#3a2200}
/* Not checked is visually the quietest state on purpose — it is our gap, and it
   must never look like a verdict on the vendor. Dashed ring, no fill. */
.flist li.unk .fmark{background:transparent;border:1.5px dashed var(--tm-line-strong,#c9c6bd);color:var(--tm-muted)}
.flist li.unk .fname{color:var(--tm-muted)}
.cmp--feat td.fp{color:#8a5a12}
.cmp--feat td.fu{color:var(--tm-muted);font-weight:400}
.fname{cursor:help;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--tm-line);text-underline-offset:3px}
.feat-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--tm-line);
  font-size:12.5px;line-height:1.6;color:var(--tm-muted)}
@media(max-width:560px){.flist{grid-template-columns:1fr}}
@media print{.fname{text-decoration:none}}
body{font-family:Inter,Arial,sans-serif;background:var(--tm-page-base);color:var(--tm-ink);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;isolation:isolate}
/* ── Page background ──────────────────────────────────────────────────────────
   Faint lavender glass rings in the corners, light in the middle where the text
   sits. One fixed layer sized to the viewport: it does not tile, does not stretch
   down the whole document, and does not move while scrolling. Cards and chrome
   keep their opaque fills and sit on top of it. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--tm-page-base) url("/bg/desktop.webp") center/cover no-repeat;
  opacity:var(--tm-background-opacity)}
/* Dense reading and comparison pages get the quieter setting automatically. */
body:has(.article),body:has(table.cmp){--tm-background-opacity:.55}
@media(max-width:767px){body::before{background-image:url("/bg/mobile.webp")}}
@media print{body{background:#fff}body::before{display:none}}
/* ── Сворачиваемый текстовый блок страницы ───────────────────────────────────
   Один компонент на все страницы: /match, /categories, /compare, /daily.

   ПОЧЕМУ <details>, А НЕ JS-АККОРДЕОН. Текст внутри <details> лежит в ответе
   сервера целиком — свёрнутое состояние это вопрос отрисовки, а не состава
   документа. Робот получает его так же, как получил бы развёрнутым. Ломает
   индексацию ровно обратное: текст, которого в HTML нет и который дорисовывает
   скрипт по клику. Здесь скрипта нет вообще, и это же даёт бесплатно
   клавиатуру, Ctrl+F по странице и отсутствие прыжков вёрстки.

   Первая секция открыта. Страница, где вся проза спрятана за «показать ещё»,
   для человека выглядит такой же пустой, какой была до текста. */
.seo{max-width:760px;margin:48px auto 0;font-size:15.5px;line-height:1.65;color:var(--tm-ink)}
.seo h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
.seo h3{font-size:15.5px;font-weight:700;margin:0}
.seo p{margin:0 0 12px}
.seo p:last-child{margin-bottom:0}
.seo ul{margin:0 0 12px;padding-left:22px}
.seo ul:last-child{margin-bottom:0}
.seo li{margin-bottom:7px}
.seo a{text-decoration:underline}
.seo-lede{font-size:17px;line-height:1.6;margin-bottom:22px;color:var(--tm-ink)}
.seo-lede b{font-weight:700}
.seo-d{border:1px solid var(--tm-line);border-radius:var(--tm-r-sm);background:var(--tm-surface);
  margin-bottom:10px;overflow:hidden}
.seo-d>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;gap:12px;
  user-select:none}
.seo-d>summary::-webkit-details-marker{display:none}
.seo-d>summary:hover{background:var(--tm-brand-soft)}
.seo-d>summary:focus-visible{outline:3px solid var(--tm-brand);outline-offset:-3px}
.seo-chev{margin-left:auto;flex:none;width:18px;height:18px;color:var(--tm-muted);
  transition:transform 180ms ease}
.seo-d[open]>summary .seo-chev{transform:rotate(180deg)}
.seo-d[open]>summary{border-bottom:1px solid var(--tm-line)}
.seo-body{padding:16px 18px 18px;color:var(--tm-muted)}
.seo-body b,.seo-body strong{color:var(--tm-ink)}
.seo-faq .seo-d>summary{padding:13px 18px}
.seo-links{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.seo-links li{margin:0}
.seo-links a{display:block;padding:9px 12px;border:1px solid var(--tm-line);
  border-radius:var(--tm-r-sm);background:var(--tm-bg);font-size:14px;font-weight:600;
  text-decoration:none;color:var(--tm-ink)}
.seo-links a:hover{border-color:var(--tm-brand);color:var(--tm-brand)}
.seo-sub{margin:26px 0 10px;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tm-muted)}
@media(prefers-reduced-motion:reduce){.seo-chev{transition:none}}
@media(max-width:620px){.seo{margin-top:34px;font-size:15px}.seo h2{font-size:19px}
  .seo-lede{font-size:16px}.seo-links{grid-template-columns:1fr}}


/* ── Product page: verdict, checked line, screenshots ───────────────────────── */
.pcheck{margin-top:8px;font-size:13px;color:var(--tm-muted)}
.pcheck a,.hhow{color:var(--tm-brand);font-weight:600}
.hhow{float:right;font-size:12.5px;font-weight:600}
.escore{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.verdict .vh{font-size:17px;font-weight:800;margin:0 0 12px}
.verdict .vgrid{gap:6px 24px}
.verdict h3{font-size:14px;margin:0 0 6px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shots figure{margin:0}.shots img{width:100%;border:1px solid var(--tm-line);border-radius:8px;display:block}
.shots figcaption{font-size:12.5px;color:var(--tm-muted);margin-top:5px}


/* ── /how-we-score ─────────────────────────────────────────────────────────── */
.howscore h3{font-size:17px;margin:22px auto 4px}
.howscore table.scale{width:100%;border-collapse:collapse;font-size:14px;margin:6px auto 4px}
.howscore table.scale th{width:56px;text-align:left;color:var(--tm-muted);font-weight:700;padding:5px 0;vertical-align:top}
.howscore table.scale td{padding:5px 0;border-bottom:1px solid var(--tm-line)}
.howscore .editors{display:grid;gap:12px;margin-top:10px}
.howscore .editor{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--tm-line);border-radius:10px}
.howscore .editor .avatar{flex:none}
.howscore .editor .role{font-size:13px;color:var(--tm-muted)}
.howscore .editor p{margin:6px 0 0;font-size:14px}

/* ── Compare verdict ───────────────────────────────────────────────────────── */
.cmpv{max-width:860px;margin:0 0 22px;padding:20px 22px;border:1px solid var(--tm-line);border-radius:var(--tm-r-sm);background:var(--tm-surface);font-size:15.5px;line-height:1.65}
.cmpv h2{font-size:19px;font-weight:800;margin:0 0 8px}
.cmpv p{margin:0 0 10px}
.cmpv-pick{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-top:6px}
.cmpv-pick h3{font-size:14.5px;margin:0 0 4px}
.cmpv-pick ul{margin:0;padding-left:20px;font-size:14.5px}.cmpv-pick li{margin-bottom:4px}
.cmpv-meta{font-size:13px;color:var(--tm-muted);margin:10px 0 0!important}
@media(max-width:640px){.cmpv-pick{grid-template-columns:1fr}.cmpv{padding:16px}}

/* ── Most compared ─────────────────────────────────────────────────────────── */
.mc{margin:0 0 28px;padding:20px 22px;border:1px solid var(--tm-line);border-radius:var(--tm-r-sm);background:var(--tm-surface)}
.mc h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
.mc-sub{margin:4px 0 14px;color:var(--tm-muted);font-size:14px}
.mc-cols{display:grid;grid-template-columns:3fr 2fr;gap:8px 28px}
.mc-list{margin:0;padding:0;list-style:none;counter-reset:mc}
.mc-list li{counter-increment:mc;display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--tm-line);font-size:14.5px}
.mc-list li:first-child{border-top:0}
.mc-list li::before{content:counter(mc);flex:none;width:22px;color:var(--tm-muted);font-weight:700;font-variant-numeric:tabular-nums}
.mc-list a{display:flex;align-items:center;gap:8px;min-width:0;color:var(--tm-ink);text-decoration:none}
.mc-list a:hover b{color:var(--tm-brand)}
.mc-list .vs{color:var(--tm-muted);font-size:12px}
.mc-n{margin-left:auto;flex:none;color:var(--tm-muted);font-size:13px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.mc-cols{grid-template-columns:1fr}.mc{padding:16px}}

/* ── Live background (home page only) ─────────────────────────────────────────
   The same fixed viewport layer, but painted by a WebGL fluid simulation
   (/fluid.js) instead of the webp. It stays display:none until the script has a
   context and a first frame; until then — and on phones, with reduced motion, or
   on anything without WebGL2 — the artwork above is what shows. The hero keeps
   an opaque backing in the static case, so that is dropped alongside it. */
.tm-fluid{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none}
.tm-fluid canvas{display:block;width:100%;height:100%}
body.tm-fluid-on::before{display:none}
body.tm-fluid-on .herobed{background:transparent}
@media print{.tm-fluid{display:none !important}}
@media(prefers-reduced-motion:reduce){.tm-fluid{display:none !important}}
a{color:var(--tm-brand);text-decoration:none;transition:color 160ms ease}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--tm-brand);outline-offset:5px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.tm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tm-skip{position:absolute;left:-9999px;top:0;background:var(--tm-brand);color:#fff;padding:12px 20px;border-radius:0 0 var(--tm-r-sm) 0;font-size:14px;font-weight:600;z-index:200}
.tm-skip:focus{left:0}
.wrap{max-width:1400px;margin:0 auto;padding:0 56px}
@media(max-width:1100px){.wrap{padding:0 32px}}
@media(max-width:420px){.wrap{padding:0 20px}}
/* Scoped to the page chrome on purpose: a pasted article may contain its own
   <header>/<footer>, and a bare element selector would make it sticky too. */
body > header{background:var(--tm-surface);border-bottom:1px solid var(--tm-line);position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;gap:10px 28px;min-height:96px;padding:14px 0;flex-wrap:wrap}
@media(max-width:800px){.hd{min-height:0;gap:10px 20px}.hd nav{order:4;flex:1 1 100%;gap:18px}}
@media(max-width:640px){.search{order:5;flex:1 1 100%;max-width:none}}
.logo{font-size:20px;font-weight:800;color:var(--tm-ink);letter-spacing:-.02em}.logo span{color:var(--tm-brand)}
.hd nav{display:flex;gap:26px;font-size:14px;font-weight:400}
.hd nav a{color:var(--tm-muted)}.hd nav a:hover{color:var(--tm-brand)}
.search{flex:1;max-width:420px;margin-left:auto}
.search input{width:100%;padding:11px 16px;border:1px solid var(--tm-line);border-radius:var(--tm-r-sm);font-size:14px;background:var(--tm-bg);font-family:inherit}
/* ── Hero (design kit v3) ─────────────────────────────────────────────────── */
/* Full-bleed opaque band behind the hero and its stats strip: the page
   background only begins below it. .hero itself sits inside .wrap (max 1400px),
   so painting the backing there would leave the rings showing in the gutters. */
.herobed{background:var(--tm-page-base)}
.hero{position:relative;display:grid;grid-template-columns:56% 44%;align-items:center;min-height:760px;padding:30px 0}
.hero .copy{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:15px;color:var(--tm-brand);font-size:14px;letter-spacing:2.2px;text-transform:uppercase;font-weight:600;margin:0 0 31px}
.eyebrow img{width:24px;height:24px}
.hero h1{font-size:clamp(48px,6.4vw,100px);line-height:1.01;letter-spacing:-.071em;font-weight:800;margin:0;color:#080809}
.title-line{display:block;white-space:nowrap}
.trust{position:relative;color:var(--tm-brand);display:inline-block}
.underline{position:absolute;bottom:-25px;left:0;width:98%;height:36px}
.hero .description{font-size:clamp(19px,1.88vw,29px);line-height:1.45;letter-spacing:-.035em;color:var(--tm-muted);margin:55px 0 45px;max-width:740px}
.hsearch{width:92%;display:flex;align-items:center;gap:20px;border:1px solid #D4CCE3;border-radius:14px;background:var(--tm-surface);box-shadow:0 16px 30px -13px #39255830;padding:0 0 0 28px;overflow:hidden}
.hsearch>img{width:30px;height:30px}
.hsearch input{min-width:0;width:100%;height:79px;border:0;outline:0;background:transparent;color:var(--tm-ink);font-size:20px;text-overflow:ellipsis;font-family:inherit}
.hsearch input::placeholder{color:#827695;opacity:1}
.hsearch:focus-within{outline:3px solid var(--tm-brand-soft);border-color:var(--tm-brand)}
.hsearch button{width:88px;align-self:stretch;flex-shrink:0;border:0;border-radius:12px;background:linear-gradient(125deg,#743EFF,#5E29F3);display:grid;place-items:center;cursor:pointer}
.hsearch button:hover{background:var(--tm-brand-hover)}
.hsearch button img{width:34px;height:34px}
.hsearch button:focus-visible{outline-offset:-6px;outline-color:#fff}
.explore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:92%;margin-top:34px;font-size:16px;color:var(--tm-muted)}
.explore .chip{padding:8px 13px;border:1px solid var(--tm-line);border-radius:14px;background:#FFFFFF40;font-size:15px;white-space:nowrap;font-weight:400;color:var(--tm-ink)}
.explore .chip:hover{background:var(--tm-brand-soft);border-color:var(--tm-line);color:var(--tm-ink)}
.hcompare{display:flex;align-items:center;gap:10px;margin-left:auto;font-weight:600;white-space:nowrap;color:var(--tm-ink)}
.hcompare:hover{color:var(--tm-brand)}
.hcompare span{border-bottom:1px solid #A49BB7;padding-bottom:3px}
.hcompare img{width:18px;height:18px}
.art{position:relative;width:104%;margin-left:-4%;aspect-ratio:700/740;pointer-events:none;isolation:isolate}
.art-piece{position:absolute;max-width:none;display:block}
.has-shadow{filter:drop-shadow(0 24px 19px #3524542B)}
/* Proof strip — figures come from live catalog data, never from the mockup */
.proof{border-top:1px solid var(--tm-line);padding:30px 0 42px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;align-items:center;gap:24px}
.proof-intro{color:var(--tm-muted);font-size:24px;letter-spacing:-1px;margin:0}
.metric{text-align:center;border-left:1px solid var(--tm-line)}
.metric strong{display:flex;align-items:center;justify-content:center;gap:12px;font-size:36px;font-weight:600;line-height:1.1}
.metric strong img{width:28px;height:28px}
.metric span{display:block;font-size:18px;color:var(--tm-muted);letter-spacing:.3px;margin-top:8px}
@media(max-width:1400px){
  .hero{min-height:650px;padding:25px 0}.eyebrow{font-size:11px;gap:12px;margin-bottom:27px}
  .hero h1{font-size:6.35vw}.hero .description{margin:44px 0 35px}
  .hsearch{gap:14px;padding-left:20px}.hsearch input{height:65px;font-size:16px}
  .hsearch button{width:68px}.hsearch>img{width:25px}.hsearch button img{width:29px}
  .explore{font-size:13px;gap:8px;margin-top:26px}.explore .chip{font-size:12px;padding:8px 10px}
  .hcompare{font-size:13px}.proof-intro{font-size:20px}.metric strong{font-size:30px}.metric span{font-size:15px}.proof{gap:16px}
}
@media(max-width:950px){
  .hero{min-height:600px}.explore{width:100%}.hcompare{margin-left:0}.explore .chip{font-size:11px}
  .eyebrow{font-size:9px;letter-spacing:1.4px}.hero .description{font-size:18px}
  .hsearch input{font-size:14px}.hsearch{gap:10px}.proof-intro{font-size:17px}
}
@media(max-width:760px){
  .hero{grid-template-columns:1fr;gap:25px;padding:48px 0 28px;min-height:0}
  .hero .copy{max-width:600px}
  .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:24px}.eyebrow img{width:20px;height:20px}
  .hero h1{font-size:clamp(42px,8.7vw,64px);letter-spacing:-.06em;line-height:1.04}
  .title-line{white-space:normal;display:inline}
  .hero .description{font-size:19px;line-height:1.5;margin:37px 0 28px}
  .underline{bottom:-15px;height:22px}
  .hsearch{width:100%;padding-left:17px}.hsearch input{height:62px;font-size:15px}
  .hsearch button{width:62px}.hsearch>img{width:24px}
  .explore{gap:9px;font-size:13px;margin-top:22px}.explore .chip{font-size:12px;padding:8px 10px}
  .hcompare{margin-left:0;font-size:13px}
  .art{width:100%;max-width:550px;margin:0 auto}
  .proof{grid-template-columns:repeat(3,1fr);gap:24px 10px;padding:26px 0 34px}
  .proof-intro{grid-column:1/-1;font-size:21px}
  .metric{border-left:0}.metric strong{font-size:28px;gap:7px}.metric span{font-size:13px}.metric strong img{width:22px;height:22px}
}
@media(max-width:360px){
  .hero h1{font-size:40px}.eyebrow{font-size:8px}.hero .description{font-size:17px}
  .hsearch input{font-size:12px}.hsearch button{width:52px}.hsearch{gap:9px;padding-left:12px}
  .metric strong{font-size:24px}.metric span{font-size:11px}
}
.vsrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.vscard{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:var(--tm-r-lg);padding:20px;transition:box-shadow 160ms ease;text-align:center;font-size:14px;color:var(--ink)}
.vscard .vs{color:var(--muted);font-size:12px;padding:0 6px}
.vscard .go{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--accent)}
.trustrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.trustrow div{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#334155;line-height:1.5}
.trustrow b{font-size:18px}
.vcta{background:var(--tm-ink);border-radius:var(--tm-r-lg);padding:22px 26px;display:flex;align-items:center;gap:16px;color:#fff;flex-wrap:wrap;margin:10px 0 40px}
.vcta .sub{color:#94a3b8;font-size:13px}
.vcta a{margin-left:auto;background:var(--tm-brand);color:#fff;padding:12px 22px;border-radius:var(--tm-r-sm);font-weight:600;font-size:14px}
.section{padding:48px 0}.section h2{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.04em;margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:var(--tm-r-pill);padding:9px 18px;font-size:14px;font-weight:600;color:var(--tm-muted);display:inline-block;transition:background 160ms ease,color 160ms ease,border-color 160ms ease}
.chip:hover,.chip.on{border-color:var(--tm-brand-soft);color:var(--tm-brand);background:var(--tm-brand-soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pcard{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:var(--tm-r-lg);padding:24px;display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.pcard{transition:box-shadow 160ms ease,border-color 160ms ease}.pcard:hover{box-shadow:var(--tm-shadow-card);border-color:var(--tm-brand-soft)}
.ptop{display:flex;gap:12px;align-items:flex-start}
.plogo{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff;flex-shrink:0;overflow:hidden}
.plogo-img{background:#fff !important;border:1px solid var(--line)}
.plogo-img img{width:72%;height:72%;object-fit:contain;display:block}
.pname{font-size:16px;font-weight:700;color:var(--ink)}.ptag{font-size:13px;color:var(--muted);margin-top:2px}
/* Category illustration. The source art is 4:3 and must not be cropped (the kit's
   README is explicit about it), so the box keeps that ratio and uses contain.
   width/height are on the tag too, so the card holds its height before the image
   arrives and nothing shifts on load (CLS). */
.catimg{width:128px;height:96px;border-radius:14px;display:block;margin:-2px 0 8px;object-fit:contain}
/* Category page header: illustration beside the title and description. */
.cathead{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.cathead .catimg{flex-shrink:0;margin:0;width:160px;height:120px}
.cathead h1{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em}
.cathead p{margin-top:6px;color:var(--tm-muted);max-width:760px;font-size:15px}
.cathead--plain{margin-bottom:16px}
@media(max-width:560px){.cathead{gap:14px}.cathead .catimg{width:96px;height:72px}}
.badge{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.badge.gold{background:var(--tm-lime);color:var(--tm-ink)}.badge.green{background:var(--tm-green-soft);color:var(--tm-green)}
.stars{color:var(--star);letter-spacing:1px;font-size:14px}
.rline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.rline b{color:var(--ink);font-size:15px}
.pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid var(--bg);font-size:13px}
.price{font-weight:700;color:var(--ink)}.price small{font-weight:500;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.toolbar select,.toolbar input{padding:10px 14px;border:1px solid var(--tm-line);border-radius:var(--tm-r-sm);font-size:14px;background:var(--tm-surface);font-family:inherit}
.count{font-size:13px;color:var(--muted);margin-left:auto}
/* Полоса отзыва на главной.
   Была белой карточкой среди белых панелей и терялась — яркости блика тут не
   хватило бы, дело в фоне. Теперь у неё фирменная лавандовая подложка и
   заметная рамка, то есть она отличается от соседей ещё до всякой анимации.

   Анимаций две, и обе что-то сообщают. Блик проходит по полосе и притягивает
   взгляд. Звёзды в покое наливаются волной и гаснут — это прямая подсказка
   «сюда можно нажать»; подсветка идёт бледно-сиреневым, а не фирменным
   фиолетовым, чтобы её нельзя было принять за уже выставленную оценку. Как
   только человек коснулся блока, подсказка выключается навсегда: дальше
   звёзды показывают только его выбор. Всё это под prefers-reduced-motion. */
.rstrip{margin:22px 0 6px}
.rstrip-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(104deg,var(--tm-brand-soft) 0%,#FBFAFF 46%,var(--tm-brand-soft) 100%);
  border:1.5px solid #CFC4FF;border-radius:var(--tm-r-lg);
  padding:20px 24px;position:relative;overflow:hidden;
  box-shadow:0 10px 30px -18px rgb(96 68 237 / 38%)}
.rstrip-in::before{content:"";position:absolute;top:0;bottom:0;left:0;width:46%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgb(255 255 255 / 92%) 45%,rgb(197 243 107 / 45%) 60%,transparent);
  opacity:0;transform:translateX(-120%)}
.rstrip-ttl{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0;flex:none}
.rstrip-stars{display:flex;align-items:center;gap:4px;position:relative}
.rstar{width:36px;height:36px;padding:3px;border:0;background:none;cursor:pointer;line-height:0;
  border-radius:9px;transition:transform .14s ease}
.rstar svg{width:100%;height:100%;fill:#D5CCF0;transition:fill .14s ease}
.rstar:hover{transform:scale(1.16)}
.rstar.on svg{fill:var(--tm-brand)}
.rstar:focus-visible{outline:2px solid var(--tm-brand);outline-offset:2px}
.rstrip-lbl{margin-left:10px;font-size:15px;font-weight:700;color:var(--tm-ink);white-space:nowrap}
.rstrip-go{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.rstrip-go[hidden]{display:none}
.rstrip-go input{width:210px;padding:11px 14px;border:1.5px solid #CFC4FF;
  border-radius:var(--tm-r-sm);font-size:14px;font-family:inherit;background:var(--tm-surface)}
.rstrip-go input[aria-invalid=true]{border-color:var(--red)}
.rstrip-note{flex-basis:100%;margin:0;font-size:13px;color:var(--tm-muted);line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}
.rstrip-note.on{max-height:60px;opacity:1}
@media(prefers-reduced-motion:no-preference){
  .rstrip-in::before{animation:rshine 5s cubic-bezier(.4,0,.2,1) 1s infinite}
  @keyframes rshine{0%,58%{opacity:0;transform:translateX(-120%)}
    62%{opacity:1}92%,100%{opacity:0;transform:translateX(320%)}}
  /* Волна-подсказка: звёзды наливаются по очереди, потом всё гаснет.
     .live снимает её после первого касания. */
  .rstrip-stars:not(.live) .rstar svg{animation:rhint 5s ease-in-out infinite}
  .rstrip-stars:not(.live) .rstar:nth-child(2) svg{animation-delay:.1s}
  .rstrip-stars:not(.live) .rstar:nth-child(3) svg{animation-delay:.2s}
  .rstrip-stars:not(.live) .rstar:nth-child(4) svg{animation-delay:.3s}
  .rstrip-stars:not(.live) .rstar:nth-child(5) svg{animation-delay:.4s}
  @keyframes rhint{0%,12%{fill:#D5CCF0}22%,42%{fill:#A996F0}62%,100%{fill:#D5CCF0}}
  .rstrip-go{animation:rslide .28s ease}
  @keyframes rslide{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}
@media(max-width:820px){
  .rstrip-in{gap:12px;padding:18px}.rstrip-ttl{flex-basis:100%}
  .rstrip-go{margin-left:0;flex-basis:100%}.rstrip-go input{flex:1;width:auto;min-width:0}
}
.crumbs{font-size:13px;color:var(--muted);margin:20px 0 14px}
.phead{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:var(--tm-r-lg);padding:32px;display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.phead .plogo{width:64px;height:64px;font-size:24px;border-radius:14px}
.phead h1{font-size:26px;font-weight:800}.phead .ptag{font-size:15px}
.phead .actions{margin-left:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.btn{padding:12px 22px;border-radius:var(--tm-r-sm);font-size:14px;font-weight:600;border:1px solid var(--tm-line);background:var(--tm-surface);color:var(--tm-ink);display:inline-block;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}
.btn:hover{background:var(--tm-brand-soft);border-color:var(--tm-brand-soft);color:var(--tm-brand)}
.btn.primary{background:var(--tm-brand);border-color:var(--tm-brand);color:#fff}
.btn.primary:hover{background:var(--tm-brand-hover);border-color:var(--tm-brand-hover);color:#fff}
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin:16px 0 40px;align-items:start}
@media(max-width:840px){.cols{grid-template-columns:1fr}}
.panel{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:var(--tm-r-lg);padding:26px}
.panel h3{font-size:16px;font-weight:800;margin-bottom:14px}
.crit{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.crit .lbl{width:130px;color:var(--muted)}.bar{flex:1;height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}.crit .val{width:30px;text-align:right;font-weight:700}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:560px){.pc{grid-template-columns:1fr}}
.pc ul{list-style:none;font-size:14px}.pc li{padding:5px 0 5px 22px;position:relative}
.pc .pros li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.pc .cons li:before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:700}
.kv{font-size:14px}.kv div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bg)}
.kv span:first-child{color:var(--muted)}.kv span:last-child{font-weight:600;text-align:right}
.review{border-bottom:1px solid var(--bg);padding:16px 0}.review:last-child{border-bottom:none}
.rhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.rname{font-weight:700;font-size:14px}.rmeta{font-size:12px;color:var(--muted)}
.unrated{font-size:13px;font-weight:600;color:var(--tm-muted);background:var(--tm-brand-soft);padding:3px 10px;border-radius:var(--tm-r-pill)}
.verified{font-size:11px;font-weight:700;color:var(--tm-green);background:var(--tm-green-soft);padding:2px 8px;border-radius:99px}
.rtitle{font-weight:700;font-size:14px;margin:4px 0 2px}.rbody{font-size:14px;color:#334155}
.rprocon{font-size:13px;margin-top:6px;color:var(--muted)}.rprocon b.g{color:var(--green)}.rprocon b.r{color:var(--red)}
.rform{margin-top:14px;background:var(--bg);border-radius:12px;padding:16px}
.rform input,.rform textarea,.rform select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;margin-bottom:10px;background:#fff}
.flash{background:#d1fae5;color:#047857;font-weight:600;font-size:14px;border-radius:10px;padding:12px 16px;margin:16px 0}
.flash.warn{background:#fef3c7;color:#92400e}
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--bg)}
.pager a,.pager span.cur,.pager span.dots{min-width:34px;text-align:center;padding:7px 10px;border-radius:8px;font-size:13px;font-weight:600}
.pager a{border:1px solid var(--line);background:#fff;color:#334155}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager span.cur{background:var(--accent);color:#fff}
.pager span.dots{color:var(--muted)}
.pager .pinfo{margin-left:auto;font-size:12px;color:var(--muted)}
table.cmp{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line);font-size:14px}
col.cmp-label{width:16%}
table.cmp td{overflow-wrap:anywhere}
table.cmp th,table.cmp td{padding:13px 16px;border-bottom:1px solid var(--bg);text-align:left;vertical-align:top}
table.cmp th{background:var(--bg);font-size:13px;color:var(--muted);font-weight:600}
.winner{color:var(--green);font-weight:700}
/* ── Blog index (ported from the approved standalone mockup) ─────────────────
   Everything is scoped under .blogpage: the mockup uses generic class names
   (.card, .cover, .category, .toolbar) and .toolbar already exists on the
   catalog page. The mockup's own palette variables are mapped onto the site
   tokens so the page stays inside the design system. */
.blogpage{--paper:var(--tm-page-base);--ink:var(--tm-ink);--muted:var(--tm-muted);--purple:var(--tm-brand);--hover:var(--tm-brand-hover);--lavender:var(--tm-brand-soft);--lime:var(--tm-lime);--border:var(--tm-line);--radius:18px}
.blogpage :focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.blogpage .arrow{width:22px;height:22px;flex-shrink:0}
.blogpage .intro{padding:28px 0 26px}
.blogpage .breadcrumb{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;margin-bottom:22px}
.blogpage .breadcrumb a:hover{text-decoration:underline}
.blogpage .breadcrumb span:first-of-type{color:#b4adc6}
.blogpage h1,.blogpage h2,.blogpage h3,.blogpage p{margin:0}
.blogpage h1{font-size:clamp(38px,4.5vw,60px);font-weight:750;line-height:1.07;letter-spacing:-2.4px;display:flex;align-items:center;gap:20px}
.blogpage h1 img{width:38px;height:38px}
.blogpage .intro>p{font-size:19px;line-height:1.55;color:var(--muted);margin-top:12px}
.blogpage .toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff;margin-bottom:28px}
.blogpage .filters{display:flex;gap:10px;min-width:0;overflow:auto;padding:3px}
.blogpage .filter{border:1px solid var(--border);background:white;border-radius:40px;padding:12px 19px;white-space:nowrap;font-size:14px;transition:background .16s,color .16s}
.blogpage .filter:hover{background:var(--lavender)}
.blogpage .filter[aria-pressed=true]{background:var(--purple);border-color:var(--purple);color:white}
.blogpage .article-search{display:flex;gap:12px;align-items:center;min-width:230px;width:29%;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:10px;color:var(--muted)}
.blogpage .article-search:focus-within{outline:2px solid var(--purple);outline-offset:2px}
.blogpage .article-search svg{width:20px;height:20px;flex-shrink:0}
.blogpage .article-search input{width:100%;min-width:0;border:0;background:transparent;outline:none;color:var(--ink);font-size:14px}
.blogpage .article-search input::placeholder{color:var(--muted)}
.blogpage .featured-layout{display:grid;grid-template-columns:minmax(0,2.55fr) minmax(250px,1fr);gap:22px;margin-bottom:30px}
.blogpage .section-label{font-size:26px;letter-spacing:-.8px;line-height:1.25;margin-bottom:14px}
.blogpage .featured-card{display:grid;grid-template-columns:48% 52%;height:320px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .2s}
.blogpage .featured-card:hover{box-shadow:0 10px 30px #35216c0c}
.blogpage .feature-art{background:var(--lavender);height:100%;overflow:hidden}
.blogpage .feature-art img{width:100%;height:100%;object-fit:cover}
.blogpage .feature-copy{padding:28px 24px;display:flex;flex-direction:column;min-width:0}
.blogpage .category{font-size:11px;font-weight:700;letter-spacing:.7px;line-height:1.4;text-transform:uppercase;color:var(--purple)}
.blogpage .feature-copy h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-1px;line-height:1.13;margin:12px 0 14px}
.blogpage .feature-copy>p{color:var(--muted);line-height:1.5;font-size:16px}
.blogpage .article-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;font-size:13px;color:var(--muted)}
.blogpage .read-link{color:var(--purple);display:flex;gap:10px;align-items:center;font-weight:600;white-space:nowrap}
.blogpage .picks{height:320px;border:1px solid var(--border);border-radius:var(--radius);padding:4px 22px;background:#fff;display:flex;flex-direction:column}
.blogpage .pick{flex:1;display:flex;flex-direction:column;padding:20px 0;position:relative}
.blogpage .pick+.pick{border-top:1px solid var(--border)}
.blogpage .pick h3{font-size:20px;letter-spacing:-.5px;line-height:1.23;margin:10px 24px 12px 0}
.blogpage .pick:hover h3{color:var(--purple)}
.blogpage .pick time{font-size:13px;color:var(--muted);margin-top:auto}
.blogpage .pick>.arrow{position:absolute;right:0;top:50%;color:var(--purple)}
.blogpage .latest-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.blogpage .latest-heading h2{margin:0}
.blogpage .sort{font-size:14px;border:0;background:transparent;color:var(--muted);padding:10px 24px 10px 8px;cursor:pointer}
.blogpage .article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.blogpage .card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.blogpage .card:hover{transform:translateY(-3px);border-color:#c6b8f2;box-shadow:0 10px 28px #35216c0a}
.blogpage .card>a{display:flex;flex-direction:column;height:100%}
.blogpage .cover{height:185px;overflow:hidden;background:var(--lavender)}
.blogpage .cover img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s}
.blogpage .card:hover img{transform:scale(1.035)}
.blogpage .card-body{padding:18px 22px 19px;display:flex;flex-direction:column;flex:1}
.blogpage .card h3{font-size:23px;line-height:1.18;letter-spacing:-.7px;margin:10px 0}
.blogpage .card p{font-size:16px;line-height:1.45;color:var(--muted)}
.blogpage .card .article-meta{padding-top:22px}
.blogpage .card .arrow{color:var(--ink)}
.blogpage .pagination{display:flex;justify-content:center;gap:8px;align-items:center;margin:26px 0 44px}
.blogpage .pagination button{display:flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;gap:8px;padding:10px 13px;border:1px solid var(--border);border-radius:9px;background:white;font-size:14px}
.blogpage .pagination button:hover:not(:disabled){border-color:var(--purple);color:var(--purple)}
.blogpage .pagination button[aria-current=page]{background:var(--purple);color:white;border-color:var(--purple)}
.blogpage .pagination button:disabled{opacity:.4}
.blogpage .empty{text-align:center;padding:72px 20px;border:1px dashed var(--border);border-radius:var(--radius)}
.blogpage .empty h3{font-size:26px;margin-bottom:12px}
.blogpage .empty p{color:var(--muted);line-height:1.5}
.blogpage .reset{border:0;border-radius:30px;background:var(--purple);color:white;padding:12px 20px;margin-top:22px}
.blogpage .footer{border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 0 34px}
.blogpage .footer-brand{display:flex;gap:24px;align-items:center}
.blogpage .footer .logo img{width:34px;height:34px}
.blogpage .footer .wordmark{font-size:23px;letter-spacing:-1px}
.blogpage .tagline{border-left:1px solid var(--border);padding-left:24px;font-size:12px;color:var(--muted)}
.blogpage .footer nav{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.blogpage .footer a:hover{color:var(--purple)}
.blogpage [hidden]{display:none!important}
@media(min-width:1600px){.blogpage .cover{height:205px}}
@media(max-width:1100px){.blogpage .featured-layout{grid-template-columns:minmax(0,2fr) minmax(235px,1fr);gap:18px}.blogpage .featured-card,.blogpage .picks{height:340px}.blogpage .feature-copy{padding:22px 18px}.blogpage .feature-copy h3{font-size:25px}.blogpage .feature-copy>p{font-size:15px}.blogpage .read-link{font-size:0;gap:0}.blogpage .cover{height:170px}.blogpage .card-body{padding:17px}.blogpage .card h3{font-size:21px}.blogpage .toolbar{gap:14px}.blogpage .filter{padding:11px 14px}.blogpage .article-search{min-width:195px}.blogpage .tagline{display:none}}
@media(max-width:850px){.blogpage .featured-layout{grid-template-columns:1fr}.blogpage .featured-card{height:310px}.blogpage .picks{height:auto;flex-direction:row;gap:24px;padding:0 22px}.blogpage .pick+.pick{border-top:0;border-left:1px solid var(--border);padding-left:24px}.blogpage .pick{min-width:0}.blogpage .pick h3{font-size:18px}.blogpage .toolbar{align-items:stretch;flex-direction:column;gap:12px}.blogpage .article-search{width:100%}.blogpage .filters{width:100%}.blogpage .filter{flex:1}.blogpage .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blogpage .cover{height:190px}.blogpage .read-link{font-size:14px;gap:10px}.blogpage .footer{align-items:flex-start}.blogpage .footer nav{justify-content:flex-end;gap:16px}.blogpage .intro>p{font-size:17px}}
@media(max-width:540px){.blogpage .intro{padding:22px 0}.blogpage .breadcrumb{margin-bottom:18px}.blogpage h1{letter-spacing:-1.6px;gap:14px}.blogpage h1 img{width:28px;height:28px}.blogpage .intro>p{font-size:16px;max-width:340px}.blogpage .toolbar{padding:9px;margin-bottom:24px}.blogpage .filters{padding:3px;gap:8px}.blogpage .filter{padding:10px 15px;flex:none;min-height:42px}.blogpage .featured-card{display:flex;flex-direction:column;height:auto}.blogpage .feature-art{height:215px}.blogpage .feature-art img{object-position:center 53%}.blogpage .feature-copy{padding:22px}.blogpage .feature-copy h3{font-size:28px;max-width:330px}.blogpage .feature-copy>p{font-size:16px}.blogpage .article-meta{padding-top:24px}.blogpage .picks{flex-direction:column;gap:0;padding:0 20px}.blogpage .pick{padding:20px 0}.blogpage .pick+.pick{border-left:0;border-top:1px solid var(--border);padding-left:0}.blogpage .pick h3{font-size:19px;max-width:290px}.blogpage .section-label{font-size:24px}.blogpage .article-grid{grid-template-columns:1fr;gap:20px}.blogpage .cover{height:auto;aspect-ratio:1.9}.blogpage .card-body{padding:20px}.blogpage .card h3{font-size:24px}.blogpage .card p{font-size:16px}.blogpage .latest-heading{gap:8px}.blogpage .sort{max-width:140px;font-size:13px;padding-right:0}.blogpage .pagination{gap:6px;margin-bottom:32px}.blogpage .pagination button{min-width:39px;padding:9px 11px}.blogpage .footer{flex-direction:column;gap:20px;padding:24px 0}.blogpage .footer nav{justify-content:flex-start;gap:20px}.blogpage .footer-brand{width:100%}.blogpage .footer .tagline{display:block;margin-left:auto;font-size:10px;max-width:130px;padding-left:14px}.blogpage .footer .wordmark{font-size:22px}.blogpage .footer .logo{gap:6px}.blogpage .footer .logo img{width:30px;height:30px}}
.blogpage .cover-fallback{width:100%;height:100%;display:flex;align-items:flex-end;padding:16px;font-size:32px;color:#fff}
.blogpage #empty{border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:40px 24px;text-align:center;color:var(--muted)}
.blogpage #pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.blogpage #pagination button{border:1px solid var(--border);background:#fff;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.blogpage #pagination button[aria-current=page]{background:var(--purple);border-color:var(--purple);color:#fff}
.blogpage #pagination button:disabled{opacity:.45;cursor:default}
.blogpage .reset{border:1px solid var(--border);background:#fff;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;margin-top:14px}
/* Article: wide 880px card so images and custom HTML blocks have room, with the
   running text held to a 700px measure (~75 characters per line at 17px) — the
   standard editorial pattern: narrow text column, full-width media. */
.article{background:var(--tm-surface);border:1px solid var(--tm-line);border-radius:var(--tm-r-lg);padding:44px 48px;max-width:880px;margin:0 auto 40px}
.article > *{max-width:700px;margin-left:auto;margin-right:auto}
.article h1{font-size:34px;line-height:1.25;margin:10px auto 8px}
.article p{margin:18px auto;font-size:17px;color:#334155;line-height:1.75}
.article h2{font-size:25px;margin:32px auto 6px}.article h3{font-size:20px;margin:24px auto 4px}
.article ul{padding-left:24px;margin:16px auto;color:#334155;font-size:17px;line-height:1.75}
.article li{margin:6px 0}
.article blockquote{border-left:3px solid var(--accent);padding:8px 18px;color:var(--muted);margin:20px auto;font-style:italic;font-size:17px;line-height:1.7}
/* Media and embeds break out of the text column to the full card width. */
.article img,.article .embed,.article .coverimg{max-width:100%}
.article img{border-radius:12px;margin:8px auto;display:block}
.article .embed{margin:26px auto}
/* Opt-in full-bleed for wide interactive embeds: add class="embed-wide" to the
   pasted element and the block spans the card and then some.
   The offset is applied to our own .embed wrapper, never to the author's element:
   a pasted tool styles its root by id (#tool{margin:28px 0}), which outranks a
   class rule and would cancel half of a margin+transform centring trick, throwing
   the block sideways. One margin has nothing left to half-override. */
.article .embed:has(> .embed-wide){width:min(1100px,92vw);max-width:min(1100px,92vw);margin-left:calc(50% - min(550px,46vw))}
.article .embed iframe{max-width:100%;border:0;border-radius:12px;display:block;width:100%}
@media(max-width:760px){
  .article{padding:26px 22px;border-radius:12px}
  .article h1{font-size:27px}.article h2{font-size:21px;margin:26px auto 6px}.article h3{font-size:18px}
  .article p,.article ul,.article blockquote{font-size:16px}
}
/* 16:9 AI covers fill the wider column without being cropped (784px wide ≈ 441px tall). */
.coverimg{width:100%;max-height:450px;object-fit:cover;border-radius:12px;margin:18px 0}
body > footer{border-top:1px solid var(--tm-line);background:var(--tm-surface);margin-top:40px;padding:28px 0;font-size:13px;color:var(--muted)}
.consent{position:fixed;bottom:16px;left:16px;right:16px;max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 48px rgba(15,23,42,.18);padding:18px 20px;z-index:200;font-size:14px}
.consent p{margin:0 0 12px;color:#334155}
.consent .cbtns{display:flex;gap:8px;flex-wrap:wrap}
.consent button{padding:9px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.consent button.acc{background:var(--accent);border-color:var(--accent);color:#fff}
.empty{text-align:center;color:var(--muted);padding:60px 0;font-size:15px}