/* V5.11 — Shared WYSIWYG article rendering contract.
   Scoped only to published article bodies and the Admin Visual canvas. */
:where(.published-article,.visual-canvas){
  --article-ink:#111827;--article-muted:#5f6b7d;--article-line:#d9e0ec;--article-soft:#f7f9fc;
  --article-pro:#087b68;--article-pro-bg:#edf9f6;--article-con:#c45b08;--article-con-bg:#fff7ed;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;color:var(--article-ink);overflow-wrap:anywhere;word-break:normal;
}
:where(.published-article,.visual-canvas) h1{margin:0 0 18px;font-size:34px;font-weight:900;line-height:1.16;letter-spacing:-.03em;color:var(--article-ink)}
:where(.published-article,.visual-canvas) p{margin:0 0 1.05em;line-height:1.75}
:where(.published-article,.visual-canvas) h2{margin:30px 0 12px;font-size:28px;font-weight:850;line-height:1.22;letter-spacing:-.025em;color:var(--article-ink)}
:where(.published-article,.visual-canvas) h3{margin:22px 0 10px;font-size:20px;font-weight:800;line-height:1.3;color:var(--article-ink)}
:where(.published-article,.visual-canvas) h4{margin:19px 0 8px;font-size:17px;font-weight:800;line-height:1.35;color:var(--article-ink)}
:where(.published-article,.visual-canvas) ul,:where(.published-article,.visual-canvas) ol{margin:12px 0 20px;padding-left:24px}
:where(.published-article,.visual-canvas) li{margin:6px 0;line-height:1.65}
:where(.published-article,.visual-canvas) blockquote{margin:22px 0;padding:16px 20px;border:1px solid #dfe6ff;border-left:4px solid #4d6fff;border-radius:0 12px 12px 0;background:#f6f8ff;color:#42516d}
:where(.published-article,.visual-canvas) figure.article-figure,:where(.published-article,.visual-canvas) figure{margin:26px 0}
:where(.published-article,.visual-canvas) figure img{max-width:100%;height:auto;border-radius:12px;border:1px solid rgba(15,23,42,.08)}
:where(.published-article,.visual-canvas) figcaption{text-align:center;font-size:12px;color:#75809a;margin-top:8px}
:where(.published-article,.visual-canvas) hr{border:0;border-top:1px solid var(--article-line);margin:30px 0}
:where(.published-article,.visual-canvas) pre{overflow:auto;padding:16px;border-radius:10px;background:#101827;color:#d5e5ff;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
:where(.published-article,.visual-canvas) a:not(.article-cta):not(.article-button){color:#3157d8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
:where(.published-article,.visual-canvas) a:not(.article-cta):not(.article-button):hover{color:#2347bd;text-decoration-thickness:2px}
:where(.published-article,.visual-canvas) figure img{display:block}

/* All editorial tables use the same renderer in Admin and public pages. */
:where(.published-article,.visual-canvas) table.article-table,
:where(.published-article,.visual-canvas) table{
  width:100%;border-collapse:separate;border-spacing:0;margin:20px 0 28px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  border:1px solid var(--article-line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.035)
}
:where(.published-article,.visual-canvas) table th,
:where(.published-article,.visual-canvas) table td{padding:12px 14px;border-right:1px solid var(--article-line);border-bottom:1px solid var(--article-line);text-align:left;vertical-align:top;line-height:1.55}
:where(.published-article,.visual-canvas) table tr>*:last-child{border-right:0}
:where(.published-article,.visual-canvas) table tbody tr:last-child>td{border-bottom:0}
:where(.published-article,.visual-canvas) table th{background:#f3f6fb;color:#26344e;font-weight:850}
:where(.published-article,.visual-canvas) table tbody tr:hover{background:#fbfdff}

/* Pros / Cons gets an editorial two-column treatment instead of losing its Admin styling after publish. */
:where(.published-article,.visual-canvas) table.article-pros-cons th:first-child{color:var(--article-pro);background:var(--article-pro-bg)}
:where(.published-article,.visual-canvas) table.article-pros-cons th:nth-child(2){color:var(--article-con);background:var(--article-con-bg)}
:where(.published-article,.visual-canvas) table.article-pros-cons td:first-child{background:linear-gradient(180deg,#fff,#fbfffe)}
:where(.published-article,.visual-canvas) table.article-pros-cons td:nth-child(2){background:linear-gradient(180deg,#fff,#fffdf9)}
:where(.published-article,.visual-canvas) table.article-pros-cons ul{margin:0;padding-left:22px}
:where(.published-article,.visual-canvas) table.article-pros-cons td:first-child li::marker{color:var(--article-pro)}
:where(.published-article,.visual-canvas) table.article-pros-cons td:nth-child(2) li::marker{color:var(--article-con)}

/* Merchant/pricing CTA. Any /go/ link is upgraded automatically, including older Visual HTML. */
:where(.published-article,.visual-canvas) a.article-cta,
:where(.published-article,.visual-canvas) a[href^="/go/"],
:where(.published-article,.visual-canvas) a[href*="/go/"]{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;margin:4px 0 16px;
  border:1px solid #087d70;border-radius:9px;background:linear-gradient(180deg,#128f80,#0d7d70);color:#fff!important;text-decoration:none!important;
  font:800 15px/1.2 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 10px 24px rgba(13,125,112,.18);
  cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,filter .2s ease
}
:where(.published-article,.visual-canvas) a.article-cta:hover,
:where(.published-article,.visual-canvas) a[href^="/go/"]:hover,
:where(.published-article,.visual-canvas) a[href*="/go/"]:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 14px 30px rgba(13,125,112,.27)}
:where(.published-article,.visual-canvas) a.article-cta:active,
:where(.published-article,.visual-canvas) a[href^="/go/"]:active,
:where(.published-article,.visual-canvas) a[href*="/go/"]:active{transform:translateY(0) scale(.985)}
:where(.published-article,.visual-canvas) .article-cta-row{margin:12px 0 18px}

:where(.published-article,.visual-canvas) .deal{display:grid;gap:4px;margin:18px 0;padding:14px 16px;border:1px solid #fed7aa;border-radius:12px;background:linear-gradient(135deg,#fff7ed,#fff);font-family:Inter,ui-sans-serif,system-ui}
:where(.published-article,.visual-canvas) .deal span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b45309;font-weight:850}
:where(.published-article,.visual-canvas) .deal strong{color:#7c2d12}


/* V5.16 — Full publish-parity helpers for all content-formatting controls. */
:where(.published-article,.visual-canvas) [style*="text-align: left"]{text-align:left}
:where(.published-article,.visual-canvas) [style*="text-align: center"]{text-align:center}
:where(.published-article,.visual-canvas) [style*="text-align: right"]{text-align:right}
:where(.published-article,.visual-canvas) [style*="text-align: justify"]{text-align:justify}
:where(.published-article,.visual-canvas) sup{font-size:.72em;line-height:0;vertical-align:super}
:where(.published-article,.visual-canvas) sub{font-size:.72em;line-height:0;vertical-align:sub}
:where(.published-article,.visual-canvas) mark{padding:.05em .14em;border-radius:.18em}
:where(.published-article,.visual-canvas) code:not(pre code){padding:.15em .35em;border-radius:5px;background:#f1f5f9;color:#0f172a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
:where(.published-article,.visual-canvas) .article-figure{max-width:100%}
:where(.published-article,.visual-canvas) .article-figure img{max-width:100%;height:auto}
:where(.published-article,.visual-canvas) .article-columns>*{min-width:0}
:where(.published-article,.visual-canvas) .article-columns img{max-width:100%}
:where(.published-article,.visual-canvas) .article-table[style*="text-align:center"] th,
:where(.published-article,.visual-canvas) .article-table[style*="text-align:center"] td{text-align:center}
:where(.published-article,.visual-canvas) .article-table[style*="text-align:right"] th,
:where(.published-article,.visual-canvas) .article-table[style*="text-align:right"] td{text-align:right}
:where(.published-article,.visual-canvas) p[style],
:where(.published-article,.visual-canvas) h1[style],
:where(.published-article,.visual-canvas) h2[style],
:where(.published-article,.visual-canvas) h3[style],
:where(.published-article,.visual-canvas) h4[style],
:where(.published-article,.visual-canvas) li[style],
:where(.published-article,.visual-canvas) blockquote[style]{max-width:100%}

@media(max-width:720px){
  :where(.published-article,.visual-canvas) table{display:block;max-width:100%;overflow-x:auto;border-radius:10px}
  :where(.published-article,.visual-canvas) table.article-pros-cons{display:table;table-layout:fixed}
  :where(.published-article,.visual-canvas) table.article-pros-cons th,:where(.published-article,.visual-canvas) table.article-pros-cons td{padding:10px}
  :where(.published-article,.visual-canvas) a.article-cta,:where(.published-article,.visual-canvas) a[href*="/go/"]{width:100%;text-align:center}
}

/* V5.12 — generic document components shared by Visual, Preview and published reviews. */
:where(.published-article,.visual-canvas) .article-intro{font-size:1.12em;line-height:1.75;color:#34445e}
:where(.published-article,.visual-canvas) .article-small-note{font-size:.9em;color:#69758a}
:where(.published-article,.visual-canvas) .no-spacing{margin-bottom:0!important}
:where(.published-article,.visual-canvas) .article-button-row{margin:14px 0 20px}
:where(.published-article,.visual-canvas) a.article-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 17px;border:1px solid #335ad4;border-radius:9px;background:#3157d8;color:#fff!important;text-decoration:none!important;font:800 14px/1.2 Inter,system-ui;box-shadow:0 8px 22px rgba(49,87,216,.17);transition:transform .16s ease,box-shadow .2s ease}
:where(.published-article,.visual-canvas) a.article-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(49,87,216,.25)}
:where(.published-article,.visual-canvas) .article-callout{margin:22px 0;padding:16px 18px;border:1px solid #cfe0ff;border-left:4px solid #3674ef;border-radius:10px;background:#f7faff;color:#34445e}
:where(.published-article,.visual-canvas) .article-callout>strong{display:block;margin-bottom:5px;color:#173b82}
:where(.published-article,.visual-canvas) .article-callout p:last-child{margin-bottom:0}
:where(.published-article,.visual-canvas) .article-checklist{list-style:none;padding-left:0}
:where(.published-article,.visual-canvas) .article-checklist li{position:relative;padding-left:26px}
:where(.published-article,.visual-canvas) .article-checklist li::before{content:'✓';position:absolute;left:2px;top:0;color:#087b68;font-weight:900}
:where(.published-article,.visual-canvas) .article-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
:where(.published-article,.visual-canvas) .article-gallery figure{margin:0}
:where(.published-article,.visual-canvas) .article-gallery img{width:100%;height:100%;min-height:180px;object-fit:cover}
:where(.published-article,.visual-canvas) figure.align-left{text-align:left}
:where(.published-article,.visual-canvas) figure.align-left img{display:block;margin-left:0;margin-right:auto}
:where(.published-article,.visual-canvas) figure.align-left figcaption{text-align:left}
:where(.published-article,.visual-canvas) figure.align-center{text-align:center}
:where(.published-article,.visual-canvas) figure.align-center img{display:block;margin-left:auto;margin-right:auto}
:where(.published-article,.visual-canvas) figure.align-center figcaption{text-align:center}
:where(.published-article,.visual-canvas) figure.align-right{text-align:right}
:where(.published-article,.visual-canvas) figure.align-right img{display:block;margin-left:auto;margin-right:0}
:where(.published-article,.visual-canvas) figure.align-right figcaption{text-align:right}
:where(.published-article,.visual-canvas) figure.align-full{width:100%;text-align:center}
:where(.published-article,.visual-canvas) figure.align-full img{display:block;width:100%!important;margin-left:auto;margin-right:auto}
:where(.published-article,.visual-canvas) figure.wrap-left{float:left;width:min(44%,360px);margin:8px 24px 16px 0}
:where(.published-article,.visual-canvas) figure.wrap-right{float:right;width:min(44%,360px);margin:8px 0 16px 24px}
:where(.published-article,.visual-canvas) figure.article-breakout{width:min(112%,100vw);margin-left:50%;transform:translateX(-50%)}
:where(.published-article,.visual-canvas) img.img-shadow-soft{box-shadow:0 12px 28px rgba(15,23,42,.12)}
:where(.published-article,.visual-canvas) img.img-shadow-medium{box-shadow:0 18px 42px rgba(15,23,42,.22)}
:where(.published-article,.visual-canvas) .article-video video{display:block;width:100%;max-width:100%;border-radius:12px;background:#020617}
:where(.published-article,.visual-canvas) .article-columns{display:grid;gap:22px;margin:22px 0}
:where(.published-article,.visual-canvas) .article-columns.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(.published-article,.visual-canvas) .article-columns.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
:where(.published-article,.visual-canvas) .article-page-break{height:0;border-top:2px dashed #cbd5e1;margin:34px 0;break-before:page}
:where(.published-article,.visual-canvas) .article-section-break{border-top:2px dashed #aab6c7}
:where(.published-article,.visual-canvas) .article-toc{margin:22px 0 30px;padding:16px 18px;border:1px solid #dae3ef;border-radius:12px;background:#f8fbff}
:where(.published-article,.visual-canvas) .article-toc>strong{display:block;margin-bottom:8px;color:#17233a;font-size:15px}
:where(.published-article,.visual-canvas) .article-toc ol{margin:0;padding-left:20px}
:where(.published-article,.visual-canvas) .article-toc .toc-h3{margin-left:14px}
:where(.published-article,.visual-canvas) .article-toc .toc-h4{margin-left:28px;font-size:.93em}
:where(.published-article,.visual-canvas) .article-toc a{text-decoration:none;color:#3157b7}
:where(.published-article,.visual-canvas) .article-citation a,:where(.published-article,.visual-canvas) .article-footnote-ref a{font-size:.78em;text-decoration:none;color:#3157b7}
:where(.published-article,.visual-canvas) .article-sources,:where(.published-article,.visual-canvas) .article-footnotes{clear:both;margin-top:36px;padding-top:20px;border-top:1px solid #dce3ec}
:where(.published-article,.visual-canvas) .editor-comment{background:transparent;border:0}
:where(.published-article) .editor-suggestion-delete{display:none}
:where(.published-article) .editor-suggestion-insert{color:inherit;background:transparent;text-decoration:none}
:where(.published-article,.visual-canvas)::after{content:'';display:block;clear:both}
@media(max-width:720px){
  :where(.published-article,.visual-canvas) figure.wrap-left,:where(.published-article,.visual-canvas) figure.wrap-right{float:none;width:100%;margin:22px 0}
  :where(.published-article,.visual-canvas) figure.article-breakout{width:100%;margin-left:0;transform:none}
  :where(.published-article,.visual-canvas) .article-gallery,:where(.published-article,.visual-canvas) .article-columns.cols-2,:where(.published-article,.visual-canvas) .article-columns.cols-3{grid-template-columns:1fr}
  :where(.published-article,.visual-canvas) a.article-button{width:100%}
}