@import url("fonts.css");

/* ==========================================================================
   jerimmox.com

   The page is built as a memory dump of the product: every section carries an
   address, the hero is a real hex view, and the left rail counts up as you
   scroll. Dark instrument sections alternate with light aluminium ones so the
   page has a rhythm instead of one long dark scroll.

   Colour has three jobs and no fourth:
     signal teal  live data, only where something was found or read
     amber        money: prices and tokens
     aluminium    surfaces you act on (buttons, the support table)
   ========================================================================== */

:root {
  --void: #08131a;
  --void-2: #0b1a22;
  --panel: #0e1d26;
  --panel-2: #142935;
  --line: #1c3341;
  --line-hi: #2a4a5c;

  --ink: #e6f1f5;
  --ink-2: #93aab6;
  --ink-3: #5e7a8a;

  --signal: #2be0c8;
  --signal-dim: #17786c;
  --amber: #f5a62e;
  --amber-dim: #7a5215;

  --alu: #dce2e1;
  --alu-2: #eef1f0;
  --alu-3: #cbd3d2;
  --alu-line: #bcc6c5;
  --alu-ink: #0b1a22;
  --alu-ink-2: #4a5b62;

  --f-d: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-b: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-m: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  --r: 3px;
  --wrap: 1240px;
  --gutter: 64px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* the sticky header must not cover an anchored section */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-b);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--signal); color: var(--void); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--signal);
  color: var(--void);
  font-family: var(--f-m);
  font-size: 13px;
  font-weight: 700;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

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

h1, h2, h3, h4 {
  font-family: var(--f-d);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

.h-xl { font-size: clamp(34px, 4.9vw, 68px); }
.h-l  { font-size: clamp(31px, 4.4vw, 54px); }
.h-m  { font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -.015em; }
.h-s  { font-size: 19px; letter-spacing: -.01em; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.mono { font-family: var(--f-m); font-variant-ligatures: none; }

.eyebrow {
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 18px;
}
.eyebrow.is-amber { color: var(--amber); }

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }

/* ---- layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 92px 0; }
.section > .wrap > * { min-width: 0; }

.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.split > * { min-width: 0; }

/* ---- section markers ------------------------------------------------------
   Every section is announced by its offset. This is the table of contents and
   the reason the left rail has anything to count. */

.marker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(43, 224, 200, .05) 7px 8px);
}
.marker-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--f-m);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.marker-addr { color: var(--signal); font-weight: 700; flex: none; text-transform: none; }
.marker-name { color: var(--ink); font-weight: 700; }
.marker-note { margin-left: auto; text-align: right; }

.is-light .marker { border-color: var(--alu-line); background: none; }
.is-light .marker-in { color: var(--alu-ink-2); }
.is-light .marker-addr { color: var(--alu-ink); }
.is-light .marker-name { color: var(--alu-ink); }

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

.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 19, 26, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 118px; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}
.nav a {
  padding: 8px 12px;
  font-family: var(--f-m);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r);
  transition: color .16s, background .16s;
}
.nav a:hover { color: var(--ink); background: var(--panel-2); }
.nav a[aria-current="page"] { color: var(--signal); }

.top-cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  width: 42px;
  height: 38px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  margin: 0 auto;
  transition: transform .2s var(--ease), opacity .2s;
}
.burger span::before, .burger span::after { content: ""; position: relative; }
.burger span::before { top: -5.5px; }
.burger span::after { top: 4px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-4px) rotate(-45deg); }

