/* =========================================================================
   v9 — "Blueprint". The engineering drawing of a payment network.
   Ink: #1D4ED8 on white sheets over #F8FAFF paper. Grid: #DBEAFE.
   Marker red #E11D48 is reserved for annotations and the RUN button.
   Type: Chivo (display/body) + Chivo Mono (every measurement and label).
   ========================================================================= */

:root {
  --ink: #1D4ED8;
  --ink-deep: #16389C;
  --ink-soft: rgba(29, 78, 216, .62);
  --grid: #DBEAFE;
  --red: #E11D48;
  --paper: #F8FAFF;
  --sheet: #FFFFFF;
  --line: 1.5px;
  --mono: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Chivo", -apple-system, "Segoe UI", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-deep);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(29, 78, 216, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 2px dashed var(--red); outline-offset: 3px; border-radius: 2px; }

a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { text-wrap: balance; }

/* ---------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 60;
  background: var(--sheet);
  border-bottom: var(--line) solid var(--ink);
}
.top__row { display: flex; align-items: center; gap: 28px; height: 66px; }

.topbrand {
  font-weight: 900; font-size: 26px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; line-height: 1;
}
.topbrand span { color: var(--red); }

.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
/* The two buttons are one block: tight to each other, pushed clear of the
   menu links so the eye separates "navigate" from "act". The nav gap is
   22px, so this lands the pair 38px off the last link. */
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: 16px; }
.nav a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink); text-decoration: none;
  padding: 6px 0; border-bottom: var(--line) solid transparent;
}
.nav a:hover { border-bottom-color: var(--ink); }
.nav .nav__cta {
  border: var(--line) solid var(--ink); padding: 9px 16px;
}
.nav .nav__cta:hover { background: var(--ink); color: #fff; }
/* Sign-in sits next to the contact button and is the returning-merchant
   action, so it carries the filled treatment while contact stays outlined. */
.nav .nav__cta--solid { background: var(--ink); color: #fff; }
.nav .nav__cta--solid:hover { background: var(--ink-deep); border-color: var(--ink-deep); }

/* language dropdown */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--ink);
  background: none; border: var(--line) solid var(--ink);
  padding: 11px 12px; cursor: pointer;
}
.lang__btn svg { width: 10px; height: 6px; transition: transform .18s ease; }
.lang.is-open .lang__btn svg { transform: rotate(180deg); }
.lang__pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 176px;
  background: var(--sheet); border: var(--line) solid var(--ink);
  box-shadow: 6px 6px 0 rgba(29, 78, 216, .14);
  display: none; z-index: 70;
}
.lang.is-open .lang__pop { display: block; }
.lang__pop a {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; color: var(--ink-deep); text-decoration: none;
  padding: 10px 14px; border-bottom: 1px solid var(--grid);
}
.lang__pop a:last-child { border-bottom: 0; }
.lang__pop a b { font-family: var(--mono); font-size: 11px; color: var(--ink); width: 22px; }
.lang__pop a:hover { background: var(--paper); }
.lang__pop a.is-current { background: var(--ink); color: #fff; }
.lang__pop a.is-current b { color: #fff; }

/* burger + mobile nav */
.burger {
  display: none; width: 44px; height: 44px;
  background: none; border: var(--line) solid var(--ink); cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  top: 50%; margin-top: -1px; background: var(--ink);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--ink);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }

.mnav {
  display: none;
  border-top: 1px dashed var(--ink-soft);
  background: var(--sheet);
}
.mnav.is-open { display: block; }
.mnav a {
  display: block; padding: 15px 20px;
  font-family: var(--mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--grid);
}
.mnav a:hover { background: var(--paper); }

/* ---------------------------------------------------------------- sheets */
main { display: block; }
main > .wrap { margin-top: 34px; }
main > .wrap:first-child { margin-top: 26px; }

section[id] { scroll-margin-top: 90px; }

.sheet {
  position: relative;
  background: var(--sheet);
  border: var(--line) solid var(--ink);
  box-shadow: 8px 8px 0 rgba(29, 78, 216, .10);
  padding: 44px 44px 40px;
}

/* drawing-sheet title bar */
.sheet__bar {
  display: flex; justify-content: space-between; gap: 14px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  border-bottom: var(--line) solid var(--ink);
  margin: -44px -44px 36px; padding: 10px 16px;
  background:
    repeating-linear-gradient(-45deg, rgba(29, 78, 216, .05) 0 5px, transparent 5px 10px);
}
.sheet__bar span + span { border-left: 1px solid var(--grid); padding-left: 14px; }

/* corner crop marks */
.crop::before, .crop::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.crop::before { top: -7px; left: -7px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.crop::after  { bottom: -7px; right: -7px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); }

/* registration marks (hero / cta corners) */
.reg {
  position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--ink);
  border-radius: 50%; pointer-events: none;
}
.reg::before, .reg::after { content: ""; position: absolute; background: var(--ink); }
.reg::before { left: 50%; top: -4px; bottom: -4px; width: 1px; margin-left: -.5px; }
.reg::after { top: 50%; left: -4px; right: -4px; height: 1px; margin-top: -.5px; }
.reg--tl { top: 10px; left: 10px; }
.reg--tr { top: 10px; right: 10px; }
.reg--bl { bottom: 10px; left: 10px; }
.reg--br { bottom: 10px; right: 10px; }
/* the hero title block owns the bottom edge; the cta bar owns the top one */
.hero .reg--bl, .hero .reg--br { display: none; }
.sheet--cta .reg--tl, .sheet--cta .reg--tr { top: 48px; }

