/* =============================================================
   splatvik simple — black and white
   -------------------------------------------------------------
   No colour anywhere: the palette is one black, three greys and
   white. Hierarchy comes from weight, size and space, so the page
   stays quiet. Everything is one column of plain blocks.
   ============================================================= */

:root {
  --bg: #000;
  --panel: #0b0b0b;
  --line: #1e1e1e;
  --line-2: #2e2e2e;
  --ink: #f2f2f2;
  --ink-2: #a0a0a0;
  --ink-3: #6a6a6a;

  --wrap: 940px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 56px; }

html { background: var(--bg); }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

/* ---- header ---- */
/* A floating pill rather than a full-width bar: the header is a capsule that
   hovers over the page, so the backdrop video stays visible around it. The
   outer element carries only the spacing and the stickiness — it has no
   surface of its own — and the pill inside shrinks to its contents. */
.head {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 0;
  background: transparent;
  border-bottom: 0;
}
.head-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  /* Beats .wrap's fixed width — the capsule is only as wide as it needs to
     be, and never wider than the page allows. */
  width: fit-content;
  /* .wrap used to supply this; the pill no longer carries that class. */
  margin-inline: auto;
  max-width: min(100% - 32px, var(--wrap));
  height: 42px;
  padding: 0 12px 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.88rem; }
/* The mark is white-on-transparent artwork; nothing to correct. */
.brand img { width: 19px; height: 19px; }

.nav { display: flex; gap: 16px; }
.nav a { color: var(--ink-2); font-size: 0.82rem; transition: color 0.15s ease; }
.nav a:hover { color: var(--ink); }

/* ---- sections ---- */
.sec { padding: clamp(44px, 7vw, 76px) 0; }
.sec + .sec { border-top: 1px solid var(--line); }

h2 {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lead { margin-top: 6px; color: var(--ink-2); font-size: 0.94rem; }

/* ---- status list ---- */
.rows { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.row-name { font-weight: 600; }
.row-state { font-size: 0.85rem; color: var(--ink-2); text-align: right; }
/* Note and date drop under the name rather than squeezing the row. */
.row-note { grid-column: 2 / 3; color: var(--ink-3); font-size: 0.85rem; }
.row-since { grid-column: 3 / 4; color: var(--ink-3); font-size: 0.78rem; text-align: right; }

/* With no colour to signal state, the shape carries it and the word
   confirms it — a filled disc runs, a ring waits, a cross is pulled. */
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-solid { background: var(--ink); }
.dot-ring { border: 2px solid var(--ink-2); }
.dot-cross {
  position: relative;
  border: 2px solid var(--ink-3);
}
.dot-cross::after {
  content: "";
  position: absolute;
  inset: -3px auto auto -1px;
  width: 12px;
  height: 2px;
  background: var(--ink-3);
  transform: rotate(45deg);
  transform-origin: left center;
}

/* ---- product cards ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 26px;
}
.card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--line-2); }
.card-art {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.card-art-none { background: #101010; }

.card-body { padding: 16px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-top h3 { font-size: 1rem; font-weight: 600; }
.tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.68rem;
  white-space: nowrap;
}
.price { margin-top: 6px; color: var(--ink-2); font-size: 0.88rem; }
.price strong { color: var(--ink); font-weight: 600; }

.plans { list-style: none; margin-top: 14px; border-top: 1px solid var(--line); }
.plans li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.84rem;
}
.plans li:last-child { border-bottom: 0; }
.plans li span:last-child { color: var(--ink); }

/* ---- footer ---- */
.foot {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .row { grid-template-columns: 12px minmax(0, 1fr); }
  .row-state { grid-column: 2 / 3; text-align: left; }
  .row-since { grid-column: 2 / 3; text-align: left; }
}

/* =============================================================
   Pages beyond the front one
   ============================================================= */

h1 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lead a:hover { color: var(--ink-2); }

.nav a.on { color: var(--ink); }

.note {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 0.84rem;
  line-height: 1.65;
}
.note a, .buybox a:not(.btn) {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.muted { color: var(--ink-2); font-size: 0.86rem; }

.crumb { color: var(--ink-3); font-size: 0.82rem; margin-bottom: 20px; }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }

/* ---- home cards are links now ---- */
.card { display: block; }
.card-body { display: block; padding: 16px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-top strong { font-size: 1rem; font-weight: 600; }
.card .muted { display: block; margin-top: 6px; }
.card .price { display: block; margin-top: 10px; }
.card .price b { color: var(--ink); font-weight: 600; }

/* ---- product header ---- */
.phead { display: grid; gap: 26px; margin-top: 4px; }
@media (min-width: 720px) { .phead { grid-template-columns: 260px minmax(0, 1fr); } }
.phead-art {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pstate { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--ink-2); font-size: 0.88rem; }
.pstate strong { color: var(--ink); }

.feats { list-style: none; margin-top: 20px; border-top: 1px solid var(--line); }
.feats li {
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink-2);
  font-size: 0.9rem;
}
/* A dash, not a tick — a tick reads as "verified" and these are just a list. */
.feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 9px;
  height: 1px;
  background: var(--ink-3);
}

/* ---- screenshots and video ----
   Sources are colour webp and mp4, which no amount of re-encoding here would
   fix cheaply. The filter does it at paint time and costs nothing. */
.shots { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 720px) { .shots { grid-template-columns: 1fr 1fr; } }
.shot { margin: 0; }
.shots img, .shots video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0b0b;
}