/* ---- buttons --------------------------------------------------------------
   The primary control is a machined aluminium key: it is the same material as
   the support table, which is the other thing on the page you actually use. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--alu-line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--alu-2), var(--alu-3));
  color: var(--alu-ink);
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 2px 10px -4px rgba(0, 0, 0, .6);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); transition: transform .75s var(--ease); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); filter: brightness(.96); }

.btn.is-ghost {
  background: none;
  border-color: var(--line-hi);
  color: var(--ink);
  box-shadow: none;
}
.btn.is-ghost:hover { background: var(--panel-2); border-color: var(--signal-dim); filter: none; }

.btn.is-big { padding: 15px 26px; font-size: 15.5px; }
.btn.is-sm { padding: 9px 14px; font-size: 12.5px; }
.btn.is-block { width: 100%; }

.btn svg { width: 16px; height: 16px; flex: none; }

.link {
  color: var(--signal);
  text-decoration-color: rgba(43, 224, 200, .35);
  text-underline-offset: 3px;
}
.link:hover { text-decoration-color: currentColor; }

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

.hero {
  position: relative;
  padding: 76px 0 86px;
  overflow: hidden;
}
.hero::before {
  /* a faint bus of traces leaving the dump toward the page edge */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 460px at 78% 22%, rgba(43, 224, 200, .09), transparent 62%),
    radial-gradient(700px 500px at 8% 88%, rgba(43, 224, 200, .045), transparent 60%);
  pointer-events: none;
}
.hero::after {
  /* one slow drift, far enough behind the type that it reads as depth rather
     than motion. Killed outright under prefers-reduced-motion. */
  content: "";
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(620px 380px at 70% 34%, rgba(43,224,200,.10), transparent 64%);
  animation: drift 21s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  to { transform: translate3d(5%, -4%, 0) scale(1.12); }
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 52px;
  align-items: center;
}

.hero h1 { margin-bottom: 22px; }
.hero h1 em {
  font-style: normal;
  color: var(--signal);
  /* the word the whole product is about gets the live-data colour */
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.build {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 20px;
  font-family: var(--f-m);
  font-size: 12.5px;
  color: var(--ink-3);
}
.build b { color: var(--ink-2); font-weight: 500; }
.build .sep { color: var(--line-hi); }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--f-m);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trust span { display: flex; align-items: center; gap: 8px; }
.trust span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(43, 224, 200, .12);
}

/* ---- the dump -------------------------------------------------------------
   Decorative and aria-hidden. Everything it says is also said in real text
   next to it, so a screen reader loses nothing by skipping it. */

.dump {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel), var(--void-2));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.dump-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--void-2);
  font-family: var(--f-m);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dump-bar .pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse 2.4s infinite;
}
.dump-bar .right { margin-left: auto; color: var(--ink-3); }

.dump-body {
  position: relative;
  padding: 14px 6px 14px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dump-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(43,224,200,.035) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.dump-rows {
  position: relative;
  z-index: 1;
  font-family: var(--f-m);
  font-size: 12.5px;
  line-height: 1.85;
  white-space: nowrap;
  display: table;
}
.dump-row { display: table-row; }
.dump-row > * { display: table-cell; }
.dump-row .addr { color: var(--ink-3); padding-right: 16px; user-select: none; }
.dump-row .bytes { color: var(--ink-2); letter-spacing: .02em; }
.dump-row .ascii { color: var(--line-hi); padding-left: 16px; }

.dump-row b {
  font-weight: 400;
  transition: color .3s, background .3s;
  padding: 1px 0;
}
.dump-row.is-scan .bytes b { color: var(--ink); }
.dump-row .bytes b.is-hit {
  color: var(--void);
  background: var(--signal);
  font-weight: 700;
}
.dump-row .bytes b.is-near { color: var(--signal); }

.dump-progress {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.dump-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(43,224,200,.7);
  transition: width .3s linear;
}
.dump-foot {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dump-foot div {
  padding: 11px 14px;
  font-family: var(--f-m);
  font-size: 12px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.dump-foot div:nth-child(2n) { border-right: 0; }
.dump-foot div:nth-child(n+3) { border-top: 1px solid var(--line); }
.dump-foot dt {
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-bottom: 3px;
}
.dump-foot dd {
  margin: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dump-foot dd.is-good { color: var(--signal); }
/* the result line is the longest field and the one worth reading in full */
.dump-foot dd.is-wrap { white-space: normal; overflow: visible; line-height: 1.35; }

.caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  vertical-align: -2px;
  background: var(--signal);
  animation: blink 1.05s steps(1) infinite;
}

@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(43, 224, 200, .5) }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(43, 224, 200, 0) }
}

