/* DoeAsk shared public chrome (QA WEB-04/09/12): one header, one footer, the language picker
   and the not-found page. First-party, no inline styles (strict CSP). Loaded by _site.php pages,
   and by nav.js on the marketing pages (for the language picker only). */
.sx-page {
  --sx-ink: #0e2621; --sx-muted: #5a6b67; --sx-line: #e6ece9; --sx-bg: #f6f8f7; --sx-card: #ffffff; --sx-accent: #0f9e82;
  margin: 0; background: var(--sx-bg); color: var(--sx-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.sx-page *, .sx-top *, .sx-foot *, .sx-lang * { box-sizing: border-box; }

/* ---- header ---- */
.sx-top { background: #fff; border-bottom: 1px solid #e6ece9; position: sticky; top: 0; z-index: 30; }
.sx-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 16px; min-height: 60px; }
.sx-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; text-decoration: none; color: #0e2621; min-height: 44px; flex: none; }
.sx-brand img { width: 28px; height: 28px; display: block; }
.sx-brand b { color: #ee6c0d; }
.sx-section { font-weight: 700; font-size: 15px; color: #0f766e; text-decoration: none; padding: 0 10px; border-left: 1px solid #e6ece9; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.sx-links { display: flex; gap: 4px; margin-left: auto; }
.sx-links a { color: #0e2621; text-decoration: none; font-weight: 600; font-size: 15px; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; }
.sx-links a:hover { background: #f1f5f4; }
.sx-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sx-cta { background: #0f9e82; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 0 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; }
.sx-cta:hover { background: #0c8c72; }
@media (max-width: 720px) {
  .sx-links { display: none; }
  .sx-section { display: none; }
  .sx-actions { margin-left: auto; }
  .sx-cta { padding: 0 14px; font-size: 14px; }
}

/* ---- language picker (a <details> menu: no JavaScript needed) ---- */
.sx-lang { position: relative; }
.sx-lang > summary { list-style: none; }
.sx-lang > summary::-webkit-details-marker { display: none; }
.sx-lang__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid #e6ece9; background: #fff; color: #0e2621; cursor: pointer; font-weight: 700; font-size: 13px; user-select: none; }
.sx-lang__btn:hover, .sx-lang[open] > .sx-lang__btn { border-color: #0f9e82; color: #0f766e; }
.sx-lang__btn:focus-visible { outline: 2px solid #0f9e82; outline-offset: 2px; }
.sx-ic { flex: none; display: block; }
.sx-lang__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: #fff; border: 1px solid #e6ece9; border-radius: 14px; box-shadow: 0 16px 38px rgba(12, 30, 30, .18); padding: 6px; display: flex; flex-direction: column; z-index: 60; }
.sx-lang__i { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #0e2621; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.sx-lang__i:hover { background: #f1f5f4; color: #0f766e; }
.sx-lang__i.is-on { color: #0f766e; background: rgba(15, 158, 130, .1); }
.sx-lang__i.is-on::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #0f9e82; }
/* Marketing nav (site-new.css) — the picker sits before the "Launch today" button. */
.nav__actions .sx-lang { margin-right: 4px; }
.nav__actions .sx-lang__btn { background: transparent; }
.nav__actions .btn { white-space: nowrap; }
@media (max-width: 520px) {
  .nav__actions .sx-lang { margin-right: 0; }
  .nav__actions .sx-lang__cur { display: none; }
  .nav__actions .sx-lang__btn { border-color: transparent; padding: 0; width: 44px; }
  .nav__actions .sx-lang__menu { right: auto; left: 50%; transform: translateX(-50%); }
}
/* QA WEB-04 round 2: on phones the bar holds only logo + CTA + burger, so no language
   (long Russian, Khmer, Spanish CTAs) can push the burger off-screen. The picker moves into
   the burger menu (.sx-mlang, added by nav.js) and stays in the footer row. */
.sx-mlang { display: none; }
@media (max-width: 480px) {
  .nav__actions .sx-lang { display: none; }
  .nav__in { gap: 10px; }
  .nav .brand { flex: none; }
  .nav__actions { gap: 8px; min-width: 0; }
  .nav__actions .nav__burger { flex: none; }
  .nav__actions .btn.sm { white-space: normal; text-align: center; justify-content: center; line-height: 1.15; padding: 6px 13px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .nav__links .sx-mlang { display: block; padding: 12px 4px 4px; }
}
.sx-mlang__h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5a6b67; }
.sx-mlang__row { display: flex; flex-wrap: wrap; gap: 6px; }
.nav__links .sx-mlang__row a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid #e6ece9; border-radius: 999px; font-size: 15px; font-weight: 600; color: #0e2621; text-decoration: none; }
.nav__links .sx-mlang__row a[aria-current] { border-color: #0f9e82; color: #0f766e; background: rgba(15, 158, 130, .1); }
/* An English-only link inside a translated page (WEB-16). */
.sx-enonly { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #5a6b67; border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; line-height: 16px; vertical-align: middle; text-transform: uppercase; }

/* ---- QA WEB-14: 44 px tap targets on the marketing pages (site-new.css) ---- */
.nav .brand { min-height: 44px; display: inline-flex; align-items: center; }
.nav__actions .btn.sm, .nav__links .btn.sm { min-height: 44px; }
.nav__burger { width: 44px; height: 44px; padding: 0; margin: 0 -6px 0 0; align-items: center; justify-content: center; }
.chips .chip, .chip { min-height: 44px; }
.story__link, .ecovisit { min-height: 44px; }
.ecocard h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__cols a { min-height: 44px; display: flex; align-items: center; padding: 0; }
.foot__cols .brand { display: inline-flex; }
.foot__bot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__langs a { min-width: 44px; justify-content: center; }
.lf-way { min-height: 44px; }
.lf-card .btn { min-height: 48px; }   /* round 2: the contact form's Send button (was 39 px) */
@media (max-width: 760px) { .foot__cols { row-gap: 8px; } }

/* ---- QA WEB-18: contact form shows every problem at once, next to its field ---- */
.lf-err { margin: 2px 0 0; color: #c0392b; font-size: 13.5px; font-weight: 600; }
.lf-f input[aria-invalid="true"], .lf-f textarea[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.lf-hint { margin: 0; font-size: 13px; color: #5a6b67; }
.lf-f .lf-hint + .lf-err { margin-top: 0; }

/* ---- footer ---- */
.sx-foot { max-width: 1120px; margin: 40px auto 0; padding: 22px 16px 40px; border-top: 1px solid #e6ece9; color: #5a6b67; font-size: 14px; text-align: center; }
.sx-foot__note { margin: 0 0 10px; }
.sx-foot__links, .sx-foot__langs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; margin: 0 0 6px; }
.sx-foot a { color: #0f766e; text-decoration: none; font-weight: 600; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px; }
.sx-foot a:hover { background: #f1f5f4; }
.sx-foot a[aria-current] { color: #0e2621; }
.sx-foot__langs .sx-ic { color: #5a6b67; margin-right: 4px; }
.sx-foot__bot { margin: 8px 0 0; font-size: 13px; }

/* Marketing footer language row (nav.js adds it to .foot__bot). */
.foot__langs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; margin: 0 0 8px; }
.foot__langs .sx-ic { margin-right: 4px; opacity: .8; }
.foot__langs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px; text-decoration: none; }
.foot__langs a[aria-current] { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* ---- not-found page ---- */
.sx-404 { max-width: 620px; margin: 0 auto; padding: 56px 18px 24px; text-align: center; }
.sx-404__ic { color: #0f9e82; margin: 0 auto 14px; display: block; }
.sx-404 h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 10px; }
.sx-404 p { color: #5a6b67; font-size: 17px; margin: 0 0 26px; }
.sx-404__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid #e6ece9; background: #fff; color: #0e2621; text-decoration: none; font-weight: 700; font-size: 15px; }
.sx-btn:hover { border-color: #0f9e82; color: #0f766e; }
.sx-btn--pri { background: #0f9e82; border-color: #0f9e82; color: #fff; }
.sx-btn--pri:hover { background: #0c8c72; color: #fff; }
@media (max-width: 480px) { .sx-404 { padding-top: 40px; } .sx-404 h1 { font-size: 25px; } .sx-btn { flex: 1 1 100%; } }

/* ---- Demo pill (owner rule: every demo item says so) ---- */
.sx-demo { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(14, 38, 33, .78); border-radius: 999px; padding: 3px 9px; line-height: 1.2; }