/* Crossplay — one stylesheet for every public page.

   Constraints that shaped this file:

   - No web fonts, no CDN, no external anything. The pages must load under a
     strict CSP, and a lot of this gets read on a phone sitting next to a
     console on a bad connection. System fonts render instantly and cannot fail.
   - Readability is a conversion feature, not a nicety. Line length is capped
     at ~65 characters, body text is 17px, and contrast is checked in both
     schemes. Text that is hard to read is text that is not read.
   - Dark is the default because this audience runs their servers at night,
     but light is a first-class scheme, not an afterthought. */

:root {
  color-scheme: dark light;

  --bg:        #0a0d11;
  --bg-soft:   #0f1319;
  --panel:     #141920;
  --panel-2:   #191f28;
  --line:      #242c37;
  --line-soft: #1a212a;

  --text:      #eef2f7;
  --text-dim:  #c3ccd8;
  --muted:     #8d9aab;

  --accent:      #5aa9ff;
  --accent-deep: #2f6fb3;
  --accent-ink:  #04121f;

  --ok:   #4ad07f;
  --bad:  #ff6b6b;
  --warn: #ffc453;

  --radius:    14px;
  --radius-sm: 10px;

  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #fbfcfe;
    --bg-soft:   #f2f6fa;
    --panel:     #ffffff;
    --panel-2:   #f7fafd;
    --line:      #e0e7ef;
    --line-soft: #edf1f6;

    --text:      #0d1319;
    --text-dim:  #33404f;
    --muted:     #5a6779;

    --accent:      #1263cf;
    --accent-deep: #0d4fa8;
    --accent-ink:  #ffffff;

    --ok:   #157f4a;
    --bad:  #c2352f;
    --warn: #8a5b00;

    --shadow: 0 1px 2px rgba(16,32,54,.06), 0 10px 28px -16px rgba(16,32,54,.28);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background-color: transparent;
  color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One soft light behind the top of the page. Enough that the page does not
   read as a plain document; not so much that it competes with the words. */
body::marker { content: none; }

.glow {
  position: absolute; inset: 0 0 auto 0; height: 640px; pointer-events: none;
  background:
    radial-gradient(760px 340px at 50% -140px, rgba(90,169,255,.16), transparent 72%),
    radial-gradient(560px 260px at 82% -60px, rgba(74,208,127,.08), transparent 70%);
  z-index: 0;
}

.wrap { max-width: 820px; margin: 0 auto; padding: 0 1.35rem; }
.wrap, header, footer { position: relative; z-index: 1; }

/* Keyboard users must be able to see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 50;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ header */

header {
  display: flex; justify-content: space-between; align-items: center;
  gap: .9rem; flex-wrap: wrap;
  max-width: 820px; margin: 0 auto; padding: 1.35rem;
}
.brandblock { display: flex; flex-direction: column; gap: .1rem; }
.brand {
  font-weight: 700; font-size: 1.6rem; letter-spacing: -.035em;
  text-decoration: none; color: var(--text);
  display: inline-flex; align-items: center; gap: .7rem; line-height: 1.1;
}
/* Two overlapping capsules: two platforms meeting. Cheaper than a logo file,
   and it cannot fail to load. */
.brand::before {
  content: ""; width: 1.45rem; height: .52rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 45%, var(--ok) 55%);
  flex: none;
}
.tagline { margin: 0; color: var(--muted); font-size: .92rem; }

nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
nav a {
  color: var(--muted); text-decoration: none; font-size: .93rem;
  transition: color .15s ease;
}
nav a:hover { color: var(--text); }
nav a.navcta {
  color: var(--text); border: 1px solid var(--line);
  padding: .38rem .8rem; border-radius: 999px; background: var(--panel);
}
nav a.navcta:hover { border-color: var(--accent-deep); }

@media (max-width: 620px) {
  .brand { font-size: 1.3rem; }
  .tagline { font-size: .85rem; }
  nav { gap: .85rem; }
  nav a { font-size: .88rem; }
}

/* -------------------------------------------------------------------- type */

h1 {
  font-size: clamp(2rem, 5.6vw, 2.85rem); line-height: 1.08;
  letter-spacing: -.04em; font-weight: 760; margin: 1.4rem 0 .85rem;
  max-width: 17ch; text-wrap: balance;
}
h2 {
  font-size: clamp(1.3rem, 3vw, 1.55rem); letter-spacing: -.025em;
  line-height: 1.2; margin: 0 0 .7rem; text-wrap: balance;
}
h3 { font-size: 1.02rem; line-height: 1.35; margin: 0 0 .45rem; letter-spacing: -.01em; }

p { margin: 0 0 1rem; max-width: 65ch; }
.lead {
  font-size: 1.16rem; line-height: 1.6; color: var(--text-dim);
  max-width: 56ch; margin: 0 0 1.5rem;
}
.muted { color: var(--muted); }
.small { font-size: .87rem; }
a { color: var(--accent); text-underline-offset: 2px; }