/* ---- operations ---------------------------------------------------------- */

.ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  /* transparent, so a row that does not divide evenly leaves page ground
     rather than a lit block where a card should be */
}
.op {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 22px 22px;
  min-width: 0;
  transition: background .18s;
}
.op::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--signal);
  transition: width .4s var(--ease);
}
.op:hover::before { width: 100%; }
.op:hover { background: var(--panel-2); }
.op:hover .op-n { color: var(--signal); }
.op-n {
  transition: color .25s;
  font-family: var(--f-m);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.op h3 {
  font-family: var(--f-d);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.op p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.op-count {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--signal);
}

/* ---- steps ----------------------------------------------------------------
   Numbered because it is a sequence: the file has to be read before it can be
   edited, and paid for last. */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--line-hi); }
.step:first-child { border-top-color: var(--signal); }
.step-n {
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--signal);
  margin-bottom: 12px;
}
.step h3 { font-size: 23px; margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 16px; margin: 0; }

/* ---- light sections ------------------------------------------------------- */

.is-light {
  background: var(--alu);
  color: var(--alu-ink);
  /* brushed metal, very quiet */
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--alu-2), var(--alu));
  background-blend-mode: soft-light, normal;
}
.is-light .lede, .is-light .muted { color: var(--alu-ink-2); }
.is-light .eyebrow { color: #0f6f63; }
.is-light .link { color: #0d6a5f; text-decoration-color: rgba(13, 106, 95, .4); }
.is-light .btn.is-ghost { border-color: var(--alu-line); color: var(--alu-ink); }
.is-light .btn.is-ghost:hover { background: rgba(255, 255, 255, .6); }
.is-light .btn.is-dark {
  background: var(--void-2);
  border-color: var(--void-2);
  color: var(--ink);
  box-shadow: none;
}
.is-light .btn.is-dark:hover { background: var(--panel-2); }

/* ---- support explorer ----------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}
.chip {
  padding: 7px 14px;
  border: 1px solid var(--alu-line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .5);
  color: var(--alu-ink);
  font-family: var(--f-m);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: #fff; }
.chip[aria-pressed="true"] {
  background: var(--void-2);
  border-color: var(--void-2);
  color: var(--ink);
}
.chip small { opacity: .6; margin-left: 5px; }

.search {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--alu-line);
  border-radius: var(--r);
  background: #fff;
}
.search svg { width: 15px; height: 15px; flex: none; color: var(--alu-ink-2); }
.search input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  padding: 11px 0;
  border: 0;
  background: none;
  font-family: var(--f-m);
  font-size: 14px;
  color: var(--alu-ink);
}
.search input:focus { outline: none; }
.search input::placeholder { color: #8c9a9e; }
.search:focus-within { border-color: var(--alu-ink); box-shadow: 0 0 0 3px rgba(11, 26, 34, .1); }

.tbl-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid var(--alu-line);
  border-radius: var(--r);
  background: #fff;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 520px;
}
.tbl th {
  padding: 11px 14px;
  text-align: left;
  background: var(--alu-2);
  border-bottom: 1px solid var(--alu-line);
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--alu-ink-2);
  white-space: nowrap;
}
/* Nothing here is sticky. A sticky group header on a full-page table parks
   itself over the first row of its own group, which is the row you were
   reading. The table is short enough per platform that scrolling back to the
   header is not a hardship. */
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid #e6eae9;
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #f4f7f6; }

/* the kind of unit is a heading in the table, not a column repeated on every
   row, because a technician scans for "CAS" once and then reads down */
.tbl tr.grp th {
  padding: 9px 14px;
  background: #e4eae9;
  border-top: 1px solid var(--alu-line);
  border-bottom: 1px solid var(--alu-line);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--alu-ink);
}
.tbl tr.grp th span {
  float: right;
  font-weight: 500;
  color: var(--alu-ink-2);
  letter-spacing: .06em;
}
.tbl tbody tr.grp:hover { background: #e4eae9; }

.tbl .t-mod { font-family: var(--f-m); font-weight: 700; white-space: nowrap; }
.tbl .t-note {
  display: block;
  margin-top: 2px;
  font-family: var(--f-b);
  font-size: 12.5px;
  font-weight: 400;
  color: #7b8a8e;
  white-space: normal;
}
.tbl .t-brands { color: var(--alu-ink-2); font-size: 13.5px; }

.ops-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  padding: 2px 7px;
  border: 1px solid var(--alu-line);
  border-radius: 2px;
  background: #f2f5f4;
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
}

.tbl-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  font-family: var(--f-m);
  font-size: 12.5px;
  color: var(--alu-ink-2);
}
.empty { padding: 42px 20px; text-align: center; color: var(--alu-ink-2); }

