:root {
    --bg: #f4f6f9; --card: #ffffff; --ink: #1c2733; --muted: #5c6b7a;
    --line: #dde4ec; --accent: #1467d2; --accent-dark: #0e4fa3; --good: #1a7f4e;
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; }
  header { background: linear-gradient(135deg, #0e4fa3, #1467d2); color: #fff; padding: 28px 16px 24px; text-align: center; }
  header h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: .2px; }
  header p { margin: 0 auto; max-width: 620px; opacity: .92; font-size: 14.5px; }
  header a { color: #fff; }
  main { max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-top: 18px; box-shadow: 0 1px 3px rgba(16,34,56,.05); }
  h2 { margin: 0 0 12px; font-size: 18px; }
  p { margin: 0 0 12px; }
  p:last-child { margin-bottom: 0; }
  .muted { color: var(--muted); font-size: 14px; }
  ol, ul { padding-left: 22px; margin: 0 0 12px; }
  li { margin-bottom: 8px; }
  a { color: var(--accent); }
  .btn { display: inline-block; border: 0; border-radius: 8px; padding: 12px 22px; font-size: 15.5px; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; text-decoration: none; }
  .btn:hover { background: var(--accent-dark); }
  table { border-collapse: collapse; width: 100%; font-size: 14px; }
  th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
  th { background: #f6f9fd; white-space: nowrap; width: 34%; }
  .free-note { background: #e5f5ec; color: var(--good); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin-top: 12px; }
  .rel { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
  .langs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin-top: 8px; }
  .crumbs { font-size: 12.5px; margin: 14px 0 0; opacity: .85; }
  .email { white-space: nowrap; }
  .email .obf { color: var(--muted); }
  .email-addr { font-weight: 600; }
  .email-copy { margin-left: 8px; border: 1px solid var(--line); background: #fff;
                color: var(--muted); border-radius: 6px; padding: 2px 8px;
                font-size: 12px; font-family: inherit; cursor: pointer; }
  .email-copy:hover { border-color: var(--accent); color: var(--accent); }
  figure.sample { margin: 0 0 0 18px; float: right; max-width: 45%; }
  /* Arabic pages are served with dir="rtl", so anything that hard-codes a side
     has to mirror: the sample figure floats to the other margin and the
     requirements table's header column aligns to the start edge. */
  [dir="rtl"] figure.sample { margin: 0 18px 0 0; float: left; }
  [dir="rtl"] th, [dir="rtl"] td { text-align: right; }
  [dir="rtl"] ol, [dir="rtl"] ul { padding-left: 0; padding-right: 22px; }
  [dir="rtl"] .crumbs { direction: rtl; }
  figure.sample img { display: block; width: 100%; height: auto; border-radius: 6px; }
  figure.sample figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
  @media (max-width: 560px) {
    figure.sample { float: none; margin: 0 auto 14px; max-width: 200px; }
  }
  /* Both rows share one six-column track so an accepted panel and a rejected one
     are exactly the same size. The accepted row has two figures and leaves the
     remaining four cells blank on purpose. */
  .ex-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
             margin-bottom: 16px; }
  .ex-grid:last-child { margin-bottom: 0; }
  .ex-grid figcaption { font-size: 11.5px; }
  @media (max-width: 900px) { .ex-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
  @media (max-width: 560px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } }
  .ex-grid figure { margin: 0; }
  .ex-grid img { display: block; width: 100%; height: auto; border-radius: 6px; }
  .ex-grid figcaption { font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
  .ex-grid .verdict { display: block; font-weight: 700; font-size: 11.5px; text-transform: uppercase;
                      letter-spacing: .5px; margin-bottom: 2px; }
  .ex-grid .ok .verdict { color: var(--good); }
  .ex-grid .no .verdict { color: #c62828; }
  /* Sitewide footer. Every generated page carries the same link block so link
     equity reaches the hub, the guides and the trust pages from anywhere on the
     site instead of only from the homepage. */
  footer { background: #eef2f7; border-top: 1px solid var(--line); margin-top: 40px;
           padding: 30px 16px 36px; font-size: 13px; color: var(--muted); }
  .ft-wrap { max-width: 980px; margin: 0 auto; display: grid; gap: 22px;
             grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ft-col h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
               letter-spacing: .7px; color: var(--ink); }
  .ft-col ul { list-style: none; padding: 0; margin: 0; }
  .ft-col li { margin-bottom: 5px; }
  .ft-col a { color: var(--muted); text-decoration: none; }
  .ft-col a:hover { color: var(--accent); text-decoration: underline; }
  .ft-note { max-width: 980px; margin: 24px auto 0; padding-top: 16px;
             border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6;
             text-align: center; }