/* Arkade — shared chrome.

   Every page links this. It exists because the homepage and the shop each carried their own copy
   of the nav rules, drifted apart, and the header visibly jumped when you moved between them.
   Anything that appears on more than one page belongs here; page-specific layout stays inline in
   that page.

   DESIGN NOTES
   ------------
   The brand art is bright daylight — green canopy, grey mountains, and one cold cyan obelisk
   burning through the middle of it. That contrast is the whole identity, so the site is built the
   same way: warm-neutral stone, with cyan used sparingly enough that it still means something
   when it appears. Deliberately not navy-on-navy, which is where every other boosted-cluster
   site lands.

   Three typefaces, each with a job. Archivo (wide, heavy) is display only. IBM Plex Sans is for
   reading. IBM Plex Mono carries every NUMBER on the site — rates, player counts, timers, map
   codes. That last one matters most: ARK players spend all day reading stat numbers and
   coordinates, so setting data in mono with tabular figures makes the site read like an
   instrument panel rather than a landing page, and it is why columns of numbers actually line up.

   Single theme, on purpose. This is a game server at night; there is no light-mode version of
   that. Every colour is still painted explicitly rather than inherited from the host.

   22 Sept 2026: Jordan asked for the whole site to look more modern, with vibrant colour like
   the shop. So the single-cyan rule above now covers the chrome only (nav, footer, focus rings,
   the hex texture). Inside the page, colour comes from the shop's own palette through the lit
   card, the spectrum gradient and the aurora hero -- "Design system v2" at the end of this file. */

/* Imported rather than linked so pages pick up the faces without each one repeating the tag.
   Every stack below names a real fallback, so text is readable before this arrives. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  /* Ground and surfaces. Faintly cool rather than blue — a true neutral reads as cheap on a
     screen this dark, and a saturated navy reads as a template. */
  --ink: #0a0c0e;
  --stone: #12161a;
  --stone-2: #191e24;
  --stone-3: #212830;

  /* Hairlines, as white at low alpha rather than fixed greys, so one value sits correctly on
     every surface level instead of needing a variable per level. */
  --edge: rgba(255, 255, 255, 0.07);
  --edge-strong: rgba(255, 255, 255, 0.13);

  --bone: #e9edf0;
  --ash: #8b959e;
  /* Lightened from a darker grey after measuring it: at #5b656e the small mono labels — unit
     names under the countdown, column headers, "2m ago" — came out at 3.1:1, under AA. These
     carry meaning, so they have to be readable, not just present. */
  --ash-dim: #7a848d;

  /* The obelisk. One accent, spent on emphasis and interaction and nothing else. */
  --ion: #38c9f0;
  --ion-bright: #7fe3ff;
  --ion-deep: #1b8fb4;
  --ion-wash: rgba(56, 201, 240, 0.1);
  --ion-glow: rgba(56, 201, 240, 0.45);
  --ion-glow-soft: rgba(56, 201, 240, 0.16);

  /* The panel-corner notch every clipped surface below cuts to. One size, so a card, a nav pill
     and a hero panel all read as the same material. */
  --notch: 18px;

  /* Semantic only — these say what state something is in, they are never decoration. */
  --live: #46d28a;
  --alert: #ff7a45;
  --down: #6b7680;

  /* Spacing scale. Everything is a step on this, which is most of what holds the rhythm together
     across four pages built at different times. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --shell: 1240px;
  --gutter: clamp(18px, 5vw, 56px);

  /* Corners are nearly square. A 14px radius on everything is the loudest tell of a generated
     layout, and softness fights the subject. */
  --radius: 4px;
  --radius-lg: 8px;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The UA sheet's [hidden] rule is a bare `display: none`, so any class that sets display —
   .btn is inline-flex — silently outranks it and the element stays on screen with its hidden
   attribute set. */
[hidden] { display: none !important; }

/* A square grid reads as generic graph paper -- nothing about it says ARK. The obelisks, Tek
   armour and Tek structures are all built from hexagonal plating, so that's the texture here: a
   honeycomb wireframe (one SVG tile, hand-traced so it repeats seamlessly -- three hexagons per
   tile, one whole and two split at the left/right edges so the halves rejoin across the tile
   boundary), plus a soft glow near the top of the page standing in for the obelisk itself, per
   this file's own brand note above ("one cold cyan obelisk burning through the middle of it").
   Fixed so the texture doesn't scroll away and thin the site out to plain black past the first
   screen; the glow stays with the page (scroll) since it belongs to the top of the content, not
   the viewport. */