/* section headings */
.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
  margin-bottom: 14px;
}
.eyebrow span::before { content: "[ "; color: var(--ink-soft); }
.eyebrow span::after { content: " ]"; color: var(--ink-soft); }

.shead { max-width: 720px; margin-bottom: 40px; }
.shead h2 {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.08; color: var(--ink);
  margin-bottom: 14px;
}
.shead .sub { color: var(--ink-deep); opacity: .82; text-wrap: pretty; }
.shead--free { margin: 6px 4px 30px; }
.shead--tight { margin-bottom: 0; }

/* buttons */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 26px; border: var(--line) solid var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn--solid { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 rgba(29, 78, 216, .28); }
.btn--solid:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(29, 78, 216, .28); }
.btn--line { background: var(--sheet); color: var(--ink); }
.btn--line:hover { background: var(--paper); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(29, 78, 216, .16); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 4px 4px 0 rgba(225, 29, 72, .25); }
.btn--red:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(225, 29, 72, .25); }

/* ---------------------------------------------------------------- hero */
/* The coordinate grid lives on a pseudo-element at opacity .08 (compliance
   note: it must never visually cut through letterforms), and the content
   sits above it at z-index 10. */
.hero {
  padding: 0;
  position: relative;
  isolation: isolate;
  background: var(--paper);   /* opaque, so the body grid cannot double up */
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .08;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px),
    linear-gradient(var(--ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}

.hero__grid {
  position: relative;
  z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 30px; align-items: center;
  padding: 64px 48px 48px;
}

.hero__copy h1 {
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.03; color: var(--ink);
  margin-bottom: 22px;
}
.hero__sub {
  font-size: 18px; max-width: 470px; text-wrap: pretty;
  color: var(--ink-deep); opacity: .85; margin-bottom: 30px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.hero__since {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--ink); border: 1px dashed var(--ink-soft); padding: 8px 14px;
}
/* A rubber stamp. Works on its own as well as inside a .hero__since line. */
.stamp {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  font-weight: 700; color: var(--red); border: 1.5px solid var(--red);
  padding: 1px 6px; transform: rotate(-3deg); letter-spacing: .12em;
  text-transform: uppercase;
}
.hero__since .stamp { font-size: inherit; }

.hero__draw { min-width: 0; }
.schema { display: block; width: 100%; height: auto; }

/* schematic vocabulary */
.sch-box { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.sch-fill { fill: var(--grid); }
.sch-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.sch-thin { stroke-width: 1; opacity: .55; }
.sch-ext { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .32; stroke-dasharray: 3 4; }
.sch-txt { font-family: var(--mono); font-size: 11px; fill: var(--ink); letter-spacing: .06em; }
.sch-b { font-weight: 700; }
.sch-dim { opacity: .62; font-size: 10px; }
.sch-node { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.sch-cross path { stroke: var(--ink); stroke-width: 1; opacity: .45; fill: none; }
.sch-cross circle { stroke: var(--ink); stroke-width: 1; opacity: .45; fill: none; }

.sch-active {
  fill: none; stroke: var(--ink); stroke-width: 2.25;
  stroke-dasharray: 7 9;
  animation: dashflow 1.1s linear infinite;
}
@keyframes dashflow { to { stroke-dashoffset: -32; } }

.sch-red ellipse { fill: none; stroke: var(--red); stroke-width: 2; }
.sch-red-lead { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.sch-redtxt { fill: var(--red); font-weight: 700; font-style: italic; font-size: 13px; }

/* hero title block */
.tblock {
  display: grid; grid-template-columns: 1.6fr .8fr .7fr 1.5fr;
  border-top: var(--line) solid var(--ink);
  background: var(--sheet);
}
.tblock span {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--ink);
  padding: 10px 16px 12px;
}
.tblock span + span { border-left: var(--line) solid var(--ink); }
.tblock b { font-weight: 500; font-size: 9px; letter-spacing: .2em; opacity: .55; }

/* ---------------------------------------------------------------- trust rail */
.rail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 22px; margin-top: 26px; padding: 16px 10px;
  border-top: 1px dashed var(--ink-soft);
  border-bottom: 1px dashed var(--ink-soft);
}
.rail__marks { display: inline-flex; align-items: center; gap: 16px; }
.rail__visa { width: 58px; height: 20px; }
.rail__mc { width: 40px; height: 24px; }
.rail__it {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.rail__tick { width: 1px; height: 18px; background: var(--ink); opacity: .35; transform: rotate(18deg); }

/* ---------------------------------------------------------------- stats as dimensions */
.dims {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px;
}
.dim { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.dim__v {
  position: relative; align-self: center;
  font-weight: 900; font-size: clamp(44px, 5vw, 64px);
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
  padding: 10px 6px 14px;
  font-variant-numeric: tabular-nums;
}
.dim__v--circ { padding-inline: 20px; }
.circ {
  position: absolute; inset: -4px 0 2px;
  border: 2.5px solid var(--red);
  border-radius: 47% 53% 44% 56% / 58% 46% 56% 44%;
  transform: rotate(-5deg);
  pointer-events: none;
}

.dim__line { position: relative; height: 0; border-top: var(--line) solid var(--ink); margin: 0 2px 12px; }
.dim__line::before, .dim__line::after {
  content: ""; position: absolute; top: -5.5px;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.dim__line::before { left: 0; border-right: 9px solid var(--ink); }
.dim__line::after { right: 0; border-left: 9px solid var(--ink); }

.dim__k {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-deep); opacity: .78;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- capability callouts */
.callouts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 38px 56px;
}
.co { display: grid; grid-template-columns: 40px 46px minmax(0, 1fr); align-items: start; }
.co__n {
  width: 40px; height: 40px; border: var(--line) solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--sheet);
  box-shadow: 3px 3px 0 rgba(29, 78, 216, .12);
}
.co__lead { border-top: var(--line) dashed var(--ink-soft); margin-top: 20px; position: relative; }
.co__lead::after {
  content: ""; position: absolute; right: 6px; top: -3.25px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink);
}
.co__body h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 8px 0 8px; letter-spacing: -.01em; }
.co__body p { font-size: 15.5px; opacity: .85; text-wrap: pretty; }

/* ---------------------------------------------------------------- integration step sheets */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stepsheet {
  position: relative; background: var(--sheet);
  border: var(--line) solid var(--ink);
  box-shadow: 6px 6px 0 rgba(29, 78, 216, .10);
  padding: 0 26px 28px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
.stepsheet__bar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: var(--line) solid var(--ink);
  background: var(--sheet);
  margin: 0 -26px 22px; padding: 10px 16px;
}
.stepsheet__bar span:first-child { font-weight: 700; color: var(--red); }
.stepsheet h3 { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-bottom: 10px; }
.stepsheet p { font-size: 15.5px; opacity: .85; text-wrap: pretty; }

/* ---------------------------------------------------------------- playground */
.sheet--pg {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
}

.pg { border: var(--line) solid var(--ink); background: var(--sheet); box-shadow: 8px 8px 0 rgba(29, 78, 216, .12); }

.pg__tabs { display: flex; border-bottom: var(--line) solid var(--ink); }
.pg__tab {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 0; border-right: var(--line) solid var(--ink);
  color: var(--ink); opacity: .55; padding: 13px 24px; cursor: pointer;
}
.pg__tab[aria-selected="true"] {
  opacity: 1; background: var(--ink); color: #fff;
}

.pg__method {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px dashed var(--ink-soft);
  font-family: var(--mono); font-size: 13px;
}
.pg__verb {
  font-weight: 700; color: #fff; background: var(--red);
  padding: 2px 9px; letter-spacing: .08em; font-size: 11.5px;
}
.pg__path { color: var(--ink); font-weight: 700; letter-spacing: .04em; }

.pg__body { background: var(--paper); }
.pg__view { display: none; }
.pg__view.is-on { display: block; }
.pg__view pre {
  margin: 0; padding: 22px 22px 24px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.62;
  color: #2C3E7A; min-height: 265px;
  tab-size: 2;
}
.pg pre .k { color: var(--ink); font-weight: 700; }
.pg pre .s { color: var(--ink-deep); }
.pg pre .n { color: var(--red); font-weight: 700; }
.pg pre .c { color: var(--ink-soft); font-style: italic; }

@keyframes pgflash {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.pg__view.flash pre { animation: pgflash .38s ease; }

.pg__controls {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;
  padding: 18px 20px; border-top: var(--line) solid var(--ink);
}
.ctrl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctrl label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.ctrl select {
  font-family: var(--mono); font-size: 14px; color: var(--ink-deep);
  background: var(--sheet); border: var(--line) solid var(--ink);
  padding: 11px 12px; width: 100%; cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--ink) 50%), linear-gradient(-45deg, transparent 49%, var(--ink) 50%);
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 18px) 55%, calc(100% - 11px) 55%;
  background-repeat: no-repeat;
}

