/* =========================================================================
   SupplyX pages (/products/supplyx, /privacy, /terms, /accounts).
   Loaded only by those four pages, so the shared stylesheet and its ?v=
   token on the other pages do not change. Uses the site's own variables.
   ========================================================================= */

/* the mark is the SupplyX app's own icon (Americom repo, web/public/favicon.svg) */
/* its own row, like the logo tile on the STOS page; inline, it shared a line
   with the eyebrow label and pushed it out of line */
.sx-chip{display:flex;width:fit-content;align-items:center;gap:12px;margin-bottom:18px}
.sx-chip img{width:52px;height:52px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
/* spans, not <b>/<i>: the Markdown mirror read those as emphasis */
.sx-word{font-size:1.5rem;font-weight:750;color:#fff;letter-spacing:-.01em}
.sx-x{color:#8fb0e3}

/* a table that reads on a phone: it scrolls inside its own box, never the page */
.sx-table-wrap{overflow-x:auto;margin:18px 0 26px;border:1px solid var(--border);border-radius:var(--radius)}
.sx-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.sx-table th,.sx-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.sx-table thead th{background:var(--bg-soft,#f5f7fb);font-weight:650;color:var(--text,#1d2939)}
.sx-table tbody tr:last-child td{border-bottom:0}
.sx-table td:first-child{font-weight:600;color:var(--text,#1d2939);width:42%}

/* the legal pages' own links bar, and the "last updated" line */
.sx-doclinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sx-doclinks a{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:.92rem;text-decoration:none}
.sx-doclinks a:hover{background:rgba(255,255,255,.12)}
.sx-doclinks a[aria-current="page"]{background:#fff;color:var(--ink)}
.sx-updated{color:var(--text-muted);font-size:.95rem;margin-bottom:26px}

/* the platform and standards rows */
.sx-plat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:820px){.sx-plat{grid-template-columns:1fr}}
.sx-plat .card h3{margin-bottom:6px}
.sx-plat .card p{color:var(--text-muted);font-size:.95rem}

/* links inside running text are underlined, not told apart by colour alone
   (WCAG 1.4.1; Lighthouse "link-in-text-block") */
.legal a,.prose a,.card .bullets a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* Arabic hero: the mock panel is centred against the text column, and the
   Arabic web font changes that column's height when it swaps in, which moved
   the panel (CLS 0.08 on desktop). Pinned to the top, it stays put. */
[dir="rtl"] .svc-hero .split{align-items:start}