body {
  margin: 0;
  background-color: var(--ink);
  background-image:
    radial-gradient(900px 560px at 50% -8%, rgba(56, 201, 240, 0.12), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.6' height='72' viewBox='0 0 41.6 72'%3E%3Cpath d='M20.8 0L41.6 12L41.6 36L20.8 48L0 36L0 12Z M0 36L20.8 48L20.8 72L0 84L-20.8 72L-20.8 48Z M41.6 36L62.4 48L62.4 72L41.6 84L20.8 72L20.8 48Z' fill='none' stroke='rgba(56,201,240,0.16)' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: auto, 41.6px 72px;
  background-attachment: scroll, fixed;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }

/* Every number on the site. Tabular figures so a column of player counts or prices lines up
   instead of shimmering as the values change. */
.mono, .num, .stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--font-mono);
  background: var(--stone);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 1px 6px;
  color: var(--ion);
  font-size: 0.9em;
}

::selection { background: var(--ion); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ion);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--ion-glow-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.72em 1.25em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease),
              color 0.14s var(--ease), transform 0.14s var(--ease);
}

/* No lift on hover. A button that jumps under the cursor is the other generated-design tell, and
   at this size it also nudges the label out from under the pointer. Press gets the movement
   instead, where it reads as the control actually depressing. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--ion) 0%, var(--ion-deep) 100%);
  color: #04141b;
  box-shadow: 0 0 0 1px rgba(56, 201, 240, 0.3), 0 6px 20px -8px var(--ion-glow);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--ion-bright) 0%, var(--ion) 100%);
  box-shadow: 0 0 0 1px rgba(127, 227, 255, 0.5), 0 8px 26px -6px var(--ion-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: rgba(56, 201, 240, 0.22);
}
.btn-ghost:hover:not(:disabled) {
  border-color: rgba(56, 201, 240, 0.5);
  background: var(--ion-wash);
  box-shadow: 0 0 16px -6px var(--ion-glow-soft);
}

/* ---------- Nav ---------- */

/* Deliberately NOT justify-content: space-between — that centres the tabs against whatever else
   is in the bar, and the shop's right-hand side grows when a player signs in, which would slide
   the tabs sideways relative to every other page. Packing left after the brand and pushing the
   actions right with margin-left:auto is stable whatever the bar contains. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--gutter);
  height: 62px;
  background: rgba(10, 12, 14, 0.78);
  backdrop-filter: blur(16px) saturate(150%);
}

/* A lit horizon line rather than a hairline -- the nav is sticky and on screen at every scroll
   position on every page, so this one edge carries most of the "instrument panel" identity: it is
   the single thing a visitor sees the whole time they are on the site, not just at rest on a
   panel they may never scroll to. */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--ion-deep) 12%, var(--ion) 50%, var(--ion-deep) 88%, transparent);
  box-shadow: 0 0 14px 0 var(--ion-glow-soft), 0 1px 3px 0 var(--ion-glow-soft);
}

.nav > .nav-cta { margin-left: auto; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: 0 0 auto; }
.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  box-shadow: 0 0 0 1px rgba(56, 201, 240, 0.18), 0 0 10px -2px var(--ion-glow-soft);
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.brand-word .accent { color: var(--ion); }

/* The logo art (22 Sept 2026) replaces the crest + wordmark pair in the nav and footer: it
   carries the name itself. Height-led so the file's own aspect ratio sets the width. */
.brand picture { display: flex; }
.brand .brand-logo {
  width: auto;
  height: 50px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(56, 201, 240, 0.28));
}
footer .brand .brand-logo { height: 56px; }
@media (max-width: 720px) { .brand .brand-logo { height: 40px; } }

/* Holographic wordmark accent -- a shimmering sweep through the site's own cyan family (never a
   rainbow: "same colour scheme" was explicit), the same idea as Discord's holo role colour. One
   accent spent on one brand moment, not scattered onto every heading -- see the design note above
   this block on why the palette stays to a single hue. Reduced-motion gets the plain static
   --ion colour: the shimmer is decoration, the readable colour underneath is the fallback. */