.pg__run {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--red); border: var(--line) solid var(--red);
  padding: 13px 28px; cursor: pointer;
  box-shadow: 4px 4px 0 rgba(225, 29, 72, .25);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.pg__run:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(225, 29, 72, .25); }
.pg__run.is-busy { opacity: .55; pointer-events: none; transform: none; box-shadow: none; }
.pg__run.is-busy span::after { content: "…"; }

.pg__result {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px dashed var(--ink-soft);
}
.pg__stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 20px;
}
.pg__stat + .pg__stat { border-left: 1px dashed var(--ink-soft); }
.pg__stat b {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.pg__stat span { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); }
.pg__stat span.ok::before { content: "✓ "; color: var(--red); }

.pg__note {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-soft); padding: 12px 20px 14px;
  border-top: var(--line) solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgba(29, 78, 216, .04) 0 5px, transparent 5px 10px);
}

/* ---------------------------------------------------------------- coverage */
.regions { list-style: none; display: grid; gap: 0; border-top: var(--line) solid var(--ink); }
.regions li {
  display: grid; grid-template-columns: 64px 200px minmax(0, 1fr) 76px;
  align-items: center; gap: 22px;
  padding: 17px 4px; border-bottom: 1px dashed var(--ink-soft);
}
.regions__id { font-family: var(--mono); font-size: 11px; color: var(--red); font-weight: 700; letter-spacing: .1em; }
.regions__name { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.regions__rail { position: relative; height: 0; border-top: 1.5px dashed var(--grid); }
.regions__rail i {
  position: absolute; left: 0; top: -1.5px; height: 0; width: var(--w, 50%);
  border-top: 3px solid var(--ink);
}
.regions__rail i::after {
  content: ""; position: absolute; right: -2px; top: -5px;
  width: 7px; height: 7px; background: var(--sheet);
  border: 1.5px solid var(--ink); border-radius: 50%;
}
.regions__code { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); text-align: right; letter-spacing: .08em; }

