/*
  Shared by every page of running text: support, privacy and terms, and the
  guides under /guides/ and /ru/guides/. Not by the two home pages, which
  have home.css.

  The legal pages came first, which is why the file has this name. It was
  not renamed when the guides arrived because the guides are the same thing
  typographically — long text read top to bottom — and a rename would buy a
  tidier name at the cost of every cached copy. A plain file is still no
  build step.

  The tokens are copied from index.html rather than shared with it, for the
  same reason: changing the home page's palette should not be able to restyle
  a legal document by accident. Keep the two in step by hand.
*/
:root {
  --clay: oklch(0.985 0.008 85);
  --clay-sunk: oklch(0.955 0.013 85);
  --ink: oklch(0.24 0.055 265);
  --ink-soft: oklch(0.46 0.03 265);
  --line: oklch(0.9 0.014 265);
  --indigo: oklch(0.47 0.16 262);
  --saffron: oklch(0.78 0.15 72);
  --white: #fff;

  /* Onest carries Cyrillic for the Russian guides; see home.css. */
  --sans: "Instrument Sans", "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Onest", "Instrument Sans", ui-sans-serif, system-ui,
    sans-serif;

  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--clay);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--indigo);
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 7px;
}

.shell {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--white);
  padding: 0.8rem 1.1rem;
  border-radius: 0 0 10px 0;
}
.skip:focus {
  left: 0;
}

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

.top {
  border-bottom: 1px solid var(--line);
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.seal {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.top a.back {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 9px;
}

.top a.back:hover {
  color: var(--ink);
  background: oklch(0.47 0.16 262 / 0.07);
}

/* -------------------------------------------------------------------- text */

/*
  A reading measure, not the page width. Legal text set at 72rem is a line
  nobody can track back from, which is its own way of not being read.
*/
.doc {
  max-width: 44rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.doc h1,
.doc h2,
.doc h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
}

.doc h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: -0.04em;
  margin: 0;
}

.doc h2 {
  font-size: 1.45rem;
  margin: 2.6rem 0 0.7rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.doc h3 {
  font-size: 1.1rem;
  margin: 1.6rem 0 0.4rem;
}

.doc p,
.doc ul,
.doc ol {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.doc ul,
.doc ol {
  padding-left: 1.3rem;
}

.doc li + li {
  margin-top: 0.35rem;
}

.lede {
  margin-top: 1rem !important;
  color: var(--ink-soft);
  font-size: 1.15rem;
}

.meta {
  color: var(--ink-soft);
  font-size: 0.925rem;
}

/* Tables are the one thing allowed to be wider than a phone. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.2rem;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.doc th {
  font-weight: 600;
  background: var(--clay-sunk);
}

/* The contact block on the support page: the thing someone came for. */
.card {
  margin: 1.8rem 0;
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: 0 14px 14px 0;
}

.card p:last-child {
  margin-bottom: 0;
}

.card .address {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/*
  Facts only the business can supply — a legal entity name, a governing law.
  Visible on purpose: a plausible-looking guess in a contract is worse than an
  obvious gap. Saffron is a graphic colour here, never the text colour, so the
  text stays on ink and clears contrast.
*/
.todo {
  background: oklch(0.78 0.15 72 / 0.28);
  color: var(--ink);
  padding: 0 0.25em;
  border-radius: 4px;
  box-shadow: inset 0 -2px 0 var(--saffron);
}

/* ------------------------------------------------------------------ guides */

.crumbs {
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.crumbs a {
  color: var(--ink-soft);
}

/* Numbered steps get a counter in the margin rather than "Step 1" in every
   heading, which would read as filler and repeat the same word down the
   page for a search engine. */
.doc ol.steps {
  list-style: none;
  padding-left: 0;
  counter-reset: step;
}

.doc ol.steps > li {
  position: relative;
  padding-left: 2.8rem;
  counter-increment: step;
}

.doc ol.steps > li + li {
  margin-top: 1.4rem;
}

.doc ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
}

.doc ol.steps h3 {
  margin-top: 0;
}

.doc code {
  font-size: 0.9em;
  background: var(--clay-sunk);
  padding: 0.1em 0.35em;
  border-radius: 5px;
}

/* The one call to action on a guide, at the point a reader has finished it. */
.cta {
  margin: 2.6rem 0 0;
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.cta h2 {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
}

.btn {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.8rem 1.3rem;
  border-radius: 11px;
  background: var(--indigo);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.btn:hover {
  background: oklch(0.37 0.14 262);
}

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

.foot {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

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

.foot nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}