.holo {
  background-image: linear-gradient(
    100deg,
    var(--ion-deep) 0%,
    var(--ion) 22%,
    #bdf3ff 42%,
    var(--ion) 58%,
    var(--ion-deep) 78%,
    var(--ion) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-sweep 7s ease-in-out infinite;
}
@keyframes holo-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .holo {
    animation: none;
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--ion);
  }
}

/* Underline-on-current rather than a filled pill. The pill competes with the primary button for
   attention in a 62px bar; a 2px rule says the same thing and stays quiet. */
.tabs { display: flex; gap: var(--s1); }
.tab {
  position: relative;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ash);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}
.tab:hover { color: var(--bone); background: rgba(255, 255, 255, 0.04); }
.tab[aria-current="page"] { color: var(--bone); }
.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--ion-deep), var(--ion-bright), var(--ion-deep));
  box-shadow: 0 0 8px 0 var(--ion-glow-soft);
}

.nav-right { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }

/* ---------- Shared surfaces ---------- */

/* A cut corner, a gradient hairline running full-strength cyan the whole way round, an ambient
   glow so the panel visibly sits off the page rather than just being outlined, and two HUD ticks
   on the sharp corners diagonally opposite the notch -- the Tek-console motif, built from the same
   stone/ion palette rather than a new one. The notch is cut with clip-path rather than a rotated
   square so the gradient outline (the double-background padding-box/border-box trick below) can
   follow the exact same polygon: border-radius alone cannot take a gradient, and a bordered
   pseudo-element clipped to the same polygon needs a mask trick this codebase would rather not
   depend on for a 1px line. */
.panel {
  position: relative;
  border: 1px solid transparent;
  border-radius: 0;
  clip-path: polygon(
    0 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))
  );
  background:
    linear-gradient(var(--stone), var(--stone)) padding-box,
    linear-gradient(150deg, var(--ion) 0%, var(--ion-deep) 45%, var(--ion) 100%) border-box;
  box-shadow: 0 0 0 1px rgba(56, 201, 240, 0.05), 0 18px 40px -20px var(--ion-glow-soft),
              0 0 26px -14px var(--ion-glow);
}

/* Positioned at 0/0 rather than bled out to -1px: the panel clips its own contents (including
   generated content) to the notched polygon above, so anything placed outside that 0-100% box is
   clipped away and never paints. drop-shadow (not box-shadow) because these are border-only
   shapes with a transparent centre -- box-shadow would just glow the bounding box, not the L. */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
  filter: drop-shadow(0 0 5px var(--ion-glow));
}
.panel::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--ion-bright);
  border-left: 2px solid var(--ion-bright);
}
.panel::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--ion-bright);
  border-right: 2px solid var(--ion-bright);
}

/* Section labels. Mono, because on this site every small caps-label is a field name for the data
   underneath it, and mono makes that relationship visible rather than decorative. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ion);
  margin-bottom: var(--s3);
}
/* A HUD tick rather than a plain label -- the small mark a targeting readout puts before a field
   name. */
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ion));
}