.regions__note {
  margin-top: 18px; font-family: var(--mono); font-size: 12px;
  color: var(--ink-soft); letter-spacing: .04em;
}
.regions__note .asterisk { color: var(--red); font-weight: 700; margin-right: 6px; font-size: 15px; }

/* ---------------------------------------------------------------- company */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.facts { border: var(--line) solid var(--ink); background: var(--sheet); box-shadow: 6px 6px 0 rgba(29, 78, 216, .10); }
.fact {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--grid);
}
.fact:last-child { border-bottom: 0; }
.fact dt {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  padding-top: 4px;
}
.fact dd { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }

/* ---------------------------------------------------------------- cta */
.sheet--cta {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(rgba(29, 78, 216, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, .09) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
  padding-bottom: 56px;
}
.cta { max-width: 660px; margin: 14px auto 6px; text-align: center; }
.cta h2 {
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.05; color: var(--ink);
  margin-bottom: 16px;
}
.cta .sub { opacity: .85; margin-bottom: 30px; text-wrap: pretty; }
.cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------------------------------------------------------------- footer (blue print) */
.foot {
  margin-top: 60px;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  color: #fff;
  border-top: 4px solid var(--ink-deep);
}
.foot__wrap { padding: 52px 0 40px; }

.foot .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 26px; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
}
.foot .brand i {
  width: 13px; height: 13px; border: 2px solid #fff; display: inline-block;
  transform: rotate(45deg);
}

