.article-breadcrumbs{display:flex;align-items:center;gap:.45rem;padding:1rem 0;color:var(--muted);font-size:.88rem;overflow:hidden}.article-breadcrumbs a{color:inherit}.article-breadcrumbs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.article-breadcrumbs i{font-size:.8rem;flex:none}.blog-article-hero__media{margin:0;position:relative;min-height:340px;background:var(--surface-2);overflow:hidden}.blog-article-hero__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.blog-article-hero__media figcaption{position:absolute;left:1rem;bottom:1rem;max-width:min(80%,680px);padding:.55rem .75rem;border-radius:.7rem;background:rgba(15,23,42,.84);color:#fff;font-size:.78rem;line-height:1.4}.article-toc{padding:1.15rem 1.25rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface-2);margin:1.5rem 0}.article-toc h2{font-size:1rem!important;margin:0 0 .7rem!important}.article-toc ol{columns:2;column-gap:2rem;margin:0;padding-left:1.2rem}.article-toc li{break-inside:avoid;margin:.35rem 0}.article-toc li.is-subsection{margin-left:.75rem;font-size:.92em}.article-toc a{color:var(--text);text-decoration:none}.article-toc a:hover{text-decoration:underline;text-decoration-color:var(--primary)}.article-media{margin:1.75rem 0}.article-media img{display:block;width:100%;height:auto;border-radius:1rem;border:1px solid var(--border);background:var(--surface-2)}.article-media figcaption{padding:.65rem .2rem 0;color:var(--muted);font-size:.88rem}.article-research-note,.article-trust{display:flex;gap:.9rem;margin:1.5rem 0;padding:1.1rem 1.2rem;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:1rem;background:color-mix(in srgb,var(--primary) 7%,var(--surface))}.article-research-note>i{color:var(--primary);font-size:1.35rem}.article-research-note p,.article-trust p{margin:.25rem 0 0}.article-trust{display:block}.article-trust h2{margin-top:0!important}.article-trust dl{display:grid;gap:.55rem}.article-trust dl>div{display:grid;grid-template-columns:120px 1fr;gap:.75rem}.article-trust dt{font-weight:800}.article-trust dd{margin:0;color:var(--muted)}.article-related-tools,.article-related-posts,.article-faq{margin:2.4rem 0}.article-section-heading>span{color:var(--primary);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.article-section-heading h2{margin:.3rem 0 1rem!important}.article-tool-grid,.article-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.article-tool-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface);color:var(--text);text-decoration:none}.article-tool-card>span{width:42px;height:42px;display:grid;place-items:center;border-radius:.8rem;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}.article-tool-card div{min-width:0}.article-tool-card strong,.article-tool-card small{display:block}.article-tool-card small{margin-top:.2rem;color:var(--muted);line-height:1.4}.article-related-grid a{display:flex;flex-direction:column;gap:.45rem;padding:1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface);color:var(--text);text-decoration:none}.article-related-grid span{color:var(--primary);font-size:.75rem;font-weight:800;text-transform:uppercase}.article-related-grid small{color:var(--muted);line-height:1.45}.article-faq details{border:1px solid var(--border);border-radius:.85rem;padding:.85rem 1rem;margin:.7rem 0;background:var(--surface)}.article-faq summary{font-weight:800;cursor:pointer}.ttg-code-preview{margin:1.6rem 0;border:1px solid #2d3748;border-radius:1rem;overflow:hidden;background:#0f172a;color:#e2e8f0;box-shadow:0 14px 32px rgba(15,23,42,.13)}.ttg-code-preview__header{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .7rem .5rem 1rem;background:#1e293b;border-bottom:1px solid #334155}.ttg-code-preview__language{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:#cbd5e1}.ttg-code-preview__controls{display:flex;gap:.4rem}.ttg-code-preview button{min-height:34px;padding:.35rem .7rem;border:1px solid #475569;border-radius:.55rem;background:#0f172a;color:#f8fafc;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.ttg-code-preview button:hover,.ttg-code-preview button:focus-visible{border-color:#fb8b6d;outline:2px solid #fb8b6d;outline-offset:1px}.ttg-code-preview pre{margin:0;padding:1.1rem 1.2rem;overflow-x:auto;max-width:100%;background:transparent;color:inherit;tab-size:2}.ttg-code-preview pre.is-wrapped{white-space:pre-wrap;overflow-wrap:anywhere}.ttg-code-preview code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.9rem;line-height:1.65}.ttg-code-preview .token.comment{color:#94a3b8}.ttg-code-preview .token.string{color:#86efac}.ttg-code-preview .token.number{color:#fbbf24}.ttg-code-preview .token.keyword{color:#93c5fd;font-weight:700}.ttg-code-preview .token.tag{color:#fda4af}.ttg-code-preview .token.entity{color:#c4b5fd}.comparison-table{width:100%;border-collapse:collapse;margin:1.3rem 0}.comparison-table th,.comparison-table td{padding:.75rem;border:1px solid var(--border);vertical-align:top;text-align:left}.comparison-table th{background:var(--surface-2)}.table-scroll{overflow-x:auto;margin:1rem 0}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.25rem 0}.pros-card,.cons-card,.callout,.tip-box,.warning-box,.step-card{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface-2)}.pros-card{border-top:3px solid #22a06b}.cons-card,.warning-box{border-top:3px solid #d97706}.tip-box{border-left:4px solid var(--primary)}.step-grid{display:grid;gap:.8rem}.blog-article--comparison .blog-article-hero{grid-template-columns:1.05fr .95fr}.blog-article--technical .blog-article-hero__content{background:none;color:#fff}.blog-article--checklist .blog-quick-summary{border-left:4px solid #22a06b}.blog-article--case-study .blog-article-hero__media{order:2}
@media(max-width:760px){.article-toc ol{columns:1}.article-tool-grid,.article-related-grid,.pros-cons{grid-template-columns:1fr}.article-trust dl>div{grid-template-columns:1fr;gap:.15rem}.blog-article-hero__media{min-height:220px}.ttg-code-preview__header{align-items:flex-start;flex-direction:column;gap:.45rem}.ttg-code-preview__controls{width:100%}.ttg-code-preview button{flex:1}.ttg-code-preview pre{padding:.9rem;font-size:.82rem}.article-breadcrumbs{padding-inline:.1rem}}
@media(max-width:340px){.article-tool-card{grid-template-columns:36px 1fr}.article-tool-card>i{display:none}.article-tool-card>span{width:36px;height:36px}.ttg-code-preview{border-radius:.75rem;margin-inline:-.25rem}}
[data-theme="dark"] .ttg-code-preview,html.dark .ttg-code-preview{border-color:#475569;box-shadow:none}[data-theme="dark"] .article-media img,html.dark .article-media img{background:#111827}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ttg-code-preview pre{outline:0}.ttg-code-preview pre:focus-visible{box-shadow:inset 0 0 0 2px #fb8b6d}

/* ==========================================================================
   Article component alignment, tables and scrollbars — 29 July 2026
   Card group containers had no rules, so every card stacked flush against the
   next one and read as one broken block. Article tables are stored as plain
   <table> elements, so they rendered with browser defaults.
   ========================================================================== */

/* --- Card groups --- */
.step-cards,
.step-grid,
.pros-cons,
.pros-cons-grid,
.decision-cards {
  display: grid;
  gap: 14px;
  margin: 1.6rem 0;
}

.pros-cons,
.pros-cons-grid,
.decision-cards {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-items: start;
}

/* An even number of cards reads better as a balanced 2 x 2 block than as a
   full row with a single card stranded underneath. */
.pros-cons:has(> :nth-child(4)):not(:has(> :nth-child(5))),
.pros-cons-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
.decision-cards:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .pros-cons:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .pros-cons-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))),
  .decision-cards:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.step-cards > .step-card,