/* ---- cards (dark) --------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  min-width: 0;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 15.5px; }

/* ---- tokens --------------------------------------------------------------- */

.packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.pack {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: 22px;
  min-width: 0;
}
.pack.is-pick { border-color: var(--amber-dim); }
.pack-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 10px;
  border-radius: 0 var(--r) 0 var(--r);
  background: var(--amber);
  color: var(--void);
  font-family: var(--f-m);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
}
.pack-n {
  font-family: var(--f-d);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.pack-n span { font-family: var(--f-m); font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.pack-price {
  margin: 14px 0 0;
  font-family: var(--f-m);
  font-size: 21px;
  font-weight: 700;
  color: var(--amber);
}
.pack-each { margin: 4px 0 0; font-family: var(--f-m); font-size: 12.5px; color: var(--ink-3); }

.unlim {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--amber-dim);
  border-radius: var(--r);
  background:
    linear-gradient(120deg, rgba(245, 166, 46, .1), transparent 58%),
    var(--panel);
}
.unlim-price { display: flex; gap: 34px; flex-wrap: wrap; }
.unlim-price p { margin: 0; }
.unlim-k {
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.unlim-v {
  font-family: var(--f-d);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--amber);
}
.unlim-n { font-family: var(--f-m); font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ---- news ----------------------------------------------------------------- */

.news { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news.is-scroll { overflow-y: auto; padding-right: 18px; }

/* Chrome honours ::-webkit-scrollbar only while the standard scrollbar-width
   and scrollbar-color are absent, so those two are handed to Gecko alone.
   Without the split, Chrome falls back to its own thin bar, arrow buttons and
   all, and the rules below are dead. */
@supports (-moz-appearance: none) {
  .news.is-scroll { scrollbar-width: thin; scrollbar-color: var(--signal-dim) transparent; }
}
.news.is-scroll::-webkit-scrollbar { width: 6px; }
.news.is-scroll::-webkit-scrollbar-button { display: none; height: 0; }
.news.is-scroll::-webkit-scrollbar-track { background: transparent; }
.news.is-scroll::-webkit-scrollbar-thumb {
  background: var(--signal-dim);
  border-radius: 3px;
}
.news.is-scroll::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.news-more {
  margin-top: 12px;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.news-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.news-meta { font-family: var(--f-m); font-size: 12.5px; color: var(--ink-3); }
.news-ver {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border: 1px solid var(--signal-dim);
  border-radius: 2px;
  color: var(--signal);
  font-weight: 700;
}
.news-meta time { display: block; }
.news-body h3 { font-size: 19px; margin-bottom: 6px; }
.news-body p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.news-body .news-none { color: var(--ink-3); font-family: var(--f-m); font-size: 13px; }
.news-empty {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--f-m);
  font-size: 14px;
}

/* ---- contact --------------------------------------------------------------- */

.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; }
.contact {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: 24px;
  min-width: 0;
  transition: border-color .18s, background .18s;
}
.contact:hover { border-color: var(--signal-dim); background: var(--panel-2); }
.contact h3 { font-size: 18px; margin-bottom: 6px; }
.contact p { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }
.contact a {
  font-family: var(--f-m);
  font-size: 15px;
  color: var(--signal);
  text-decoration: none;
  word-break: break-word;
}
.contact a:hover { text-decoration: underline; }

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

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-d);
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--f-m);
  font-size: 21px;
  font-weight: 400;
  color: var(--signal);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 22px; color: var(--ink-2); max-width: 78ch; }

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

