/* Sasona — the whole site, on the three colours the logo contains.

   Eight values. Three are the brand, read out of the approved PDF's own
   content stream. The other five are derived by one operation only: a brand
   colour laid over another at N%. Nothing is hue-shifted, and no value sits
   between hues — which is what the previous palette got wrong when it kept a
   green for money and an amber for warnings and nudged its greys toward 240.

   The consequence worth stating: there is no red here. A warning gets weight
   and a black field, not a hue. Three colours cannot carry a semantic palette
   and stay three colours, and the brand was the thing that was approved.

   One measurement decides more than any preference: #2F2FE4 on #000000 is
   2.65:1, which fails even the 3:1 bar for non-text. Blue never sits on black
   anywhere on this site, and there is no dark theme, because this palette
   does not have one. */

:root {
  color-scheme: light;

  --blue:       #2F2FE4;   /* the mark, verbatim */
  --ink:        #000000;   /* the mark, verbatim */
  --paper:      #FFFFFF;   /* the mark, verbatim */

  --ink-60:     #666666;   /* black at 60% over white   5.74:1 on paper  */
  --rule:       #D9D9D9;   /* black at 15% over white   hairlines only   */
  --wash:       #F2F2F2;   /* black at  5% over white                    */
  --on-blue-2:  #D5D5FA;   /* white at 80% over blue    5.56:1 on blue   */
  --paper-press:#CCCCCC;   /* black at 20% over white  13.08:1 under ink */

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Radius is a brand decision, not a detail: nothing here is a pill or a
     circle. 22% belongs to the mark alone; 2px is for the stake bars. The
     rounded floating card is the genre's signature and it is gone. */
  --r-mark: 22%;
  --r-bar: 2px;
  --chrome: 104px;         /* measured by site.js, not assumed */
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-60);
  font: 400 17px/1.60 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden }

.wrap { max-width: 1184px; margin: 0 auto; padding: 0 32px }
@media (max-width: 859px) { .wrap { padding: 0 20px } }

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

.h1, .h2, .h3 { color: var(--ink); margin: 0; text-wrap: balance }
.h1 { font: 800 56px/1.02 var(--sans); letter-spacing: -.035em }
.h2 { font: 700 34px/1.08 var(--sans); letter-spacing: -.028em }
.h3 { font: 700 19px/1.30 var(--sans); letter-spacing: -.015em }

.lead  { font-size: 20px; line-height: 1.45; letter-spacing: -.01em; max-width: 32em; margin: 24px 0 0 }
.body  { max-width: 64ch; margin: 0 }
.small { font-size: 15px }

/* Labels are mono and black. The old palette had a third, paler ink whose
   only job was to make them timid. */
.label {
  font: 500 12px/1.40 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}

/* Every money figure is mono: a sum reads as a ledger entry, not a stat. */
.figure { font: 500 40px/1 var(--mono); color: var(--ink) }
.figure-sm { font: 500 26px/1 var(--mono); color: var(--ink) }

/* -------------------------------------------------------------- buttons */

/* Every hover here is a colour swap and nothing else — no lift, no shadow,
   no scale. 120ms is long enough to read as a state and short enough that a
   pointer crossing the page leaves no trail of fades behind it. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .tlink, .nav a, .site-footer a, .door, .menu-row, .chip { transition:
    background-color 120ms ease, color 120ms ease, border-color 120ms ease }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border: 0; border-radius: 0;
  font: 700 16px/1.2 var(--sans); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
}
.btn-primary   { background: var(--blue); color: var(--paper) }
/* Hover resolves toward black, which is already this file's own language —
   .nav a, .site-footer a and .btn-secondary all do it. Both the field AND the
   label are named: a bare a:hover weighs 0-1-1 and .btn-primary weighs 0-1-0,
   so the generic link rule outranks the button and repaints its text. That
   put a black label on a black button once and the text disappeared. */
.btn-primary:hover { background: var(--ink); color: var(--paper) }
.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
  height: 40px; font-size: 15px; white-space: nowrap; padding: 0 16px }
.btn-secondary:hover { background: var(--ink); color: var(--paper) }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed }
.btn-lg { height: 54px; padding: 0 28px; font-size: 17px }

a { color: var(--blue) }
a:not(.btn):hover { color: var(--ink) }

.tlink {
  color: var(--blue); font: 700 16px/1 var(--sans); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
  display: inline-block;
}
.tlink:hover { color: var(--ink) }

/* ---------------------------------------------------------------- bands */

.band-blue  { background: var(--blue);  color: var(--on-blue-2) }
.band-ink   { background: var(--ink);   color: var(--on-blue-2) }
.band-wash  { background: var(--wash) }
.band-blue .h1, .band-blue .h2, .band-blue .h3,
.band-ink .h1, .band-ink .h2, .band-ink .h3 { color: var(--paper) }
.band-blue .label, .band-ink .label { color: var(--on-blue-2) }
.band-blue .figure, .band-ink .figure,
.band-blue .figure-sm, .band-ink .figure-sm { color: var(--paper) }
/* A blue button on a blue field is nothing, and a blue button on black fails
   at 2.65:1. On both fields the call to action inverts instead. */