.foot .marks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0 26px; }
.foot .marks svg { height: 20px; width: auto; opacity: .95; }
.foot .marks__sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .4); }
.foot .badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .55); padding: 5px 10px;
  color: #fff;
}

.foot .fnav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px 0; border-top: 1px dashed rgba(255, 255, 255, .35); border-bottom: 1px dashed rgba(255, 255, 255, .35); }
.foot .fnav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  border-bottom: 1px solid transparent; padding: 2px 0;
}
.foot .fnav a:hover { border-bottom-color: #fff; }

.foot .flegal { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 20px 0 16px; font-size: 13px; }
.foot .flegal a { color: rgba(255, 255, 255, .9); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.foot .flegal a:hover { border-bottom-color: #fff; color: #fff; }
.foot .sep { color: rgba(255, 255, 255, .35); }

.foot .fcopy { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .85); margin-bottom: 16px; }
.foot .fcorp, .foot .fdisc { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 900px; margin-bottom: 12px; text-wrap: pretty; }
.foot .fcorp strong { color: #fff; }
.foot .fcorp a { color: #fff; }

.foot .flang { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .35); }
.foot .flang > span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.foot .flang nav { display: flex; gap: 8px; }
.foot .flang nav a {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .5); padding: 5px 9px;
}
.foot .flang nav a:hover { border-color: #fff; }
.foot .flang nav a.is-current { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------------------------------------------------------------- reveals */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; padding: 48px 32px 40px; }
  .hero__draw { max-width: 640px; }
  .dims { grid-template-columns: repeat(2, 1fr); }
  .co-grid { grid-template-columns: 1fr; gap: 34px; }
  .tblock { grid-template-columns: 1fr 1fr; }
  .tblock span:nth-child(n+3) { border-top: var(--line) solid var(--ink); }
  .tblock span:nth-child(3) { border-left: 0; }
}

@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }
  .lang { order: 2; }
  .top__row { gap: 14px; }
  .topbrand { margin-right: auto; }
  .burger { margin-left: 0; }

  .steps { grid-template-columns: 1fr; }
  .callouts { grid-template-columns: 1fr; gap: 30px; }
  .pg__controls { grid-template-columns: 1fr; }
  .pg__run { width: 100%; }
  .pg__result { grid-template-columns: 1fr; }
  .pg__stat + .pg__stat { border-left: 0; border-top: 1px dashed var(--ink-soft); }

  .regions li { grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 14px; }
  .regions__rail { display: none; }
  .regions__name { font-size: 18px; }
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .reg { display: none; }
  .sheet { padding: 30px 22px 28px; }
  .sheet__bar { margin: -30px -22px 26px; padding: 9px 12px; font-size: 9px; letter-spacing: .1em; }
  .sheet__bar span + span { padding-left: 10px; }
  .hero__grid { padding: 38px 22px 30px; }
  .hero__sub { font-size: 16.5px; }
  .btn { padding: 14px 20px; font-size: 12px; }
  .dims { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .dim__v { font-size: 40px; }
  .co { grid-template-columns: 36px 22px minmax(0, 1fr); }
  .co__n { width: 36px; height: 36px; font-size: 12px; }
  .stepsheet { padding: 0 20px 24px; }
  .stepsheet__bar { margin: 0 -20px 18px; }
  .tblock { grid-template-columns: 1fr 1fr; }
  .fact { grid-template-columns: 1fr; gap: 4px; padding: 13px 16px; }
  .pg__view pre { font-size: 12px; min-height: 240px; }
  .foot__wrap { padding: 40px 0 32px; }
}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .sch-active { stroke-dasharray: none; }
}