.step-grid > .step-card,
.pros-cons > *,
.pros-cons-grid > * {
  margin: 0;
  height: 100%;
}

.blog-article-content .checklist,
.checklist {
  display: grid;
  gap: 10px;
  margin: 1.5rem 0;
  padding-left: 0;
  list-style: none;
}

.blog-article-content .checklist > li,
.checklist > li {
  margin: 0;
  padding-left: 26px;
  position: relative;
}

.blog-article-content .checklist > li::marker,
.checklist > li::marker {
  content: "";
}

.blog-article-content .checklist > li::before,
.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 15px;
  height: 15px;
  border: 2px solid var(--teal, #0f766e);
  border-right: 0;
  border-top: 0;
  border-radius: 2px;
  transform: rotate(-45deg) scale(.78);
}

/* --- Article tables --- */
/* site.css sets `.blog-article table{display:block}`, which turns the table into
   a block box: the frame fills the column while the rows shrink to fit, so the
   header band and separators stop short of the border. */
.blog-article-content table,
.comparison-table {
  display: table;
  overflow: visible;
  width: 100%;
  margin: 1.6rem 0;
  border: 1px solid var(--line, #ddd6c9);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface, #fff);
  font-size: .88rem;
  line-height: 1.6;
  box-shadow: var(--shadow-xs, 0 4px 14px rgba(20, 52, 48, .06));
}

.blog-article-content table th,
.comparison-table th {
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid var(--line, #ddd6c9);
  background: color-mix(in srgb, var(--surface-2, #f0ebe1) 70%, transparent);
  color: var(--ink, #102b2a);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.blog-article-content table td,
.comparison-table td {
  padding: 12px 15px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line, #ddd6c9) 70%, transparent);
  color: var(--ink-2, #31504d);
  vertical-align: top;
}

.blog-article-content table tbody tr:first-child td,
.comparison-table tbody tr:first-child td {
  border-top: 0;
}

.blog-article-content table tbody tr:nth-child(even),
.comparison-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-2, #f0ebe1) 32%, transparent);
}

.blog-article-content table td:first-child,
.comparison-table td:first-child {
  color: var(--ink, #102b2a);
  font-weight: 750;
}

.blog-article-content table code,
.comparison-table code {
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--teal, #0f766e) 10%, transparent);
  font-size: .85em;
}

.blog-article-content table caption,
.comparison-table caption {
  padding: 0 0 8px;
  color: var(--muted, #6e7e7b);
  font-size: .8rem;
  text-align: left;
}

.table-scroll {
  overflow-x: auto;
  margin: 1.6rem 0;
  border-radius: 16px;
}

.table-scroll > table,
.table-scroll > .comparison-table {
  display: table;
  margin: 0;
  min-width: 560px;
}

@media (max-width: 700px) {
  .blog-article-content > table,
  .blog-article-content > .comparison-table {
    display: block;
    overflow-x: auto;
  }

  .blog-article-content table th,
  .blog-article-content table td,
  .comparison-table th,
  .comparison-table td {
    padding: 10px 12px;
  }
}

/* --- Scrollbars: match the surface they sit on --- */
.ttg-code-preview pre::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.ttg-code-preview pre::-webkit-scrollbar-track {
  background: #0f172a;
  border-top: 1px solid #1e293b;
}

.ttg-code-preview pre::-webkit-scrollbar-thumb {
  border: 2px solid #0f172a;
  border-radius: 999px;
  background: #475569;
}

.ttg-code-preview pre::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.ttg-code-preview pre {
  scrollbar-width: thin;
  scrollbar-color: #475569 #0f172a;
}

.table-scroll::-webkit-scrollbar,
.blog-article-content > table::-webkit-scrollbar {
  height: 10px;
}

.table-scroll::-webkit-scrollbar-track,
.blog-article-content > table::-webkit-scrollbar-track {
  background: var(--surface-2, #f0ebe1);
  border-radius: 999px;
}

.table-scroll::-webkit-scrollbar-thumb,
.blog-article-content > table::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #6e7e7b) 55%, transparent);
}

.table-scroll,
.blog-article-content > table {
  scrollbar-width: thin;
}

[data-theme="dark"] .blog-article-content table,
[data-theme="dark"] .comparison-table {
  background: var(--surface);
  border-color: var(--line);
}

/* The research note exists in two shapes: an <aside> with a leading icon (flex)
   and an inline <p> written into article bodies. The flex rule turned every
   inline child of the paragraph into a rigid column, so the source links were
   squeezed into narrow stacks. */
p.article-research-note {
  display: block;
  line-height: 1.65;
}

p.article-research-note > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink, #102b2a);
}

p.article-research-note a {
  overflow-wrap: anywhere;
}