/* A clip is landscape and spans the row. Letting it size itself off the
   source made it a tall column when the poster was portrait; a fixed 16:9
   box keeps it looking like a video player. */
.clip {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: #000;
}
.shot figcaption { margin-top: 8px; color: var(--ink-3); font-size: 0.8rem; }

/* ---- pricing ---- */
.plans { list-style: none; margin-top: 22px; border-top: 1px solid var(--line); max-width: 420px; }
.plans li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.plan-label { color: var(--ink-2); }
.plan-price { color: var(--ink); font-weight: 600; }

/* ---- buy ---- */
.btn {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 22px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: #000;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: transparent; color: var(--ink); }

.buybox {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel);
  max-width: 520px;
}
.buybox p { color: var(--ink-2); font-size: 0.9rem; }
.buybox p + p { margin-top: 8px; }
.buybox strong { color: var(--ink); }
.buybox .btn { margin-top: 16px; }

/* ---- footer ---- */
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.foot-links { display: flex; gap: 16px; }
.foot-links a:hover { color: var(--ink); }

/* =============================================================
   Backdrop
   -------------------------------------------------------------
   The Squad clip runs behind every page. It is decoration only:
   muted, looping, not focusable, and hidden from assistive tech.
   Two layers do the work — the video, then a flat veil that takes
   it down far enough for body copy to stay comfortably readable.
   ============================================================= */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* Painted immediately from a few kB of vector, so the page never waits on
     the clip. A video element shows nothing until it has decoded a frame, so
     this is what is behind it until then — and what stays if the clip never
     arrives at all. */
  background: url("media/backdrop.svg") center / cover no-repeat #000;
}
.bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  /* Slightly soft and dimmed at the source, so the veil above does not
     have to be so opaque that the footage disappears entirely. */
  filter: brightness(0.42) saturate(0.7);
}
.bg-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Flat black over the whole frame, with the top and bottom pushed darker
     where the sticky header and the footer sit. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.62) 22%,
                    rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0.92)),
    rgba(0, 0, 0, 0.35);
}

/* Panels sit on the footage rather than blanking it out. */
.card, .buybox { background: rgba(11, 11, 11, 0.82); }
.foot { background: rgba(0, 0, 0, 0.55); }

/* Text over moving footage needs a touch more separation than text on a
   flat panel — this is small and only on the loose copy. */
.sec h1, .sec h2, .lead, .note, .crumb, .row, .feats li, .plans li {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Marked by bg.js once the browser says it can actually play it. */
.bg video.ready { opacity: 1; }

/* Someone who has asked for less motion should not get a looping video —
   the still backdrop underneath is the whole page for them. */
@media (prefers-reduced-motion: reduce) {
  .bg video { display: none; }
}

/* ---- header icons ---- */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  color: var(--ink-2);
  transition: color 0.15s ease, background 0.15s ease;
}
.ico:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.ico svg { width: 15px; height: 15px; display: block; }
.nav { align-items: center; }

/* =============================================================
   Language switcher
   ============================================================= */
.lang { position: relative; }
.lang-btn { border: 0; background: none; cursor: pointer; padding: 0; }
.flag {
  display: block;
  width: 20px;
  height: 13px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.flag svg { display: block; width: 100%; height: 100%; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 158px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.lang.open .lang-menu { display: block; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 0.82rem;
  white-space: nowrap;
}
.lang-menu a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.lang-menu a.on { color: var(--ink); }

/* =============================================================
   Pricing beside the product, not below it
   -------------------------------------------------------------
   The plans used to sit in their own section under the feature
   list and the gallery, which meant scrolling past everything to
   reach the one thing people came for. It is now the third column
   of the product header: poster, copy, prices.
   ============================================================= */
.pside {
  align-self: start;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(11, 11, 11, 0.86);
}
.pside h2 { font-size: 1rem; }
.pside .plans { margin-top: 14px; max-width: none; }
.pside .plans li { padding: 10px 2px; font-size: 0.88rem; }
.pside .note { margin-top: 14px; }
.pside .buybox {
  margin-top: 16px;
  padding: 16px;
  max-width: none;
}
.btn-block { display: block; width: 100%; text-align: center; }

/* Three columns once there is room for all of them; the pricing card drops
   under the copy before it gets squeezed, and the whole thing stacks on a
   phone. Widths are fixed at the edges so the copy takes the slack. */
@media (min-width: 1060px) {
  .phead { grid-template-columns: 220px minmax(0, 1fr) 278px; }
}
@media (min-width: 720px) and (max-width: 1059px) {
  .phead { grid-template-columns: 240px minmax(0, 1fr); }
  .pside { grid-column: 1 / -1; }
}