section { margin: 4.5rem 0; scroll-margin-top: 1.5rem; }
section > h2 + .lead { margin-top: -.1rem; }

/* A short label above a heading. Gives a scanner a way to tell sections apart
   without reading them, which is how most of this page is actually consumed. */
.eyebrow {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 700; color: var(--accent); margin: 0 0 .5rem;
}

/* -------------------------------------------------------------------- hero */

.hero { margin: 1.5rem 0 0; }
.hero .lead { font-size: 1.2rem; }

.hero-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
  margin: 0 0 1rem;
}

.btn {
  display: inline-block; padding: .85rem 1.5rem; font: inherit;
  font-weight: 650; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: filter .15s ease, transform .05s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: wait; }
.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent-deep); }

.reassure {
  margin: 0; font-size: .89rem; color: var(--muted);
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.reassure span { display: inline-flex; align-items: center; gap: .38rem; }
.reassure span::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 999px;
  background: var(--ok); flex: none;
}

/* --------------------------------------------------------------- the check */

.check {
  padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  box-shadow: var(--shadow);
  margin: 2.25rem 0;
}
.check h2 { font-size: 1.2rem; }
.check .lead { font-size: 1rem; margin-bottom: 0; }

form { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
input, select {
  min-width: 0; padding: .85rem .95rem; font: inherit;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input { flex: 1 1 15rem; }
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90,169,255,.2);
}
input.port { flex: 0 0 7.5rem; }
::placeholder { color: var(--muted); opacity: 1; }

.field-note { margin: .7rem 0 0; font-size: .86rem; color: var(--muted); }

#out { margin-top: 1.1rem; }
.verdict { font-weight: 680; margin: 0 0 .4rem; font-size: 1.06rem; }
.verdict.ok  { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.label {
  font-size: .73rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); margin: 1.1rem 0 .3rem; font-weight: 700;
}
ul.reasons { margin: .4rem 0 0; padding-left: 1.2rem; }
ul.reasons li { margin: .4rem 0; }
.host {
  border-left: 3px solid var(--warn); padding-left: .85rem;
  list-style: none; margin-left: -1.2rem;
}
.hidden { display: none; }

/* ------------------------------------------------------------------- cards */

.grid {
  display: grid; gap: 1rem; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 1.2rem 1.35rem;
  transition: border-color .15s ease, transform .15s ease;
}
.grid .card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card p + p { margin-top: .7rem; }

/* ------------------------------------------------------------------- steps */

.steps { list-style: none; counter-reset: s; padding: 0; margin: 1.4rem 0 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 1.6rem 3.1rem; margin: 0;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: -.1rem;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  display: grid; place-items: center;
  font-size: .92rem; font-weight: 700;
  background: var(--panel-2); color: var(--accent);
  border: 1px solid var(--line);
}
/* The line joining the steps, so they read as a sequence rather than a list. */
.steps li::after {
  content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: .35rem;
  width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps strong { display: block; color: var(--text); font-weight: 650; margin-bottom: .2rem; }
.steps p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ----------------------------------------------------------------- pricing */

.currency-pick {
  display: flex; align-items: center; gap: .6rem;
  color: var(--muted); font-size: .93rem; margin: 0 0 1.2rem;
}
.currency-pick select { padding: .38rem .55rem; background: var(--panel); }

.price .amount {
  font-size: 2rem; font-weight: 740; letter-spacing: -.03em;
  color: var(--text); margin: .35rem 0 .2rem; line-height: 1.1;
}
.price .amount span {
  font-size: .82rem; font-weight: 400; color: var(--muted); letter-spacing: 0;
}
/* The same price said a second way. A monthly figure is judged against other
   monthly bills; a daily one is judged against nothing, which is the point. */
.price .perday { font-size: .88rem; color: var(--muted); margin: 0 0 1rem; }
.price ul { margin: 0; padding-left: 1.15rem; color: var(--text-dim); font-size: .95rem; }
.price li { margin: .4rem 0; }
.price li::marker { color: var(--accent-deep); }

.price-main { border-color: var(--accent-deep); }
.pill {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); border: 1px solid var(--accent-deep);
  border-radius: 999px; padding: .16rem .6rem; margin-bottom: .4rem;
}

/* --------------------------------------------------------------- guarantee */

.guarantee {
  border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel); padding: 1.3rem 1.4rem; margin: 1.6rem 0 0;
}
.guarantee h3 { color: var(--ok); }
.guarantee ul { margin: .6rem 0 0; padding-left: 1.15rem; color: var(--text-dim); font-size: .95rem; }
.guarantee li { margin: .35rem 0; }