.page-head {
  padding: clamp(36px, 6vw, 72px) var(--gutter) var(--s5);
  max-width: var(--shell);
  margin: 0 auto;
}
.page-head h1 { font-size: clamp(34px, 5.6vw, 56px); }
.page-head p.lede {
  color: var(--ash);
  max-width: 62ch;
  margin-top: var(--s4);
  font-size: 16.5px;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.status-dot.online { background: var(--live); box-shadow: 0 0 0 3px rgba(70, 210, 138, 0.16); }
.status-dot.offline { background: var(--down); }

.msg { color: var(--ash); padding: var(--s8) 0; text-align: center; }

/* Visible to a screen reader, not to the eye. Used where a column needs a name for the table to
   be navigable but the name would be noise on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--edge);
  margin-top: var(--s9);
  padding: var(--s7) var(--gutter) var(--s8);
}
footer .footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: center;
  justify-content: space-between;
}
footer p, footer .disclaimer {
  max-width: var(--shell);
  margin: var(--s5) auto 0;
  color: var(--ash-dim);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  /* The bar wraps to two rows on a phone and it is sticky, so every pixel here is permanently
     off the top of the screen. Measured at 111px before tightening -- 17% of a 667px phone --
     which is more than a nav is worth. */
  .nav { flex-wrap: wrap; height: auto; padding-block: var(--s2); row-gap: var(--s1); }
  .nav .tab { padding: 5px 10px; }
  /* The tab row scrolls rather than wrapping on a narrow screen, but a visible scrollbar under a
     62px nav is louder than the tabs themselves. */
  .tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1; text-align: center; white-space: nowrap; }
  .tab[aria-current="page"]::after { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================================
   Design system v2 (22 Sept 2026)

   The homepage redesign's parts, moved here once the other pages adopted them. Every colour is
   one the shop already used; the chrome above (nav, footer, focus rings, hex texture) keeps its
   single cyan, and these carry the colour inside the page.
   ========================================================================================== */

:root {
  --spectrum: linear-gradient(95deg, #38c9f0 0%, #a97ef0 38%, #ff6ba8 68%, #ffd166 100%);
  /* The fill behind a lit card's gradient outline. Cards over the aurora set a translucent one. */
  --fill: var(--stone);
}

/* One gradient phrase per heading, not whole headings -- emphasis stops meaning anything once
   everything shimmers. */
.grad {
  background: var(--spectrum);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectrum-sweep 10s ease-in-out infinite;
}
@keyframes spectrum-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- The lit card ----------

   The shop's card, generalised: a gradient outline in the card's own --accent (padding-box /
   border-box double background, since a plain border cannot take a gradient), a colour rail
   along the top, and a soft wash of the same colour. Set --accent inline per card. */
.lit {
  --accent: var(--ion);
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 40%, var(--edge-strong)) 50%, var(--accent) 100%) border-box;
  box-shadow: 0 0 26px -14px color-mix(in srgb, var(--accent) 75%, transparent);
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.lit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: var(--accent);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none;
}
.lit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
}
/* Zero specificity via :where(), so any page rule that positions a child (a badge, a close
   button) still wins over this. */
:where(.lit) > * { position: relative; z-index: 1; }
a.lit { color: inherit; text-decoration: none; display: block; }
a.lit:hover, .lit.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -16px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* ---------- Buttons ---------- */

.btn-lg { font-size: 15px; padding: 0.92em 1.6em; }

.btn-spectrum {
  background: var(--spectrum);
  background-size: 170% 100%;
  background-position: 0% 50%;
  color: #0b0d12;
  font-weight: 700;
  box-shadow: 0 10px 30px -10px rgba(169, 126, 240, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background-position 0.45s var(--ease), box-shadow 0.2s var(--ease), transform 0.14s var(--ease);
}
.btn-spectrum:hover:not(:disabled) {
  background-position: 100% 50%;
  box-shadow: 0 14px 38px -10px rgba(255, 107, 168, 0.75);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  color: var(--bone);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}
.btn-glass:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }

/* Tinted with whatever --accent the surrounding card sets, for a row of cards that each want a
   button without eight spectrum buttons shouting at once. */
.btn-tint {
  color: var(--bone);
  background: color-mix(in srgb, var(--accent, var(--ion)) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--ion)) 55%, transparent);
}
.btn-tint:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, var(--ion)) 30%, transparent);
  border-color: var(--accent, var(--ion));
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent, var(--ion)) 80%, transparent);
}

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

   The homepage's lit sky, for the top of every page: four slow lights in the palette and a grid
   floor running to the horizon. Wrap the page's existing header in .page-hero and put .hero-bg
   first inside it; the header keeps its own width and padding. */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero > .page-head { padding-bottom: var(--s8); }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Faded out at the foot so the lights dissolve into the page rather than stopping at an edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* Radial gradients rather than blurred boxes: they are already soft, and a large filter:blur
   repainting every frame is what makes a hero like this stutter on a laptop. */
