/* SerpAstra listicle template — l2-* components.
   Built on the blog v2 shell (b2-* classes, blog-v2.css). Only SerpAstra
   palette tokens. Buttons and links are >=44px tall. No horizontal
   overflow at 360px: the comparison table scrolls inside its own box,
   cards use min-width:0. */

:root{
  --l2-ink:#15131c; --l2-body:#2b2838; --l2-muted:#5e5b6b; --l2-line:#ece9f2;
  --l2-tint:#f4efff; --l2-green:#effaf3; --l2-green-line:#d3ecd9;
  --l2-rose:#fff1f2; --l2-rose-line:#f6d5d8;
  --l2-grad:linear-gradient(90deg,#ff5e1a,#e0367a 52%,#7a2ff0);
  --l2-soft:linear-gradient(135deg,#fff1e8,#fbeaf6 50%,#efe8ff);
}

/* ---- hero extras ---- */
.l2-byline{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;
  font-size:14px;line-height:1.5}
.l2-byline a{color:#6a2ee8;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}
.l2-byline a:hover{color:#ff5e1a}
.l2-method{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--l2-muted);
  max-width:70ch}
.l2-method strong{color:var(--l2-body)}

/* ---- quick comparison table ---- */
.l2-table-wrap{position:relative;margin:0 0 28px;border:1px solid var(--l2-line);
  border-radius:14px;overflow:auto;max-width:100%;background:#fff;
  -webkit-overflow-scrolling:touch}
.l2-table-wrap::after{content:"";position:sticky;right:0;top:0;float:right;
  width:32px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
.l2-table{border-collapse:separate;border-spacing:0;width:100%;min-width:620px;
  font-size:15px;line-height:1.5}
.l2-table caption{text-align:left;font-size:13px;color:var(--l2-muted);
  padding:12px 16px 0}
.l2-table th,.l2-table td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--l2-line)}
.l2-table thead th{position:sticky;top:72px;background:#fff;z-index:1;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--l2-muted);border-bottom:2px solid var(--l2-line);white-space:nowrap}
.l2-table tbody tr:last-child th,.l2-table tbody tr:last-child td{border-bottom:0}
.l2-table tbody tr:hover{background:#fafafc}
.l2-table .tool a{font-weight:700;color:var(--l2-ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.l2-table .tool a:hover{color:#6a2ee8;text-decoration:underline;
  text-underline-offset:3px}
.l2-table .price{white-space:nowrap;font-weight:600}
.l2-table .free{white-space:nowrap}

/* ---- product card ---- */
.l2-card{background:#fff;border:1px solid var(--l2-line);border-radius:18px;
  padding:24px;margin:0 0 28px;scroll-margin-top:96px;min-width:0}
.l2-card:hover{box-shadow:0 18px 50px -24px rgba(48,22,110,.28)}
.l2-card-top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.l2-rank{font-size:22px;font-weight:800;line-height:1;
  background:var(--l2-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;flex:none}
.l2-logo{width:48px;height:48px;flex:none;border-radius:10px;object-fit:contain;
  background:#fff;border:1px solid var(--l2-line);padding:4px}
.l2-name{flex:1 1 220px;min-width:0}
.l2-name h3{margin:0;font-size:20px;line-height:1.3;color:var(--l2-ink)}
.l2-name h3 a{color:var(--l2-ink);text-decoration:none}
.l2-name h3 a:hover{color:#6a2ee8;text-decoration:underline;
  text-underline-offset:3px}
.l2-bestfor{margin:2px 0 0;font-size:14px;color:var(--l2-muted);line-height:1.45}
.l2-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;line-height:1.4;color:var(--l2-body);min-height:44px}
.l2-rating a{color:var(--l2-body);text-decoration:underline;
  text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.l2-stars{position:relative;display:inline-block;font-size:15px;line-height:1;
  letter-spacing:2px;flex:none}
.l2-stars .bg{color:#d9d4e6}
.l2-stars .fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  background:var(--l2-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.l2-visit{flex:none;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;padding:0 20px;border-radius:999px;
  border:1.5px solid var(--l2-ink);color:var(--l2-ink);background:#fff;
  font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
/* ---- specificity overrides: the base stylesheet colours and underlines
   plain links inside .b2-post (body AND sidebar), which would beat these
   single-class rules ---- */
.b2-post a.l2-visit{color:var(--l2-ink);text-decoration:none}
.b2-post a.l2-visit:visited{color:var(--l2-ink);text-decoration:none}
.b2-post a.l2-visit:hover{color:#6a2ee8;text-decoration:none}
.b2-post a.l2-btn-grad{color:#fff;text-decoration:none}
.b2-post a.l2-btn-grad:visited{color:#fff;text-decoration:none}
.b2-post .l2-listing a.l2-btn{color:var(--l2-ink);text-decoration:none}
.b2-post .l2-listing a.l2-btn:hover{color:#6a2ee8;text-decoration:none}
/* The compact sidebar button is too narrow for its label on one line:
   let it wrap, centred, so the two lines look intentional. */
.l2-agency-compact .l2-btn-grad{justify-content:center;text-align:center;
  line-height:1.35;padding-top:10px;padding-bottom:10px}
.l2-visit svg{flex:none}
.l2-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.l2-tile{background:var(--l2-tint);border-radius:12px;padding:12px 14px;min-width:0}
.l2-tile .k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#6a2ee8;margin-bottom:4px}
.l2-tile .v{font-size:15px;line-height:1.45;color:var(--l2-ink);font-weight:600}
.l2-tile .v span{display:block;font-weight:400;font-size:13px;color:var(--l2-muted)}
.l2-card .l2-body p{margin:0 0 1em;font-size:17px;line-height:1.7;max-width:70ch}
.l2-card .l2-body p:last-child{margin-bottom:0}
.l2-card .l2-body a{color:#6a2ee8}
.l2-proscons{display:grid;gap:12px;margin:18px 0 0}
.l2-proscons h4{margin:0 0 8px;font-size:14px;font-weight:700}
.l2-proscons ul{margin:0;padding:0;list-style:none}
.l2-proscons li{position:relative;padding-left:26px;margin:0 0 8px;
  font-size:15px;line-height:1.55}
.l2-proscons li:last-child{margin-bottom:0}
.l2-proscons li::before{position:absolute;left:0;top:1px;font-size:15px}
.l2-like{background:var(--l2-green);border:1px solid var(--l2-green-line);
  border-radius:12px;padding:14px 16px}
.l2-like li::before{content:"✓";color:#1d7a3d;font-weight:700}
.l2-watch{background:var(--l2-rose);border:1px solid var(--l2-rose-line);
  border-radius:12px;padding:14px 16px}
.l2-watch li::before{content:"!";color:#b3261e;font-weight:700}

/* ---- listing request card ---- */
.l2-listing{background:#fff;border:1px solid #d9c8f5;border-radius:18px;
  padding:24px;margin:0 0 28px}
.l2-listing .l2-h{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700;
  color:var(--l2-ink)}
.l2-listing p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--l2-body);
  max-width:70ch}
.l2-listing .l2-btn{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;padding:0 22px;border-radius:999px;
  background:#fff;border:1.5px solid var(--l2-ink);color:var(--l2-ink);
  font-weight:700;font-size:15px;text-decoration:none}
.l2-listing .l2-btn:hover{border-color:#6a2ee8;color:#6a2ee8}

/* ---- agency bridge card ---- */
.l2-bridge{background:var(--l2-soft);border:1px solid #efe2f4;border-radius:26px;
  padding:32px;margin:0 0 28px}
.l2-bridge .eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--l2-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.l2-bridge p{margin:0 0 20px;font-size:17px;line-height:1.6;color:var(--l2-body);
  max-width:60ch}
.l2-btn-grad{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:999px;color:#fff;
  background:var(--l2-grad);font-weight:700;font-size:16px;text-decoration:none}
.l2-btn-grad:hover{filter:brightness(1.06)}
.l2-btn-grad .arr{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#fff;color:#e0367a;
  font-size:15px;flex:none}

/* ---- free tools card (ctaVariant tools) ---- */
.l2-tools{background:#fff;border:1px solid var(--l2-line);border-radius:26px;
  padding:32px;margin:0 0 28px}
.l2-tools .l2-h{margin:0 0 8px;font-size:22px;font-weight:700;color:var(--l2-ink)}
.l2-tools p{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--l2-body)}

/* ---- sources ---- */
.l2-sources{margin:0 0 28px;border:1px solid var(--l2-line);border-radius:14px;
  background:#fff}
.l2-sources summary{cursor:pointer;padding:16px 18px;font-weight:700;
  font-size:16px;color:var(--l2-ink);min-height:44px;display:flex;align-items:center}
.l2-sources ul{margin:0;padding:0 18px 16px;list-style:none}
.l2-sources li{font-size:14px;line-height:1.6;color:var(--l2-body);
  padding:6px 0;border-top:1px solid var(--l2-line)}
.l2-sources a{color:#6a2ee8;overflow-wrap:anywhere}

/* ---- sidebar compact cards ---- */
.b2-aside .l2-listing,.b2-aside .l2-bridge,.b2-aside .l2-tools{
  margin:0;padding:20px;border-radius:18px}
.b2-aside .l2-listing .l2-h,.b2-aside .l2-bridge h3,.b2-aside .l2-tools .l2-h{
  font-size:18px}
.b2-aside .l2-listing p,.b2-aside .l2-bridge p,.b2-aside .l2-tools p{
  font-size:14px}
.b2-aside .l2-bridge .eyebrow{font-size:12px}
.b2-aside .l2-btn-grad{min-height:44px;font-size:15px;padding:0 18px}
.b2-aside .l2-listing .l2-btn-grad{width:100%}

/* ---- body tables inside listicle prose (tool type by need) ---- */
.b2-body .l2-mini-table{border-collapse:collapse;width:100%;font-size:15px;
  line-height:1.55;margin:0 0 1.1em}
.b2-body .l2-mini-table th,.b2-body .l2-mini-table td{padding:10px 12px;
  text-align:left;vertical-align:top;border:1px solid var(--l2-line)}
.b2-body .l2-mini-table thead th{background:var(--l2-tint);font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--l2-muted)}
.b2-body .l2-mini-table-wrap{overflow:auto;max-width:100%;margin:0 0 1.1em}
.b2-body .l2-mini-table-wrap .l2-mini-table{margin:0;min-width:520px}

/* ---- how-we-review page ---- */
.l2-review-step{display:flex;gap:16px;margin:0 0 20px}
.l2-review-step .n{flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--l2-grad);color:#fff;font-weight:800;display:flex;
  align-items:center;justify-content:center;font-size:16px}
.l2-review-step h3{margin:2px 0 6px;font-size:18px;color:var(--l2-ink)}
.l2-review-step p{margin:0;font-size:16px;line-height:1.65;color:var(--l2-body)}

/* ---- responsive ---- */
@media (min-width:641px){
  /* Desktop: let the table header stick to the viewport while the page
     scrolls. (An overflow:auto ancestor would make it stick inside the
     wrapper instead, which never scrolls vertically.) */
  .l2-table-wrap{overflow:visible}
  .l2-table-wrap::after{display:none}
}
@media (min-width:640px){
  .l2-proscons{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .l2-card{padding:20px 16px}
  .l2-visit{width:100%}
  .l2-card-top .l2-rating{order:5;flex-basis:100%}
  .l2-tiles{grid-template-columns:1fr}
  .l2-bridge,.l2-tools{padding:24px 20px}
  .l2-table{min-width:560px}
}
@media (prefers-reduced-motion:reduce){
  .l2-card{transition:none}
}