/* Same direction as the product UI and the banner: diagnostic instrument.
   Condensed uppercase for structure, mono for every number, tinted near-black
   ground, graph-paper grid, one amber signal. The public site is the brand's
   front door, so it cannot look like a different product to the tool.

   The display webfont is loaded via <link rel=preconnect>+<link rel=stylesheet>
   in the document head, NOT @import here: an @import inside a stylesheet is
   discovered late and blocks rendering twice over. Cutting that corner on a
   site that scores other people's web presence would be hard to defend. */

:root{
  --bg:#111820; --line:#25313f; --ink:#f5efe3; --ink-2:#9aa9ba; --ink-3:#5f6d7c;
  --amber:#f5a524; --blue:#2f6ad4; --red:#c8615a;
  --display:"Oswald","Bahnschrift","Arial Narrow",Impact,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{font:16px/1.6 var(--sans);color:var(--ink);background:var(--bg);margin:0;padding:0;
     -webkit-font-smoothing:antialiased}
/* Fixed backdrop lifted from the banner. Very low alpha so it never competes
   with a number, and fixed so data scrolls over it. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 52% at 84% 94%, rgba(245,165,36,.13), transparent 68%),
    linear-gradient(to right, rgba(150,180,210,.055) 1px, transparent 1px) 0 0/112px 112px,
    linear-gradient(to bottom, rgba(150,180,210,.055) 1px, transparent 1px) 0 0/112px 112px,
    linear-gradient(to right, rgba(150,180,210,.028) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(to bottom, rgba(150,180,210,.028) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg)}
.wrap{max-width:960px;margin:0 auto;padding:32px 18px 64px}
header.site{border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:36px;
  background:linear-gradient(to bottom,rgba(17,24,32,.92),rgba(17,24,32,.72))}
header.site .wrap{padding:0 18px}
header.site a{color:var(--ink);text-decoration:none;font-family:var(--display);
  font-weight:600;font-size:21px;letter-spacing:.06em;text-transform:uppercase}
header.site span{color:var(--ink-3);font-size:12px;display:block;margin-top:3px;
  font-family:var(--display);letter-spacing:.16em;text-transform:uppercase}
h1{font-family:var(--display);font-weight:600;font-size:38px;line-height:1.05;
   letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px}
h2{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.16em;
   text-transform:uppercase;color:var(--ink-2);margin:0 0 16px}
.sub{color:var(--ink-2);font-size:14px;margin:0 0 30px;max-width:74ch}
.card{border-top:1px solid var(--line);padding:26px 0 4px;margin-bottom:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--display);font-weight:500;font-size:12px;
   text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
   border-bottom:1px solid var(--line);padding:0 10px 10px}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.022)}
.rank{color:var(--ink-3);width:52px;font-family:var(--mono);font-size:17px;
      font-variant-numeric:tabular-nums}
tr.lead .rank{color:var(--amber)}
.score{font-family:var(--mono);font-size:19px;font-variant-numeric:tabular-nums;
       white-space:nowrap;width:190px}
.bar{height:8px;background:rgba(150,180,210,.10);border-radius:4px;margin-top:6px;min-width:90px}
.bar span{display:block;height:100%;background:var(--blue);border-radius:4px}
.bar.top span{background:var(--amber);box-shadow:0 0 14px rgba(245,165,36,.45)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13px}
.muted{color:var(--ink-3);font-size:13px}
.flag{display:inline-block;color:var(--amber);border:1px solid currentColor;border-radius:2px;
      padding:1px 6px;font-family:var(--mono);font-size:10px;margin-right:5px;white-space:nowrap}
.flag.no{color:var(--red)}
ul{padding-left:18px}li{margin-bottom:9px}
a{color:var(--amber)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tile{display:block;border:1px solid var(--line);border-radius:3px;padding:16px 18px;
      text-decoration:none;color:inherit;background:rgba(255,255,255,.018)}
.tile:hover{border-color:var(--amber);background:rgba(255,255,255,.035)}
.tile b{display:block;font-family:var(--display);font-weight:500;font-size:17px;
        letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
footer{color:var(--ink-3);font-size:12px;padding:34px 18px;line-height:1.8;
       border-top:1px solid var(--line);max-width:74ch;margin:40px auto 0}
@media(max-width:640px){.wrap{padding:20px 14px 48px}h1{font-size:27px}
  table{font-size:13px}td,th{padding:9px 6px}.score{width:120px}
  .hide-sm{display:none}}