.aurora span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.aurora .a1 { width: 64vmax; height: 64vmax; left: -22vmax; top: -34vmax; background: radial-gradient(circle, rgba(56, 201, 240, 0.42), transparent 62%); }
.aurora .a2 { width: 58vmax; height: 58vmax; right: -24vmax; top: -26vmax; background: radial-gradient(circle, rgba(169, 126, 240, 0.4), transparent 62%); animation-duration: 32s; }
.aurora .a3 { width: 46vmax; height: 46vmax; left: 28%; top: 6%; background: radial-gradient(circle, rgba(255, 107, 168, 0.24), transparent 62%); animation-duration: 38s; animation-direction: alternate-reverse; }
.aurora .a4 { width: 34vmax; height: 34vmax; right: 4%; bottom: -16vmax; background: radial-gradient(circle, rgba(255, 209, 102, 0.18), transparent 62%); animation-duration: 29s; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
  100% { transform: translate3d(-3vw, 5vh, 0) scale(0.95); }
}

.hero-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 52%;
  background-image:
    linear-gradient(rgba(56, 201, 240, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 126, 240, 0.26) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  animation: floor-run 4s linear infinite;
  opacity: 0.65;
}
@keyframes floor-run { to { background-position: 0 64px, 0 0; } }

/* ---------- Section heads and stat tiles ---------- */

.section-head { max-width: 800px; margin-bottom: var(--s7); }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); }
.section-head p { color: var(--ash); margin-top: var(--s4); font-size: 16.5px; max-width: 62ch; }
.section-head .eyebrow { color: var(--accent, var(--ion)); }
.section-head .eyebrow::before { background: linear-gradient(90deg, transparent, var(--accent, var(--ion))); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { --fill: rgba(18, 22, 26, 0.92); padding: var(--s5); backdrop-filter: blur(12px); }
.stat .v {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.stat .k { display: block; margin-top: var(--s2); color: var(--ash); font-size: 13.5px; }

/* Small coloured facts in a row, each with its own --c. */
.pills { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.pills li {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--c, var(--ion));
  border: 1px solid color-mix(in srgb, var(--c, var(--ion)) 42%, transparent);
  background: color-mix(in srgb, var(--c, var(--ion)) 10%, transparent);
}

/* ---------- Footer legal links ---------- */

.footer-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-links a { color: var(--ash); font-size: 13.5px; text-decoration: none; }
.footer-links a:hover { color: var(--bone); text-decoration: underline; }

/* ---------- Legal pages (terms, privacy, refunds) ----------

   Long-form reading: one comfortable column of text, with the contents alongside on a wide
   screen. The aurora header is the only decoration; everything under it is set for reading. */
.legal {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s9);
  display: grid;
  gap: var(--s7);
}
@media (min-width: 1000px) {
  .legal { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .toc { position: sticky; top: calc(var(--nav-h, 62px) + 24px); }
}
.toc { --accent: #a97ef0; padding: var(--s5); font-size: 13.5px; }
.toc .eyebrow { color: var(--accent); }
.toc .eyebrow::before { background: linear-gradient(90deg, transparent, var(--accent)); }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.toc a { color: var(--ash); text-decoration: none; }
.toc a:hover { color: var(--bone); }

.doc { max-width: 78ch; min-width: 0; }
.doc h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-top: var(--s8);
  scroll-margin-top: calc(var(--nav-h, 62px) + 24px);
}
.doc > h2:first-child, .doc .summary + h2 { margin-top: var(--s7); }
.doc h3 { font-size: 17px; font-stretch: 106%; margin-top: var(--s5); }
.doc p, .doc li, .doc td, .doc th { color: #c4ccd3; font-size: 15.5px; line-height: 1.7; }
.doc p { margin-top: var(--s3); }
.doc ul, .doc ol { margin: var(--s3) 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.doc a { color: var(--ion); }
.doc strong { color: var(--bone); }
.doc .summary { --accent: #38c9f0; padding: var(--s5) var(--s6); }
.doc .summary h2 { margin-top: 0; font-size: 19px; }
.doc .summary ul { gap: 4px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: var(--s4); display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--edge); font-size: 14.5px; }
.doc th { color: var(--bone); font-weight: 600; background: rgba(255, 255, 255, 0.03); }
.updated { margin-top: var(--s4); font-family: var(--font-mono); font-size: 12px; color: var(--ash-dim); }
/* Details still to be filled in before a legal page goes live. Loud on purpose. */
.todo { color: #0b0d12; background: #ffd166; border-radius: 4px; padding: 0 5px; font-weight: 600; }