.band-blue .tlink { color: var(--paper) }
.band-blue .tlink:hover { color: var(--on-blue-2) }
.band-ink .tlink { color: var(--paper) }
.band-ink .tlink:hover { color: var(--paper-press) }
.band-blue .btn-primary { background: var(--paper); color: var(--blue) }
.band-blue .btn-primary:hover { background: var(--on-blue-2); color: var(--blue) }
.band-ink .btn-primary { background: var(--paper); color: var(--ink) }
/* White has nowhere lighter to go, so on black the button steps down. */
.band-ink .btn-primary:hover { background: var(--paper-press); color: var(--ink) }

.section { padding: 80px 0 88px }
.section-tight { padding: 48px 0 96px }
.section-sm { padding: 56px 0 60px }
@media (max-width: 859px) {
  .section, .section-tight, .section-sm { padding: 48px 0 56px }
}

/* ----------------------------------------------------------------- grid */

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px }
.s-7 { grid-column: span 7 } .s-5 { grid-column: span 5 }
.s-6 { grid-column: span 6 } .s-8 { grid-column: span 8 } .s-4 { grid-column: span 4 }
.v-center { align-items: center }
@media (max-width: 859px) {
  .grid { grid-template-columns: 1fr; gap: 32px }
  .s-7, .s-5, .s-6, .s-8, .s-4 { grid-column: 1 }
}

/* ---------------------------------------------------------------- doors */
/* The cards stop being cards. A 2px rule across the top, a hairline between,
   and no box: the rounded floating card is the one shape that would make this
   read as a crypto landing page whatever the colours were. */

.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 }
.doors-3 { grid-template-columns: repeat(3, 1fr) }
.doors-2 { grid-template-columns: repeat(2, 1fr) }
.door {
  padding: 24px; border-top: 2px solid var(--ink);
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.door:first-child { padding-left: 0; border-left: 0 }
.door:hover, .door:focus-within { border-top-color: var(--blue) }
.door .h3 { margin: 14px 0 10px }
.door p { font-size: 18px; line-height: 1.55; margin: 0 0 18px }
.door .tlink { margin-top: auto; align-self: flex-start }
.band-blue .door, .band-ink .door { border-top-color: var(--paper); border-left-color: var(--paper) }
.band-blue .door:hover, .band-ink .door:hover { border-top-color: var(--on-blue-2) }
@media (max-width: 859px) {
  .doors, .doors-3, .doors-2 { grid-template-columns: 1fr }
  .door { padding: 20px 0; border-left: 0 }
}

/* ---------------------------------------------------------------- steps */
/* Numbered because the content is a sequence and the order carries meaning:
   you cannot be refunded before you flag it. Where a list is not a sequence
   it uses .doors, which has no numbers. */

.steps { border-top: 2px solid var(--ink); margin-top: 32px }
.step {
  display: grid; grid-template-columns: 76px 1fr; gap: 0 24px;
  padding: 28px 0; border-bottom: 1px solid var(--rule);
}
.step-n { font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--ink); padding-top: 6px }
.step .h3 { margin: 0 0 8px }
.step p { margin: 0; max-width: 60ch }
.step-note { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); display: block; margin-top: 8px }
/* On a dark band every one of these resolved to its own field: the rule and
   the numbers were black on black, and the note was the brand blue on black,
   which is the 2.65:1 this palette bars outright. Each is restated. */
.band-ink .steps, .band-blue .steps { border-top-color: var(--paper) }
.band-ink .step, .band-blue .step { border-bottom-color: var(--on-blue-2) }
.band-ink .step-n, .band-blue .step-n { color: var(--on-blue-2) }
.band-ink .step-note, .band-blue .step-note { color: var(--paper) }
@media (max-width: 859px) {
  .step { grid-template-columns: 1fr; gap: 6px; padding: 22px 0 }
}

/* ------------------------------------------------------------ the ledger */
/* Where the money goes. A table of sums wants rules and tabular figures, not
   a card with a shadow. */

.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.ledger caption { text-align: left; margin-bottom: 14px }
.ledger th, .ledger td { padding: 13px 0; border-bottom: 1px solid var(--rule); text-align: left }
.ledger td:last-child, .ledger th:last-child { text-align: right; font-family: var(--mono);
  font-weight: 500; color: var(--ink); white-space: nowrap }
