/* Site-wide layout fixes for flaws inherited from the old static pages. Loaded after every page style.
   Each block names the pages it was seen on in the 2026-10-13 hero review. */

/* shared.css paints every 2nd <section> as a grey full-width band. Inside the page column that band
   becomes a grey box with no side padding and an empty top (compare "At a Glance", "Quick Verdict"). */
body .container section:not([class]) { background: transparent; padding-top: 48px; padding-bottom: 0; }

/* TLDR boxes: guide, blog, tool and use-case pages had five different treatments (some with the text on
   the border, some white on white, some with a big heading). One card everywhere. */
body .guide-tldr, body .blog-tldr, body .tool-tldr:not(.tool-content-shell), body .tool-content-shell.tool-tldr, body .tldr, body .tldr-box {
  margin-top: 24px; margin-bottom: 32px; padding: 20px 22px !important; background: #f9fafb !important;
  border: 1px solid #e5e7eb !important; border-left: 3px solid #4f46e5 !important; border-radius: 8px !important;
}
body :is(.guide-tldr, .blog-tldr, .tool-tldr, .tldr, .tldr-box) > h2,
body :is(.guide-tldr, .blog-tldr, .tool-tldr, .tldr, .tldr-box) > strong:first-child {
  display: block; font-size: 13px !important; line-height: 1.4 !important; margin: 0 0 10px !important; color: #111827;
  text-transform: uppercase; letter-spacing: .08em !important; font-weight: 700;
}
body :is(.guide-tldr, .blog-tldr, .tool-tldr, .tldr, .tldr-box) li,
body :is(.guide-tldr, .blog-tldr, .tool-tldr, .tldr, .tldr-box) > p { font-size: 15px; line-height: 1.65; color: #374151; }
body .guide-tldr ul { margin: 0; padding: 0; }

/* Byline: give it room above the TLDR card; on phones drop the separator dot instead of leaving it
   dangling at the end of a wrapped line. */
body .article-byline { margin-bottom: 8px; }
@media (max-width: 600px) {
  body .article-byline { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  body .article-byline-dot { display: none !important; }
}

/* Injected pricing notes carry an inline text-align:center, even in left-aligned heroes (guides, tools). */
body [data-seo-pricing-link] { text-align: inherit !important; }

/* Tables: on phones the last column was cut off (compare "At a Glance", docs). Tables with a header row
   turn into one card per row, each value labelled with its column; others scroll inside their own box. */
.vm-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  body table.vm-stack, body table.vm-stack tbody, body table.vm-stack tr, body table.vm-stack td,
  body table.vm-stack tbody th { display: block; width: 100%; }
  body table.vm-stack { border: 0 !important; background: transparent !important; box-shadow: none !important; }
  body table.vm-stack thead { display: none; }
  body table.vm-stack tr {
    margin: 0 0 10px; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
  }
  body table.vm-stack td, body table.vm-stack tbody th {
    padding: 3px 0 !important; border: 0 !important; background: transparent !important; text-align: left !important;
    white-space: normal !important; font-size: 14px; line-height: 1.5;
  }
  body table.vm-stack tr > :first-child { font-weight: 600; color: #111827; padding-bottom: 6px !important; }
  body table.vm-stack tr > :not(:first-child)[data-label]::before {
    content: attr(data-label); display: block; margin-top: 4px; font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: #6b7280;
  }
}

/* features: code sample text had no colour, so punctuation and the example address were dark on dark. */
body .code-block { color: #cdd6f4; }

/* docs hub: title and intro are left-aligned, the resource buttons were centred under nothing. */
body .docs-agent-actions { justify-content: flex-start !important; }

/* use-cases: hero bottom padding + section margin + section padding left ~200px of empty space. */
.page-hero + .content-section { margin-top: 0; padding-top: 24px; }

/* tools: on phones the intro grid kept a min-content column wider than the screen, and inline flex
   forms pushed the button past the card edge. */
@media (max-width: 900px) { body .tool-intro { grid-template-columns: minmax(0, 1fr) !important; } }
body .tool-intro > * { min-width: 0; }
body form input { min-width: 0; }
body form .btn { flex-shrink: 0; white-space: nowrap; }

/* Full-width phone buttons centre their label (inline-flex buttons ignored text-align). */
@media (max-width: 600px) { body .btn-primary, body .btn { justify-content: center; text-align: center; } }

/* Step cards: page CSS forced 3 columns even on phones (cards squeezed and cut off), and shared.css
   added a numbered circle on top of the page's own "01" number. One number, one column on phones. */
@media (max-width: 760px) { body .steps-grid { grid-template-columns: minmax(0, 1fr) !important; } }
body .step:has(.step-num)::before { display: none; }

/* Tool forms on phones: input on its own row, full-width button below. */
@media (max-width: 600px) {
  body form div[style*="display:flex"] { flex-wrap: wrap; }
  body form div[style*="display:flex"] > input { flex: 1 1 100% !important; }
  body form div[style*="display:flex"] > .btn { flex: 1 1 100%; }
}

/* privacy/terms: hero is left-aligned but shared.css centres its paragraphs as auto-margin blocks. */
body .page-hero[style*="text-align:left"] > * { margin-left: 0 !important; margin-right: 0 !important; }

/* glossary: byline now sits above the buttons inside the hero, as on blog posts. */
body .page-hero > .article-byline { margin: 18px 0 0; }

/* compare: the stat row under the hero came in three looks (left-aligned, centred, boxed cards) across
   pages with identical markup. One look everywhere: centred, between two hairlines. */
body .metric-strip {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important;
  border: 0 !important; border-top: 1px solid #e5e7eb !important; border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 18px 0 !important; margin: 28px 0 8px !important; text-align: center !important;
}
body .metric-item {
  border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important;
  border-radius: 0 !important; text-align: center !important;
}
body .metric-item strong { display: block; color: #111827; font-size: 22px !important; line-height: 1.2; }
body .metric-item span { display: block; color: #6b7280; font-size: 13px !important; line-height: 1.45; margin-top: 5px; }
@media (max-width: 700px) { body .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px !important; } }
body #dkim-selector { width: 230px !important; }

/* Long words (German compounds, Turkish, cited URLs) pushed the money-page hero copy and compare
   source citations past the phone screen edge. */
body .money-hero-inner > *, body .money-copy { min-width: 0; }
body .money-copy { overflow-wrap: break-word; }
body cite { overflow-wrap: anywhere; }
/* Grid children default to min-width:auto, so one long word stretched a whole column past the screen. */
body [class*="grid"] > * { min-width: 0; }

/* docs: endpoint URLs scroll on one line instead of breaking mid-word. */
body .endpoint-url { overflow-wrap: normal !important; white-space: nowrap; display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: bottom; }

/* for/*: the injected "See pricing" link wrapped under the link row and was clipped by the card. */
body .for-tldr-card { overflow: visible !important; }
body .for-tldr-links { row-gap: 10px !important; }

/* Phones: headings in the hero use one size (a few pages had larger inline sizes). */
@media (max-width: 600px) { body .page-hero h1 { font-size: 32px !important; line-height: 1.15 !important; } }

/* Arabic: code samples must stay left-to-right, or the URL, commas and braces get reordered. */
[dir="rtl"] :is(pre, code, kbd, samp, .code-block, .endpoint-url) { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* Japanese/Chinese/Korean: no lone "す。" on the last line of a paragraph, phrase-aware breaks in
   Japanese body text, and no Latin letter-spacing on CJK headings. */
:is(:lang(ja), :lang(zh), :lang(ko)) :is(p, li) { text-wrap: pretty; }
:lang(ja) :is(p, li) { word-break: auto-phrase; overflow-wrap: anywhere; }
body .text-panel { min-width: 0; }
:is(:lang(ja), :lang(zh)) :is(h1, h2, h3, h4, h5) { letter-spacing: 0 !important; }

/* Nav labels never wrap (German "API-Docs" broke onto two lines). */
body .site-nav :is(.nav-item > a, .nav-item > button, .nav-trigger, .nav-cta, .nav-login) { white-space: nowrap; }

/* Older localized landing pages: left-aligned hero, so the byline aligns left too. */
body section.hero .article-byline { justify-content: flex-start; text-align: left; }

/* Between tablet and laptop width the top row did not fit (it used to wrap onto two lines). Integrations
   and API Docs are also inside the menus, so the top row drops them there and tightens spacing. */
@media (min-width: 769px) and (max-width: 1180px) {
  body .site-nav .nav-item:has(> a[href*="integrations"]), body .site-nav .nav-item:has(> a[href*="docs"]) { display: none; }
  body .site-nav :is(.nav-item > a, .nav-trigger) { padding-left: 8px; padding-right: 8px; }
}

/* Diagrams: on phones a 1200px-wide diagram shrank to unreadable 4px labels. It now keeps a readable
   size and scrolls sideways inside its own box; soft edge shadows show there is more to see. */
.vm-dia { display: block; max-width: 100%; min-width: 0; contain: inline-size; }
.vm-dia > img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .vm-dia { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .vm-dia > img { flex: 0 0 720px; width: 720px; max-width: none; }
  /* a soft fade pinned to the right edge says "there is more" */
  .vm-dia::after {
    content: ""; flex: 0 0 28px; margin-left: -28px; position: sticky; right: 0; pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
  }
}