/* ============================================================================
   AUTH SHEETS — login and signup. Same drawing idiom as the playground
   controls: mono uppercase labels, hard ink borders, offset shadow on submit.
   ========================================================================= */

.auth { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; }
.auth__form { padding: 40px 44px 44px; min-width: 0; }
.auth__side {
  padding: 40px 40px 44px; border-left: var(--line) solid var(--ink);
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(29, 78, 216, .045) 9px 10px),
    var(--paper);
}
.auth--solo { grid-template-columns: minmax(0, 520px); justify-content: center; }

.frm { display: grid; gap: 20px; }
.frm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.frm__f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.frm__f label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.frm input[type="text"],
.frm input[type="email"],
.frm input[type="password"] {
  font-family: var(--mono); font-size: 15px; color: var(--ink-deep);
  background: var(--sheet); border: var(--line) solid var(--ink);
  padding: 13px 14px; width: 100%;
}
.frm input::placeholder { color: var(--ink-soft); }
.frm input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.frm input:user-invalid { border-color: var(--red); }

.frm__hint { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

.frm__chk { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.frm__chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.frm__chk i {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; position: relative;
  border: var(--line) solid var(--ink); background: var(--sheet);
}
.frm__chk i::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--ink); opacity: 0; transform: scale(.5);
  transition: opacity .14s ease, transform .14s ease;
  clip-path: polygon(14% 48%, 38% 72%, 86% 20%, 96% 32%, 38% 92%, 4% 58%);
}
.frm__chk input:checked + i::after { opacity: 1; transform: none; }
.frm__chk input:focus-visible + i { outline: 2px solid var(--red); outline-offset: 2px; }
.frm__chk span { font-size: 14.5px; line-height: 1.55; color: var(--ink-deep); }
.frm__chk a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.frm__submit {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--ink); border: var(--line) solid var(--ink);
  padding: 15px 30px; cursor: pointer; justify-self: start;
  box-shadow: 4px 4px 0 rgba(29, 78, 216, .22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.frm__submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(29, 78, 216, .22); }
.frm__submit:active { transform: none; box-shadow: none; }

.frm__alt { font-size: 14.5px; color: var(--ink-deep); }
.frm__alt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Server replies land here. Kept in the flow so it never covers a field. */
.frm__msg {
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  border: var(--line) solid var(--ink); border-left-width: 5px;
  padding: 13px 15px; color: var(--ink-deep); background: var(--paper);
}
.frm__msg:empty { display: none; }
.frm__msg.is-err { border-color: var(--red); color: var(--red); }

