:root {
  --void: #0b0f12;
  --ink: #101519;
  --carbon: #141a1f;
  --line: #2b343c;
  --line-soft: #20282f;
  --paper: #f4f7f8;
  --fog: #9aa6af;
  --dim: #6f7c85;
  --signal: #b8ff5c;
  --signal-ink: #101805;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --danger: #ff6e7a;
  --success: #86f7b3;
  --sans: Inter, "Segoe UI Variable", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --header-height: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); background: var(--void); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The glow and grid sit on one fixed layer behind the page rather than on body with
   background-attachment: fixed, which makes the browser repaint the whole viewport on every
   scroll frame. A fixed element is painted once and moved by the compositor. The page colour
   underneath comes from html. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 4%, rgba(184, 255, 92, 0.09), transparent 28rem),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  will-change: transform;
}

a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; scroll-margin-block: 8px; }
code, kbd { font-family: var(--mono); }

.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 40;
  padding: .65rem 1rem;
  color: #0b0e13;
  background: var(--signal);
}
.skip:focus { top: 1rem; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 80px;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid rgba(42, 52, 66, .8);
  /* Near-opaque instead of a backdrop blur: the blur re-filtered everything under the header on
     every scroll frame for an effect the 88% fill already almost hid. */
  background: rgba(7, 9, 13, .96);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.brand img { width: 40px; height: 40px; }
.brand span { font-weight: 560; letter-spacing: .08em; }
.brand b { font-size: 1rem; letter-spacing: -.02em; }
.brand small {
  display: block;
  color: var(--signal);
  font: 700 .75rem var(--mono);
  letter-spacing: .08em;
}

.topbar nav { display: flex; flex-wrap: wrap; gap: 8px 24px; min-width: 0; }
.topbar nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fog); text-decoration: none; font-size: .875rem; }
.topbar nav a:hover { color: var(--paper); }

.key {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--fog);
  background: var(--carbon);
  cursor: pointer;
}

main { max-width: 1240px; margin: auto; }
.hero {
  display: grid;
  /* minmax(0, …) rather than a bare fr, and min-width: 0 on the child. A grid item defaults
     to min-width: auto, which is its min-content width, so one long unbreakable string --
     a German compound, a market hash name, a URL -- can force the track wider than the
     viewport and give the whole page a horizontal scrollbar. Measured in /en-XA/, where the
     expansion pseudo-locale pushed .hero-copy to 500px inside a 320px viewport. The rest of
     this stylesheet already uses this idiom in nine places; the hero was missed. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: 48px;
  min-height: 640px;
  padding: 64px 24px;
}
.hero-copy { min-width: 0; }
.eyebrow, .kicker {
  color: var(--fog);
  font: 700 .75rem var(--mono);
  letter-spacing: .16em;
  /* Casing belongs here rather than in JavaScript. String.toUpperCase() is locale-blind:
     it mangles the Turkish dotted i and means nothing at all for Arabic, so translated
     text must never be upper-cased in code. */
  text-transform: uppercase;
}
.eyebrow i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: .6rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 15px var(--signal);
}
.hero h1 {
  margin: 1.1rem 0 1.6rem;
  font-size: clamp(3.2rem, 6vw, 6.25rem);
  line-height: .93;
  letter-spacing: -.065em;
}
.lede { max-width: 760px; margin: 24px 0; color: #b5becc; font-size: 1.125rem; }

.section { padding: 3rem 1.5rem; }
.section h2 { margin: .5rem 0 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }
.section-action { margin: 1.5rem 0 0; }

footer {
  display: grid;
  /* Same reason as .hero: a bare fr track takes its minimum from content, so expanded or
     long copy widens the page instead of wrapping. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: start;
  gap: 2rem;
  max-width: 1240px;
  margin: auto;
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--fog);
  font-size: .875rem;
}
footer .brand { color: var(--paper); }
footer p { margin-top: 0; }
footer i { font-style: normal; }
/* nowrap keeps the copyright line intact on desktop, where there is room for it. It is
   released at the narrow breakpoint in responsive.css, where holding it would push the page
   wider than the viewport. */
.footer-legal { text-align: right; white-space: nowrap; min-width: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: .7rem 1rem; min-width: 0; }
.legal-links a { color: var(--signal); }

/* Language selector. Plain links, so it works with scripting off and needs no state. The
   current language is marked by weight and an underline as well as colour, so the marker
   survives a display that renders the accent colour poorly. */
.locale-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line-soft);
}
.locale-switch a {
  color: var(--fog);
  /* A 44px-high target on touch without changing the visual density of the row. */
  padding: .35rem .1rem;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
}
/* A finger needs a bigger target than a pointer does, and the footer stays dense on
   desktop where the extra height would only add whitespace. */
@media (pointer: coarse) {
  .locale-switch { gap: .25rem .9rem; }
  .locale-switch a { min-height: 44px; }
}
.locale-switch a:hover { color: var(--paper); }
.locale-switch a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.locale-switch a[aria-current] {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .28em;
}

/* Chinese, Japanese and Korean (LOCALIZATION.md). System fonts only: a CJK web font weighs
   megabytes and the CSP allows only font-src 'self'. Han characters are shared code points
   drawn differently in each language, so each language names its own fonts, after the Latin
   ones (Latin text looks the same everywhere) and before system-ui (which on a Chinese system
   would draw a Japanese page in Chinese shapes). The monospace stack, which sets the eyebrow
   labels, has no CJK glyphs of its own and gets the same fallback. */
:root:lang(ja) { --cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans JP", "Noto Sans CJK JP"; }
:root:lang(zh-CN) { --cjk: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC"; }
:root:lang(zh-TW) { --cjk: "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC"; }
:root:lang(ko) { --cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR"; }
:root:is(:lang(ja), :lang(zh), :lang(ko)) {
  --sans: Inter, "Segoe UI Variable", var(--cjk), ui-sans-serif, system-ui, sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, var(--cjk), monospace;
}
/* Tracking and very tight leading suit Latin display type; on Han, kana and Hangul they push
   glyphs apart, or into each other and into the next line. */
:is(:lang(ja), :lang(zh), :lang(ko)) :is(h1, h2, h3, .eyebrow, .kicker, .brand span, .brand small,
  .destination-family, .destination-group-heading, .live-card-eyebrow, .live-card-news span,
  .domain-from, .domain-to) { letter-spacing: normal; }
:is(:lang(ja), :lang(zh), :lang(ko)) :is(.hero h1, .section h2, .result h1, .result h2,
  .public-copy h1, .provider-directory > h1) { line-height: 1.2; letter-spacing: normal; }
/* Kinsoku: no line starts with 。 or ー. Korean breaks between words, not syllables. The
   overflow-wrap: anywhere rules elsewhere still break long URLs and item names. */
body:is(:lang(ja), :lang(zh)) { line-height: 1.7; line-break: strict; }
body:lang(ko) { line-height: 1.6; word-break: keep-all; }