/* Footnotes under a block. Classes rather than style="" attributes, so the
   pages stay servable under a style-src CSP with no 'unsafe-inline'. */
.note-tight { margin: .8rem 0 0; }
.note-loose { margin-top: 1rem; }

/* ------------------------------------------------------------------ candid */

/* Saying the weak part out loud, in the same weight as everything else.
   Boxing it in red would make it an alarm; hiding it at the bottom in grey
   would make it a disclaimer. It is neither: it is a fact a buyer needs. */
.candid {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-soft); padding: 1.3rem 1.4rem;
}
.candid p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------- faq */

.faq { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1rem .2rem; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between;
  gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem;
  line-height: 1; flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq .answer { padding: 0 .2rem 1.1rem; color: var(--muted); }
.faq .answer p { font-size: .96rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- close */

.close {
  text-align: center; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  padding: 2.2rem 1.5rem; box-shadow: var(--shadow);
}
.close h2 { max-width: 22ch; margin: 0 auto .6rem; }
.close p { margin-left: auto; margin-right: auto; }
.close .hero-actions { justify-content: center; }
.close .reassure { justify-content: center; }

/* ------------------------------------------------------------------- legal */

.legal { padding-bottom: 1rem; }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); max-width: 24ch; }
.legal h2 { font-size: 1.18rem; margin-top: 2.6rem; }
.legal h3 { margin-top: 1.5rem; color: var(--text-dim); }
.legal section { margin: 0; }
.legal p, .legal li { max-width: 68ch; }
.legal ol, .legal ul { padding-left: 1.25rem; color: var(--text-dim); }
.legal li { margin: .45rem 0; }
.updated { color: var(--muted); font-size: .9rem; margin-top: -.35rem; }

/* A plain-language restatement beside each clause. The binding text stays
   exactly as written; this is the version people actually read. */
.plain {
  border-left: 2px solid var(--line); padding-left: .9rem;
  margin: .75rem 0 1.2rem; color: var(--muted); font-size: .93rem;
}
.plain strong { color: var(--text-dim); font-weight: 650; }

.toc {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 1.1rem 1.3rem; margin: 1.8rem 0 0;
}
.toc h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 0 0 .6rem; }
.toc ol { margin: 0; padding-left: 1.15rem; columns: 2; column-gap: 2rem; }
.toc li { margin: .3rem 0; break-inside: avoid; }
.toc a { color: var(--text-dim); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

.notice {
  border-left: 3px solid var(--warn); background: var(--bg-soft);
  padding: .9rem 1.05rem; margin: 1.5rem 0; border-radius: 0 10px 10px 0;
  font-size: .95rem;
}

code {
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  padding: .08rem .35rem; border-radius: 5px; font-size: .9em;
}

/* ------------------------------------------------------------------ footer */

footer {
  border-top: 1px solid var(--line); margin-top: 5rem;
  padding: 2rem 1.35rem 3.5rem;
}
footer .cols {
  display: grid; gap: 1.5rem; margin-bottom: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
footer h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: .6rem;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: .35rem 0; }
footer a { color: var(--text-dim); text-decoration: none; font-size: .93rem; }
footer a:hover { color: var(--accent); text-decoration: underline; }
footer p { margin: .4rem 0; }

/* -------------------------------------------------------------- the margins

   A world profile down each margin: the grass line at the top of the page,
   dirt for as far as the page runs, and bedrock at the floor.

   Three images rather than one, because the page has no fixed height. A single
   tall picture would either stretch (destroying the pixel grid) or repeat the
   grass line every screenful. So: the top piece once at the top, the bottom
   piece once at the bottom, and a dirt tile repeating behind both to cover
   whatever distance is left.

   image-rendering: pixelated is the whole point. These are 8-pixel-wide images
   blown up 20x; without it the browser would smooth them into mud, in the
   literal sense. Every size below is an exact multiple of 8 so a source pixel
   always lands on a whole number of screen pixels. */

body::before,
body::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 160px;   /* 8 source px x 20 */
  background-image: url("img/edge-top.png"), url("img/edge-bottom.png"), url("img/edge-dirt.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: top left, bottom left, top left;
  background-size: 160px auto, 160px auto, 160px auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;   /* Firefox spells it differently */
  image-rendering: pixelated;     /* re-stated so Chrome wins the cascade */
  /* NOT z-index: -1. A negative z-index on a pseudo-element of BODY paints it
     behind body's own background; the background lives on <html> and body is
     transparent, so the strips sit at the natural level with content above. */
  pointer-events: none; user-select: none;
  opacity: .85;
}
body::before { left: 0; }
body::after  { right: 0; }

/* The content column is 820px plus padding. Below this there is no room for
   decoration that does not crowd the words, so it goes away rather than being
   squeezed to a stripe. */
@media (max-width: 1220px) {
  body::before, body::after { display: none; }
}