.auth__list { display: grid; gap: 0; margin-top: 26px; }
.auth__list li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px dashed var(--ink-soft); list-style: none;
  font-size: 15px; line-height: 1.5; color: var(--ink-deep);
}
.auth__list li:last-child { border-bottom: 1px dashed var(--ink-soft); }
.auth__list b {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: var(--red); padding-top: 3px;
}

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { border-left: 0; border-top: var(--line) solid var(--ink); }
  .auth__form, .auth__side { padding: 30px 22px 34px; }
  .frm__row { grid-template-columns: 1fr; }
}

/* ============================================================================
   SCHEDULE TABLES — an endpoint or parts list inside a sheet. Header rule solid
   like a section cut, rows dashed like a parts schedule.
   ========================================================================= */

.tscroll { overflow-x: auto; }

.sheet table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 13.5px;
}
.sheet thead th {
  text-align: left; padding: 15px 20px; white-space: nowrap;
  border-bottom: var(--line) solid var(--ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.sheet tbody td {
  padding: 15px 20px; vertical-align: top; color: var(--ink-deep);
  border-bottom: 1px dashed var(--ink-soft); line-height: 1.5;
}
.sheet tbody tr:last-child td { border-bottom: 0; }
.sheet tbody tr:hover td { background: var(--paper); }
.sheet td .pg__verb { display: inline-block; }
.sheet td .pg__path { white-space: nowrap; }

@media (max-width: 700px) {
  .sheet thead th, .sheet tbody td { padding: 12px 14px; font-size: 12.5px; }
}

/* A callout whose body opens with a paragraph instead of a heading: the leader
   line has to meet the first line of type, not where an h3 would have been. */
.co:has(.co__body > p:first-child) .co__lead { margin-top: 12px; }

/* ============================================================================
   LEGAL SHEETS — a reviewed document reproduced on a drawing sheet.

   The copy is fixed, lawyer-approved text, so this block only ever changes how
   it looks: the measure is capped near 70 characters, hierarchy is carried by
   rules and mono labels rather than size alone, and the clause index the
   Russian documents ship with is redrawn as a schedule instead of a card.

   Two markup shapes land here. The keyed Russian documents build .legal with a
   .legal__idx column; the four literal English documents inherit the chrome
   from includes/legal_head.php and keep their original .legal-updated /
   ul.plain hooks, which is why those two old class names are styled here.
   ========================================================================= */

/* --measure is the reading width: ~70 characters of Chivo at this size. */
.legal, .shead--doc { --measure: 62ch; }

.legal {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: 0 44px; align-items: start;
}
.legal--solo { grid-template-columns: minmax(0, 1fr); }
/* with no index column the sheet is far wider than the text needs: centre the
   document so the section rules stay close to the type they cut */
.legal--solo .legal__doc { max-width: 76ch; margin-inline: auto; }

/* the document title block, and the same treatment for an un-wrapped h1 */
.shead--doc { max-width: none; margin-bottom: 36px; }
.shead--doc h1, .legal__doc > h1 {
  font-size: clamp(30px, 3.8vw, 44px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.06; color: var(--ink);
  max-width: 26ch; margin-bottom: 14px;
}
.shead--doc .sub, .legal .legal-updated {
  max-width: var(--measure); color: var(--ink-deep); opacity: .82; text-wrap: pretty;
}
/* the first h2 already carries a section rule, so this line takes none */
.legal .legal-updated {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); opacity: 1; margin: 0;
}

/* clause index — a sticky schedule of the sections below */
.legal__idx { position: sticky; top: 92px; align-self: start; min-width: 0; }
.legal__idx > b {
  display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 10px; border-bottom: var(--line) solid var(--ink);
}
.legal__idx a {
  display: block; padding: 10px 10px; text-decoration: none;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  line-height: 1.4; color: var(--ink);
  border-bottom: 1px dashed var(--ink-soft);
}
.legal__idx a:hover { background: var(--paper); color: var(--ink-deep); }

/* the same anchors as chips, for the widths that have no room for the index */
.legal__jump {
  display: none; gap: 8px; overflow-x: auto;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px dashed var(--ink-soft);
}
.legal__jump a {
  flex: 0 0 auto; white-space: nowrap; text-decoration: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--ink); padding: 9px 12px;
}
.legal__jump a:hover { background: var(--ink); color: #fff; }

/* the document body */
.legal__doc { min-width: 0; }
.legal__doc > section { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dashed var(--ink-soft); }
.legal__doc > section:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.legal h2, .legal h3 { font-weight: 800; color: var(--ink); letter-spacing: -.012em; line-height: 1.18; }
.legal h2 { font-size: 22px; margin: 0 0 14px; }
.legal h3 { font-size: 19px; margin: 0 0 12px; }
/* a flat English document has no <section>, so its h2 carries the section cut */
.legal__doc > h2 { margin-top: 36px; padding-top: 22px; border-top: var(--line) solid var(--ink); }

.legal p, .legal li { font-size: 16.5px; line-height: 1.62; color: var(--ink-deep); max-width: var(--measure); text-wrap: pretty; }
.legal p { margin: 0 0 14px; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { font-weight: 800; color: var(--ink); }
.legal em { font-style: italic; color: var(--ink); }
.legal u { text-decoration-color: var(--red); text-underline-offset: 3px; }

.legal ul, .legal ol { margin: 0 0 16px; padding-left: 20px; max-width: var(--measure); }
.legal li { margin-bottom: 10px; }
.legal li:last-child { margin-bottom: 0; }
.legal ol { list-style: decimal; }
.legal ol > li::marker { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.legal ul { list-style: none; }
.legal ul > li { position: relative; }
.legal ul > li::before {
  content: ""; position: absolute; left: -20px; top: .62em;
  width: 6px; height: 6px; background: var(--ink);
}
/* lists that already letter their own items must not get a second marker */
.legal ul.plain { padding-left: 0; }
.legal ul.plain > li::before { display: none; }

.legal__doc p a, .legal__doc li a, .legal__doc td a {
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.legal__doc p a:hover, .legal__doc li a:hover, .legal__doc td a:hover { color: var(--red); }

/* the summary note: an annotation pinned to the margin in marker red */
.legal__note {
  max-width: var(--measure); margin: 0 0 18px; padding: 16px 18px;
  background: var(--paper); border: var(--line) solid var(--ink);
  border-left: 5px solid var(--red);
}
.legal__note strong { color: var(--red); }
.legal__muted { font-size: 14.5px; color: var(--ink); opacity: .7; }

.legal table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-family: var(--mono); font-size: 13.5px; }
.legal th {
  text-align: left; padding: 13px 14px; border-bottom: var(--line) solid var(--ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.legal td { padding: 13px 14px; vertical-align: top; color: var(--ink-deep); border-bottom: 1px dashed var(--ink-soft); }

/* Back to the top of the document. Deliberately a link in the flow: the old
   floating chip needed a scroll listener, and this sheet ships no JS. */
.legal__back {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 34px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border: var(--line) solid var(--ink); padding: 11px 16px;
}
.legal__back:hover { background: var(--ink); color: #fff; }
.legal__back svg { width: 13px; height: 13px; }

@media (max-width: 1024px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__idx { position: static; display: none; margin-bottom: 28px; }
  /* a document that ships no chip rail keeps its index: it is the only nav */
  .legal:not(:has(.legal__jump)) .legal__idx { display: block; }
  .legal__jump { display: flex; }
}

@media (max-width: 540px) {
  .shead--doc h1, .legal__doc > h1 { font-size: 27px; }
  .legal h2 { font-size: 19px; }
  .legal h3 { font-size: 17px; }
  .legal p, .legal li { font-size: 15.5px; }
  .legal__doc > h2 { margin-top: 28px; padding-top: 18px; }
  .legal .legal-updated { font-size: 11px; margin-bottom: 24px; }
}

/* Static specimen labels: the API block is an illustration, not a console, so
   request and response are both on screen instead of behind tabs. */
.pg__label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  padding: 11px 22px; background: var(--sheet);
  border-bottom: 1px dashed var(--ink-soft);
}
.pg__label + .pg__view + .pg__label { border-top: var(--line) solid var(--ink); }
.pg__view pre { min-height: 0; }