.foot { border-top: 1px solid var(--line); padding: 54px 0 40px; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-bottom: 40px;
}
.foot-grid img { width: 128px; margin-bottom: 16px; }
.foot h4 {
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot li a { display: inline-block; padding: 3px 0; color: var(--ink-2);
             text-decoration: none; font-size: 15px; }
.foot li a:hover { color: var(--signal); }
/* ---- the operator record ---------------------------------------------------
   Slovak law wants the trader identified on every page: trade name, place of
   business, ICO, the register it is entered in and the supervising authority.
   The page is a memory map, so the operator gets an address like everything
   else and is read as a record rather than as a block of small print. */

.ident {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.ident-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ident-h .ident-addr { color: var(--signal); }

/* One run of fields separated by rules, not a grid of cells. It is a legal
   requirement rather than something being sold, so it stays small and dense
   and sits with the copyright note it belongs next to. */
.ident-rec {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  font-family: var(--f-m);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
}
.ident-rec > span { padding-right: 13px; }
.ident-rec > span + span {
  padding-left: 13px;
  border-left: 1px solid var(--line);
}
.ident-rec b {
  font-weight: 400;
  color: var(--ink-3);
  opacity: .72;
}
.ident-rec a { color: var(--ink-3); text-decoration: none; }
.ident-rec a:hover { color: var(--signal); }

@media (max-width: 620px) {
  .ident-rec > span { padding-right: 0; }
  .ident-rec > span + span { padding-left: 0; border-left: 0; }
  .ident-rec { flex-direction: column; gap: 3px; }
}

.foot-note {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--f-m);
  font-size: 12.5px;
  color: var(--ink-3);
}
.foot-note p { margin: 0; max-width: 68ch; }

/* ---- the address rail ------------------------------------------------------
   The signature: the page has a position and the position has an address.
   Hidden under 1320px, where there is no margin to put it in. */

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--gutter);
  z-index: 90;
  display: none;
  border-right: 1px solid var(--line);
  pointer-events: none;
  /* transparent on purpose: the rail sits over whatever section is behind it,
     so a light section reads through and only the ink has to invert */
}
.rail-addr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--f-m);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--signal);
  white-space: nowrap;
}
.rail-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 116px)) rotate(-90deg);
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.rail-progress {
  position: absolute;
  right: -1px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(43, 224, 200, .6);
}

.rail.is-light-zone { border-right-color: var(--alu-line); }
.rail.is-light-zone .rail-addr { color: #0f6f63; }
.rail.is-light-zone .rail-name { color: var(--alu-ink-2); }

/* mobile substitute: a hairline that fills across the top */
.bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--signal);
  z-index: 110;
}

@media (min-width: 1320px) {
  .rail { display: block; }
  .bar { display: none; }
}

/* ---- section rule -------------------------------------------------------
   A hairline that draws itself in under a heading. Transform only, so it is
   decoration that costs nothing if it never animates. */

