/* Seltrix on the open web: the landing page and the whitepaper.
 *
 * One layer, two documents, and the same material as the Mini App. The palette is styles.css
 * verbatim rather than an approximation of it, so scripts/check-contrast.mjs measures one set of
 * tokens for every surface a user can reach and the two files cannot drift into two brands. The
 * console at /admin is the third surface: it keeps its paper and its light mode, because an
 * operator reads it beside their other windows, and takes the same bronze hue so it is recognisably
 * the same product rather than a second one.
 *
 * Dark, for the reason the app is dark: this page is opened from a Telegram chat, usually at night,
 * usually on the phone that is about to open the Mini App. A light landing page followed by a dark
 * app is two products.
 */

:root {
  color-scheme: dark;

  /* Verbatim from styles.css. Any change belongs there first. */
  --background: #131313;
  --surface-container-low: #1c1b1b;
  --surface-container: #20201f;
  --surface-container-high: #2a2a2a;
  --surface-dim: #131313;
  --on-surface: #e5e2e1;
  --on-surface-variant: #d8c2b2;
  --on-background: #e5e2e1;
  --outline: #a89486;
  --primary: #ffb779;
  --primary-container: #cd7f32;
  --on-primary-container: #432200;
  --secondary: #dcc497;
  --tertiary: #60d6f1;
  --track: #1a1a1a;

  --card: linear-gradient(180deg, #2c2c2c 0%, #242424 100%);
  --bevel: inset 0 0 0 1px rgb(255 255 255 / 5%);
  --lift: 0 4px 12px rgb(0 0 0 / 50%);
  --hairline: rgb(255 255 255 / 8%);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The app is a fixed 390px viewport, so its type scale stops at 32px. A document read on a
     laptop needs a display step above that, and it is the only scale decision made here. */
  --t-display: clamp(2.5rem, 7.4vw, 4.5rem);
  --t-head: clamp(1.75rem, 4vw, 2.75rem);
  --t-lede: clamp(1.0625rem, 1.6vw, 1.375rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-caption: 0.75rem;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --r-sm: 2px; --r-xs: 4px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

body {
  background: var(--background);
  color: var(--on-background);
  font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The same grain tile the app lays over everything, at the same 3%. It is what makes both surfaces
   read as one material rather than as two pages that happen to share a palette. */
.noise {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--primary-container);
  color: var(--on-primary-container);
  border-radius: var(--r);
  font-weight: 600;
  transform: translateY(-250%);
}
.skip:focus { transform: none; text-decoration: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the mark ---------- */

/* Geometry from scripts/build-icons.mjs, the same source icon.svg and favicon.ico are built from.
   Inline rather than <img> because it takes currentcolor from whatever it sits in. */
.mark { width: 26px; height: 26px; flex: none; display: block; fill: none; stroke: currentcolor; stroke-width: 14; }
.mark-rest { opacity: 0.3; }

/* ---------- shell ---------- */

.shell { width: min(1080px, 100% - 2 * var(--s-5)); margin-inline: auto; }
@media (max-width: 560px) { .shell { width: calc(100% - 2 * var(--s-4)); } }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  border-bottom: 1px solid var(--hairline);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .topbar { background: var(--background); } }

.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--primary); font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand span { font-size: var(--t-body); }
.topbar nav { display: flex; align-items: center; gap: var(--s-2); }
.topbar .btn { min-height: 40px; padding: 0 var(--s-4); font-size: var(--t-small); }
/* On a phone the bar is the mark and one button. Where a page carries both, the ghost goes: its
   destination is reachable from the body of the page and from the mark itself, and keeping it here
   only crowds the control that has to be hit one-handed. */
@media (max-width: 560px) { .topbar nav:has(.btn.primary) .btn.ghost { display: none; } }

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

h1 { font: 800 var(--t-display)/0.98 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
h2 { font: 700 var(--t-head)/1.08 var(--sans); letter-spacing: -0.025em; text-wrap: balance; }
h3 { font: 600 1.0625rem/1.35 var(--sans); letter-spacing: -0.01em; }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  color: var(--primary);
  font: 600 var(--t-caption)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lede { max-width: 46ch; color: var(--on-surface-variant); font-size: var(--t-lede); line-height: 1.45; }
/* 68ch, because a document is read rather than scanned. */
.copy { max-width: 68ch; color: var(--on-surface-variant); }
.copy + .copy { margin-top: var(--s-4); }
.small { font-size: var(--t-small); color: var(--outline); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* A rule, not a decoration: this is the arithmetic itself, so it is set in the same face every
   figure in the product is set in. */
code { font-family: var(--mono); font-size: 0.9375em; color: var(--primary); }
.formula {
  display: block;
  max-width: 46ch;
  padding: var(--s-4);
  background: var(--surface-dim);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 40%);
  color: var(--on-surface);
  font-size: var(--t-small);
}

/* ---------- the term track ---------- */

/* The Mini App's signature element, at page scale: a recessed well, one cell per day of the term,
   filled behind you. It is the same object the mark is bent from, so the identity, the hero and
   the product's central screen are all one drawing. */
.track {
  display: flex;
  gap: 3px;
  height: 44px;
  padding: 3px;
  border-radius: var(--r-xs);
  background: var(--surface-dim);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 55%);
  overflow: hidden;
}
.track i { flex: 1; min-width: 0; border-radius: var(--r-sm); background: var(--track); }
.track i.is-done { background: var(--primary-container); box-shadow: inset 0 0 4px rgb(0 0 0 / 20%); }
.track i.is-today { background: linear-gradient(90deg, var(--primary-container) 62%, var(--track) 0); }
.track-legend { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--t-caption); color: var(--outline); }

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-6);
  border-radius: var(--r-md);
  font: 600 var(--t-body)/1 var(--sans);
  text-align: center;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary-container); color: var(--on-primary-container); box-shadow: var(--bevel), var(--lift); }
