/* Copyright (c) 2026 Yasvanth Udayakumar. All rights reserved. */
/* Design: "RelixQ Select Geography" (Claude Design project b96fcf44). Tokens are the
   design's own; it was authored with inline styles, which this site's CSP forbids, so
   everything lives here. Fonts are self-hosted (IBM Plex, OFL-1.1): no third-party request. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #e9ecf2; --card: #ffffff; --inset: #f1f4f9;
  --border: #e3e7ee; --border-2: #d4dae4;
  --text: #0f172a; --text-2: #475569; --text-3: #697587;
  --hover: #f1f4f9;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --accent: #6d4aff; --accent-strong: #5a34f0; --accent-weak: rgba(109, 74, 255, .10);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070b13; --card: #0e1726; --inset: #0c1524;
    --border: #1b2738; --border-2: #28384e;
    --text: #e9eef7; --text-2: #a6b4c9; --text-3: #7c8aa3;
    --hover: #15233a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --accent: #8b6bff; --accent-strong: #b9a5ff; --accent-weak: rgba(139, 107, 255, .18);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
::selection { background: var(--accent-weak); }

/* --- brand lockup (the existing RelixQ symbol + wordmark) ------------------------ */
.lockup { display: flex; align-items: center; gap: 12px; position: relative; }
.lockup .mark { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; }
.wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark .name { font: 700 19px var(--sans); letter-spacing: -.015em; }
.wordmark .q { color: #a78bfa; }
.wordmark .tagline { font: 600 8.5px var(--mono); letter-spacing: .18em; color: #7c8aa3; margin-top: 3px; }

/* --- two-panel shell ------------------------------------------------------------- */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }

.brand {
  flex: 1 1 400px; min-width: 320px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: 40px 44px;
  background: linear-gradient(160deg, #0a0f1c 0%, #0d1526 46%, #111c33 100%);
  color: #e9eef7;
  position: relative; overflow: hidden;
}
.brand::after {
  content: ""; position: absolute; right: -120px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 74, 255, .28), transparent 62%);
  pointer-events: none;
}
/* --- world map (pre-rendered; the build tags each site is-live / is-planned) ------ */
/* Bleeds to the panel edges like the design. It takes whatever height is left between the
   lockup and the pitch, and the SVG scales down to fit, so the pitch is never pushed out. */
.map { position: relative; flex: 1 1 0; min-height: 0; margin: -16px -44px 0; display: flex; align-items: center; overflow: hidden; }
.world-map { display: block; width: 100%; height: 100%; max-height: 340px; overflow: hidden; }
.site circle { display: none; }
.site.is-planned .site-planned { display: inline; }
.site.is-live .site-live { display: inline; }
.site.is-live .site-pulse {
  display: inline; opacity: .28;
  transform-box: fill-box; transform-origin: center;
  animation: sitepulse 3.2s ease-in-out infinite;
}
@keyframes sitepulse { 0%, 100% { transform: scale(.47); opacity: .28; } 50% { transform: scale(1); opacity: 0; } }

.pitch { position: relative; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font: 600 10px var(--mono); letter-spacing: .16em; color: #8b6bff; }
.pitch h1 { margin: 0; font: 700 34px/1.14 var(--sans); letter-spacing: -.025em; text-wrap: pretty; }
.pitch p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #a6b4c9; text-wrap: pretty; }
.assurances { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.assurances li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #cbd5e1; }
.assurances .ico { color: #8b6bff; flex-shrink: 0; margin-top: 1px; }

.pick { flex: 1 1 560px; min-width: 320px; display: flex; justify-content: center; padding: 48px 40px 56px; }
.pick-inner { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 22px; animation: fadeup .25s ease both; }
.pick header { display: flex; flex-direction: column; gap: 6px; }
.pick h2 { margin: 0; font: 700 24px var(--sans); letter-spacing: -.02em; }
.pick header p { margin: 0; font-size: 14px; color: var(--text-2); }

/* --- geography cards ------------------------------------------------------------- */
.geos { display: flex; flex-direction: column; gap: 10px; }
.geo {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow);
  color: inherit; font: inherit; text-align: left;
  transition: border-color .12s ease, box-shadow .12s ease;
}
button.geo { cursor: pointer; }
button.geo:hover { background: var(--hover); }
button.geo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.geo[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak), var(--shadow); }
.geo.is-planned { opacity: .6; cursor: not-allowed; }

.radio {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.radio span { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.geo[aria-checked="true"] .radio { border-color: var(--accent); }
.geo[aria-checked="true"] .radio span { background: var(--accent); }

.geo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.geo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geo-name { font-size: 15px; font-weight: 600; color: var(--text); }
.geo-sub { font-size: 13px; color: var(--text-2); }
.badge {
  font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; white-space: nowrap;
  color: var(--text-3); background: var(--inset); border-radius: 5px; padding: 3px 7px;
}

/* --- continue -------------------------------------------------------------------- */
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font: 600 14px var(--sans); box-shadow: var(--shadow);
}
.btn:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.foot { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-3); max-width: 520px; text-wrap: pretty; }
.plain-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* --- single-card pages: the forwarder and the 404 -------------------------------- */
body.solo {
  display: grid; place-items: center; padding: 16px;
  background: linear-gradient(160deg, #0a0f1c 0%, #0d1526 46%, #111c33 100%);
  color: #e9eef7;
}
.solo-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.solo-card .lead { margin: 0; font-size: 15px; color: #a6b4c9; }
.solo-card .foot { color: #7c8aa3; }
.solo-card a { color: #a78bfa; }

/* Side by side: the brand panel is pinned to the viewport and ONLY the geography panel
   scrolls. Without this the whole page scrolled, the brand panel stretched to the height
   of the list, and its copy slid below the fold. Below 960px the panels stack, and on a
   very short window the brand copy would not fit a pinned panel, so both fall back to
   ordinary page scrolling. */
@media (min-width: 960px) and (min-height: 620px) {
  .shell { height: 100vh; height: 100dvh; min-height: 0; flex-wrap: nowrap; overflow: hidden; }
  .brand { overflow: hidden; }
  .pick { overflow-y: auto; overscroll-behavior: contain; }
}

@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pick-inner { animation: none; } .geo { transition: none; } .site.is-live .site-pulse { animation: none; } }
/* The map is decoration. Stacked, it would push the picker a screen further down; on a
   short window the pinned panel has no room for it beside the pitch. */
@media (max-width: 959px), (max-height: 759px) { .map { display: none; } }
@media (max-width: 720px) {
  /* Stacked: the brand panel takes its own height instead of a share of the viewport. */
  .shell { align-content: flex-start; }
  .brand { padding: 28px 24px; gap: 28px; min-width: 0; }
  .pick { min-width: 0; }
  .pitch h1 { font-size: 26px; }
  .pick { padding: 32px 20px 40px; }
}