.rule {
  height: 2px;
  margin: 26px 0 0;
  background: linear-gradient(90deg, var(--signal), var(--line));
  transform: scaleX(0);
  transform-origin: left;
}
.js .rule { transform: scaleX(0); }
.js .rule.is-in { transform: scaleX(1); transition: transform 1s var(--ease); }
.is-light .rule { background: linear-gradient(90deg, #0f6f63, var(--alu-line)); }

/* ---- reveal ---------------------------------------------------------------- */

/* Two reveals, and the difference matters.

   .rv-up moves, it never fades. Text stays at full opacity the whole time, so a
   crawler that renders one frame and never scrolls still reads every heading,
   price and table row on the page. Content is never gated on a scroll event.

   .rv does fade, and it is used on one decorative element in the first screen.

   Both are scoped to .js, set by an inline script in <head> before first paint,
   so a failed script load costs the motion and not the page. */
.js .rv-up { transform: translateY(18px); }
.js .rv-up.is-in { transform: none; transition: transform .6s var(--ease); }
.js .rv-up-2.is-in { transition-delay: .07s; }
.js .rv-up-3.is-in { transition-delay: .14s; }

.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}


/* ---- platform tabs --------------------------------------------------------
   A tab bar rather than toggle chips, because one platform is always selected
   and the selected one has to be unmistakable at a glance. */

.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--alu-line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .55);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--alu-ink-2);
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.tab span {
  font-family: var(--f-m);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .7;
}
.tab:hover { background: rgba(255, 255, 255, .9); color: var(--alu-ink); }
.tab[aria-selected="true"] {
  background: var(--void-2);
  color: #fff;
  box-shadow: 0 1px 6px -2px rgba(11, 26, 34, .5);
}
.tab[aria-selected="true"] span { opacity: .65; }

.listbar .search { flex: 0 1 300px; }

/* the platform column only earns its place while a search spans all of them */
.tbl .c-group, .tbl .t-brands { display: none; }
.tbl.is-searching .c-group, .tbl.is-searching .t-brands { display: table-cell; }

/* ---- feature card ---------------------------------------------------------
   For a fact that deserves a mention but not a section of its own. It is built
   like the table above it so it reads as a footnote to the list, not as a
   second banner. */

.feature {
  max-width: 720px;
  padding: 26px 28px;
  border: 1px solid var(--alu-line);
  border-radius: var(--r);
  background: #fff;
}
.feature .eyebrow { margin-bottom: 10px; }
.feature h3 { margin-bottom: 10px; }
.feature p { margin: 0; color: var(--alu-ink-2); font-size: 15.5px; max-width: 62ch; }

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

.legal { max-width: 74ch; }
.legal h2 { margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 16.5px; line-height: 1.68; color: var(--ink-2); }
.legal ul { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); font-size: 16.5px; line-height: 1.68; }
.legal li { margin-bottom: 7px; }
.legal b { color: var(--ink); font-weight: 600; }
.is-light .legal p, .is-light .legal ul { color: var(--alu-ink-2); }
.is-light .legal b { color: var(--alu-ink); }

/* the clause that matters most is the one people skip, so it gets a wall */
.legal-warn {
  max-width: none;
  padding: 30px 32px;
  border: 1px solid var(--alu-line);
  border-left: 3px solid #b4450a;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .68);
}
.legal-warn > * { max-width: 74ch; }

@media (max-width: 700px) {
  .feature { padding: 22px 20px; }
  .listbar { gap: 10px; }
  .listbar .search { flex: 1 1 100%; }
  .legal-warn { padding: 22px 20px; }
}

/* ---- responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .section { padding: 66px 0; }
  .hero { padding: 52px 0 62px; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--void);
    border-bottom: 1px solid var(--line);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 13px 8px; font-size: 14px; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .burger { display: block; order: 3; }
  .top-in { gap: 14px; position: relative; }
  .top-cta .btn.is-hide-sm { display: none; }

  .unlim { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dump-foot { grid-template-columns: minmax(0, 1fr); }
  .dump-foot div { border-right: 0; }
  .dump-foot div + div { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .h-xl { font-size: clamp(30px, 8.4vw, 42px); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .dump-body { padding: 12px 4px 12px 10px; }
  .dump-rows { font-size: 11px; }
  .tbl { min-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rv, .js .rv-up { opacity: 1; transform: none; }
  .js .rule { transform: scaleX(1); }
  .hero::after { animation: none; }
}

@media print {
  .top, .rail, .bar, .hero::before { display: none; }
  body { background: #fff; color: #000; }
}