/* HTML-first blocks shared by CMS articles, guides and documentation. Light blue cards, Welo blue accents. */
.welo-editorial{
  --we-fg:#09090b;--we-fg-2:#3f3f46;--we-muted:#64708a;--we-accent:#4069ef;--we-border:#dfe6fb;--we-soft:#e6ecfc;--we-surface:#f5f8ff;--we-strong:#eef2ff;
  box-sizing:border-box;position:relative;margin:2rem 0;padding:20px 22px;border:1px solid var(--we-border);border-radius:14px;background:var(--we-surface);
  color:var(--we-fg-2);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15.5px;line-height:1.7;overflow-wrap:break-word
}
.welo-editorial>*{margin-top:0!important;margin-bottom:0!important}
.welo-editorial>*+*{margin-top:10px!important}
.welo-editorial p{color:inherit}
.welo-editorial strong,.welo-editorial b{color:var(--we-fg);font-weight:600}
.welo-editorial a{color:var(--we-fg);font-weight:500;text-decoration:underline;text-decoration-color:#a1a1aa;text-underline-offset:3px}

/* Label row: the first paragraph holds the block title; an icon is drawn per kind. */
.welo-editorial>p:first-child{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;letter-spacing:.01em}
.welo-editorial>p:first-child>strong{font-weight:600;color:var(--we-fg)}
.welo-editorial>p:first-child::before{content:"";flex:none;width:16px;height:16px;background:currentColor;color:var(--we-accent);-webkit-mask:var(--we-icon) center/contain no-repeat;mask:var(--we-icon) center/contain no-repeat}
.welo-editorial>p:first-child+*{margin-top:12px!important}
.welo-editorial{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
.welo-editorial--tldr{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E")}
.welo-editorial--key-takeaway{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4'/%3E%3C/svg%3E")}
.welo-editorial--best-for{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E")}
.welo-editorial--methodology{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2v6a2 2 0 0 0 .25.97l5.5 9.86A2 2 0 0 1 18 22H6a2 2 0 0 1-1.75-3.17l5.5-9.86A2 2 0 0 0 10 8V2M6.45 15h11.1M8.5 2h7'/%3E%3C/svg%3E")}
.welo-editorial--pros-cons{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1ZM2 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1ZM7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E")}
.welo-editorial--research-findings{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16M18 17V9M13 17V5M8 17v-3'/%3E%3C/svg%3E")}
.welo-editorial--expert-insight{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E")}
.welo-editorial--editorial-disclosure{--we-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 13h4M10 17h4'/%3E%3C/svg%3E")}

/* Lists inside blocks: custom markers, no browser bullets. */
.welo-editorial ul,.welo-editorial ol{display:flex;flex-direction:column;gap:10px;margin-left:0;padding:0;list-style:none}
.welo-editorial li{position:relative;margin:0!important;padding:0 0 0 22px}
.welo-editorial li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:#9db2f5}

/* TL;DR and summaries: soft grey card with numbered points. */
.welo-editorial--tldr,.welo-editorial--research-findings,.welo-editorial--expert-insight{border-color:#d6e0fb;background:var(--we-strong)}
.welo-editorial--tldr ul{counter-reset:we-step}
.welo-editorial--tldr li{padding-left:34px;counter-increment:we-step}
.welo-editorial--tldr li::before{content:counter(we-step);top:.18em;left:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid #d6e0fb;border-radius:7px;background:#fff;color:var(--we-accent);font-size:12px;font-weight:600;line-height:1}

/* Key takeaway: the one inverted card in an article. */
.welo-editorial--key-takeaway{border-color:#09090b;background:#09090b;color:#d4d4d8}
.welo-editorial--key-takeaway strong,.welo-editorial--key-takeaway b,.welo-editorial--key-takeaway a,.welo-editorial--key-takeaway>p:first-child>strong{color:#fff}
.welo-editorial--key-takeaway>p:first-child::before{color:#fff}
.welo-editorial--key-takeaway li::before{background:#71717a}
.welo-editorial--key-takeaway>p:not(:first-child){font-size:16.5px;line-height:1.65;color:#e4e4e7}

/* Best for: label pill on top, verdict below. */
.welo-editorial--best-for{display:flex;flex-direction:column;align-items:flex-start;padding:18px 20px}
.welo-editorial--best-for>p:first-child{height:28px;padding:0 11px 0 9px;border:1px solid var(--we-border);border-radius:999px;background:#fff;font-size:12.5px;white-space:nowrap}
.welo-editorial--best-for>p:first-child::before{width:14px;height:14px}
.welo-editorial--best-for>p:first-child+*{margin-top:12px!important;color:var(--we-fg)}

/* Methodology and disclosures: quieter, dashed. */
.welo-editorial--methodology,.welo-editorial--editorial-disclosure{border-style:dashed;border-color:#c7d3f6;background:#fafbff;font-size:14.5px;color:var(--we-muted)}

/* Important note: neutral with a black rule on the left. */
.welo-editorial--important-note{border-left:3px solid var(--we-accent);border-radius:4px 14px 14px 4px;background:var(--we-surface)}

/* Pros and cons: each point on its own row. */
.welo-editorial--pros-cons ul{gap:0}
.welo-editorial--pros-cons li{padding:12px 0 12px 0}
.welo-editorial--pros-cons li+li{border-top:1px solid var(--we-soft)}
.welo-editorial--pros-cons li:last-child{padding-bottom:0}
.welo-editorial--pros-cons li::before{display:none}
.welo-editorial--pros-cons li>strong:first-child{display:block;margin-bottom:2px}

/* Comparison tables: caption text above a scrollable, shadcn-style table. */
.welo-comparison-table{font-size:13px;line-height:1.5;color:#71717a}
.welo-comparison-table>.wn-table{margin-top:20px}
.wn-table{box-sizing:border-box;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid #e4e4e7;border-radius:12px;background:#fff}
.wn-table table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;font-size:14px;line-height:1.55}
.wn-table th,.wn-table td{min-width:10rem;max-width:18rem;padding:12px 16px;vertical-align:top;text-align:left;border:0;overflow-wrap:normal;word-break:normal;white-space:normal}
.wn-table thead th{position:sticky;top:0;background:#fafafa;border-bottom:1px solid #e4e4e7;color:#71717a;font-size:13px;font-weight:500;white-space:nowrap}
.wn-table tbody th{color:#09090b;font-weight:500;background:#fff}
.wn-table td{color:#3f3f46;background:#fff}
.wn-table tbody tr+tr>*{border-top:1px solid #f0f0f2}
.wn-table tbody tr:hover>*{background:#fafafa}
/* Keep the row label in view while the comparison scrolls sideways. */
.wn-table tr>:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 #e4e4e7}
.wn-table thead tr>:first-child{z-index:2}
.wn-table td p{margin:0 0 .55rem!important}
.wn-table td p:last-child{margin-bottom:0!important}

@media(max-width:767px){
  .welo-editorial{margin:1.5rem 0;padding:16px 18px;font-size:15px}
  .wn-table th,.wn-table td{padding:10px 12px;font-size:13.5px}
  .wn-table tr>:first-child{position:static;box-shadow:none}
}