.ledger tr:last-child th, .ledger tr:last-child td { border-bottom: 0 }
.ledger .total th, .ledger .total td { border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink) }
.band-blue .ledger th, .band-blue .ledger td,
.band-ink .ledger th, .band-ink .ledger td { border-bottom-color: var(--on-blue-2) }
.band-blue .ledger td:last-child, .band-ink .ledger td:last-child { color: var(--paper) }
.band-blue .ledger .total th, .band-blue .ledger .total td,
.band-ink .ledger .total th, .band-ink .ledger .total td {
  border-top-color: var(--paper); color: var(--paper) }

/* ----------------------------------------------------------------- code */

pre, code { font-family: var(--mono) }
pre {
  background: var(--wash); color: var(--ink); margin: 0;
  padding: 18px 20px; overflow-x: auto; font-size: 14px; line-height: 1.65;
}
.band-blue pre, .band-ink pre { background: var(--paper) }
.code-wrap { position: relative }
.copy-btn {
  position: absolute; top: 10px; right: 10px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
  font: 500 12px/1 var(--mono); padding: 7px 10px; cursor: pointer; border-radius: 0;
}
.copy-btn:hover { background: var(--ink); color: var(--paper) }

/* ---------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
  font: 500 13px/1 var(--mono); padding: 8px 11px; border-radius: 0;
  cursor: pointer;
}
.chip:hover { background: var(--ink); color: var(--paper) }
.chip[aria-pressed="true"] { background: var(--blue); color: var(--paper); border-color: var(--blue) }
.chip-static { cursor: default }
.chip-static:hover { background: transparent; color: var(--ink) }

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

.mark { width: 24px; height: 24px; display: block; color: var(--blue) }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 800 22px/1 var(--sans); letter-spacing: -.04em;
  color: var(--ink); text-decoration: none;
}
.band-blue .brand, .band-ink .brand { color: var(--paper) }
.band-blue .mark, .band-ink .mark { color: var(--paper) }

/* ------------------------------------------------------------- drawings */

.t-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: square }
.t-st { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5 }
.t-st-fill { fill: var(--blue) }
.t-lbl { font: 600 14px/1 var(--sans); fill: var(--ink) }
.t-cap { font: 400 12px/1 var(--mono); fill: var(--ink-60) }
.t-mono { font: 500 12px/1 var(--mono); fill: var(--ink) }
.band-blue .t-line, .band-ink .t-line { stroke: var(--paper); stroke-width: 2 }
.band-blue .t-st, .band-blue .t-st-fill,
.band-ink .t-st, .band-ink .t-st-fill { fill: var(--paper); stroke: none }
.band-blue .t-cap, .band-ink .t-cap { fill: var(--on-blue-2) }
.band-blue .t-mono, .band-blue .t-lbl,
.band-ink .t-mono, .band-ink .t-lbl { fill: var(--paper) }

/* The stake bars. They stack and never overlap, which is the whole reason
   this device replaced the seal: the old one hid its overlap seam behind
   teeth, and the approved mark has none. */
.bar { rx: 2 }
@media (prefers-reduced-motion: no-preference) {
  .js .draw .t-line { stroke-dasharray: 1; stroke-dashoffset: 1 }
  .js .draw.in .t-line { animation: draw-line 400ms ease-out forwards }
  .js .draw .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom }
  .js .draw.in .bar { animation: grow-stake 180ms ease-out forwards }
  .js .draw.in .bar:nth-of-type(1) { animation-delay: 400ms }
  .js .draw.in .bar:nth-of-type(2) { animation-delay: 480ms }
  .js .draw.in .bar:nth-of-type(3) { animation-delay: 560ms }
}
@keyframes draw-line { to { stroke-dashoffset: 0 } }
@keyframes grow-stake { to { transform: scaleY(1) } }

/* ---------------------------------------------------------------- chrome */

.testnet-bar {
  background: var(--blue); color: var(--paper);
  font: 700 14px/1 var(--sans); min-height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 20px; text-align: center; flex-wrap: wrap;
}
.testnet-bar a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px }
.testnet-bar a:hover { color: var(--on-blue-2) }
/* A square, not a dot with a glow ring: the same square the stations are. */
.live { width: 6px; height: 6px; background: var(--paper); flex: none }

.site-header { background: var(--paper); border-bottom: 1px solid transparent }
.site-header.scrolled { border-bottom-color: var(--rule) }
.hdr { display: flex; align-items: center; gap: 28px; height: 64px }
/* The current page used to be marked with a 2px line under the word itself.
   At line-height 1 that lands on the baseline, so it read as an underlined
   hyperlink rather than as navigation. The links fill the header's height
   instead, which puts the same 2px mark down on the header's own bottom edge
   — a tab, sitting on a line that is already there. */
.nav { display: flex; gap: 2px; margin-left: 8px; align-self: stretch }
.nav a { display: inline-flex; align-items: center; padding: 0 11px;
  font: 500 15px/1 var(--sans); letter-spacing: -.005em; color: var(--ink-60);
  text-decoration: none; white-space: nowrap }