.btn.primary:hover { background: var(--primary); }
.btn.ghost { color: var(--on-surface); border: 1px solid var(--outline); }
.btn.ghost:hover { border-color: var(--on-surface); background: var(--surface-container-high); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 460px) { .btn-row { flex-direction: column; align-items: stretch; } .btn-row .btn { width: 100%; } }

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

/* The app's beveled card, at document scale. Used for a figure that has to be lifted off the page,
   never as a wrapper around body copy: a card around a paragraph is a box for its own sake. */
.panel {
  padding: var(--s-5);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), var(--lift);
}

/* A full border, not a stripe down one edge. The tint carries the emphasis. */
.note {
  padding: var(--s-5);
  background: var(--surface-container-low);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--on-surface-variant);
}
.note strong { color: var(--on-surface); }

/* ---------- the ledger row ---------- */

/* The console's structure, borrowed on purpose: a label, a rule, a figure, aligned down a column
   so two rows can be compared. It replaces the three-identical-cards grid this page used to run
   three times over. */
.ledger { border-top: 1px solid var(--hairline); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.ledger-row .label { color: var(--on-surface); font-weight: 500; }
.ledger-row .value { color: var(--primary); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.ledger-row p { grid-column: 1 / -1; margin-top: var(--s-1); max-width: 62ch; color: var(--outline); font-size: var(--t-small); }

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

/* Three routes, each named by what it is for rather than by the platform it sits on: someone
   chasing a withdrawal should not have to work out whether that is the X account's job. It gets
   its own grid rather than a .ledger row because an address is a long monospace string, and the
   ledger's auto-width value column would crush the label beside it on a narrow phone. */
.contact { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 760px) { .contact { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.contact > div { padding: var(--s-4); background: var(--surface-container-low); }
.contact .label { display: block; margin-bottom: var(--s-3); color: var(--primary); font: 600 var(--t-caption)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
/* overflow-wrap, because support@seltrix.xyz in monospace is wider than a 320px column and an
   address that runs under its neighbour is worse than one that wraps. */
.contact > div > a { color: var(--on-surface); font-family: var(--mono); font-size: var(--t-small); overflow-wrap: anywhere; }
.contact p { margin-top: var(--s-2); color: var(--outline); font-size: var(--t-small); line-height: 1.45; }

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

/* Numbered, in the order the product happens. One rail rather than five boxes, so it reads as a
   sequence and echoes the track above it. */
/* padding: 0 is load-bearing. An ol keeps its 40px marker gutter even with list-style: none, and
   the gutter here would expose the hairline the grid gaps are drawn from as a pale stripe down the
   left edge of the block: a side stripe, arrived at by accident rather than by choice. */
.steps { counter-reset: step; display: grid; gap: 1px; padding: 0; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 760px) { .steps { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.steps li { list-style: none; padding: var(--s-4); background: var(--surface-container-low); }
.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s-3);
  color: var(--primary);
  font: 600 var(--t-caption)/1 var(--mono);
  letter-spacing: 0.1em;
}
.steps b { display: block; margin-bottom: var(--s-1); color: var(--on-surface); font-weight: 600; }
.steps span { color: var(--outline); font-size: var(--t-small); line-height: 1.45; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 460px; border-collapse: collapse; }
caption { margin-bottom: var(--s-3); color: var(--outline); font-size: var(--t-small); text-align: left; }
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--hairline); }
thead th { color: var(--outline); font: 600 var(--t-caption)/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
tbody td { color: var(--on-surface-variant); }
tbody th { color: var(--on-surface); font-weight: 500; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--on-surface); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tr.total th, tr.total td { color: var(--primary); font-weight: 600; }

/* ---------- the presale strip ---------- */

/* No countdown and no date, because there is no date. A dot that breathes is the whole of the
   urgency this is allowed to claim until there is something to announce. */
.presale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-container-low);
  border: 1px solid var(--primary-container);
  border-radius: var(--r-md);
}
.presale .tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--primary);
  font: 600 var(--t-caption)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.presale .dot { width: 7px; height: 7px; flex: none; border-radius: var(--r-full); background: var(--primary); animation: breathe 2.6s var(--ease) infinite; }
.presale p { flex: 1 1 22ch; margin: 0; color: var(--on-surface-variant); font-size: var(--t-small); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

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

/* The three legal pages need something the marketing pages never did: continuous prose, sub-headings
   inside a section, and lists that read at the same pace as a paragraph. Everything else on those
   pages is the whitepaper's furniture reused, so this is the whole of the addition.
   The lists keep a marker. A legal clause is referred to by position, and stripping the bullets to
   look tidier takes that away from anyone reading the page aloud. */
.doc { max-width: 68ch; color: var(--on-surface-variant); }
.doc > * + * { margin-top: var(--s-4); }
.doc h3 { margin-top: var(--s-6); color: var(--on-surface); }
.doc ul { padding-left: var(--s-5); }
.doc li { margin-top: var(--s-2); }
.doc li::marker { color: var(--outline); }
.doc strong { color: var(--on-surface); font-weight: 600; }

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

main { padding-bottom: var(--s-8); }
section { padding-top: var(--s-8); scroll-margin-top: 80px; }
/* The first section sits under a sticky bar rather than under a previous section, so it takes its
   own opening rather than the rhythm between two sections. */
.lead { padding-top: var(--s-7); }
.figure-panel { max-width: 34rem; }
.figure { font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: 1; color: var(--primary); }
.figure-panel .small:last-child { max-width: 44ch; }
.section-head { max-width: 68ch; margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: var(--s-3); }
.stack-2 { margin-top: var(--s-2); }
.stack-3 { margin-top: var(--s-3); }
.stack-4 { margin-top: var(--s-4); }
.stack-5 { margin-top: var(--s-5); }
.stack-6 { margin-top: var(--s-6); }
.stack-7 { margin-top: var(--s-7); }

.toc { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.toc a { padding: var(--s-2) var(--s-3); color: var(--on-surface-variant); border: 1px solid var(--hairline); border-radius: var(--r-full); font-size: var(--t-small); }
.toc a:hover { color: var(--on-surface); border-color: var(--outline); text-decoration: none; }
.toc a i { font-style: normal; margin-right: var(--s-2); color: var(--outline); font-family: var(--mono); }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--hairline);
  color: var(--outline);
  font-size: var(--t-small);
}
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer a { color: var(--on-surface-variant); }