.nav a:hover { color: var(--ink); background: var(--wash) }
.nav a[aria-current] { color: var(--ink); font-weight: 700;
  box-shadow: inset 0 -2px var(--blue) }
.hdr-end { margin-left: auto; display: flex; align-items: center; gap: 16px }
.gh { color: var(--ink); display: inline-flex }

/* ----------------------------------------------------------- phone menu */

.menu-btn {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
  font: 700 14px/1 var(--sans); padding: 10px 12px; cursor: pointer; border-radius: 0;
}
.menu-btn svg { width: 18px; height: 18px }
.menu-btn .i-close { display: none }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper) }
.menu-btn[aria-expanded="true"] .i-open { display: none }
.menu-btn[aria-expanded="true"] .i-close { display: block }

.menu-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--chrome);
  background: var(--paper); z-index: 20; overflow-y: auto;
  display: flex; flex-direction: column;
}
.menu-sheet[hidden] { display: none }
.menu-rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule) }
.menu-row {
  display: block; padding: 18px 20px; text-decoration: none;
  border-bottom: 1px solid var(--rule); color: var(--ink-60);
}
.menu-row b { display: block; color: var(--ink); font: 700 18px/1.3 var(--sans); letter-spacing: -.015em }
.menu-row span { font-size: 15px }
.menu-row:hover { background: var(--wash) }
.menu-row[aria-current] { box-shadow: inset 3px 0 var(--blue) }
.sheet-end { padding: 20px; margin-top: auto }
.sheet-end .btn { width: 100%; height: 48px; font-size: 16px }

/* ---------------------------------------------------------------- forms */

.wl-form { max-width: 560px; border-top: 2px solid var(--ink); padding-top: 28px }
.wl-field { border: 0; padding: 0; margin: 0 0 26px }
.wl-field label, .wl-field legend {
  display: block; padding: 0; margin: 0 0 10px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.wl-field input[type="email"], .wl-field input[type="text"], .usd-input input {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 0;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 400 17px/1 var(--sans);
}
.wl-field input::placeholder { color: var(--ink-60) }
.wl-field input:focus-visible, .usd-input input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
.wl-choices { display: grid; gap: 0; border-top: 1px solid var(--rule) }
.wl-choice {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink);
  font-size: 16px;
}
.wl-choice input { accent-color: var(--blue); width: 18px; height: 18px; flex: none }
.wl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.wl-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap }
.wl-note { margin: 0; font-size: 14px; color: var(--ink-60) }
/* No red exists in this palette, so a refusal is said in black at full weight
   and a confirmation in blue. Colour is not carrying the meaning here; the
   sentence is, which is why both states say what happened in words. */
.wl-status { margin: 16px 0 0; font-size: 15px; min-height: 1.4em }
.wl-status.bad { color: var(--ink); font-weight: 700 }
.wl-status.ok { color: var(--blue); font-weight: 700 }

/* --------------------------------------------------------- the buy till */

.till { border-top: 2px solid var(--ink); padding-top: 24px }
.till-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px }
.usd-input { position: relative }
.usd-input .cur {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font: 500 17px/1 var(--mono); color: var(--ink-60); pointer-events: none;
}
.usd-input input { padding-left: 34px; font-family: var(--mono); font-weight: 500 }
.presets { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.out { font: 500 44px/1 var(--mono); color: var(--ink); letter-spacing: -.02em }
.out .unit { font: 700 15px/1 var(--sans); color: var(--ink-60); letter-spacing: 0; margin-left: 8px }
.till-note { font-size: 14px; color: var(--ink-60); margin: 10px 0 0 }
@media (max-width: 859px) { .till-row { grid-template-columns: 1fr; gap: 28px } }

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

.site-footer { background: var(--wash); padding: 56px 0 28px; margin-top: 0 }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px }
.foot-h { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px }
.site-footer ul { list-style: none; margin: 0; padding: 0; columns: 2 }
.site-footer li { margin-bottom: 9px }
.site-footer a { color: var(--ink-60); text-decoration: none; font-size: 15px }
.site-footer a:hover { color: var(--ink) }
@media (max-width: 859px) { .foot-grid { grid-template-columns: 1fr } }

.skip { position: absolute; left: -9999px }
.skip:focus { left: 16px; top: 10px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 30 }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }

@media (max-width: 1100px) { .hdr .btn-secondary { display: none } }
@media (max-width: 959px) {
  .nav, .hdr-end { display: none }
  .menu-btn { display: inline-flex }
}
@media (max-width: 859px) {
  .h1 { font-size: 36px } .h2 { font-size: 28px } .h3 { font-size: 18px }
  .lead { font-size: 18px } body { font-size: 16px }
  .figure { font-size: 32px } .out { font-size: 36px }
}