/*
  The public site.

  Plain CSS, no framework and no build. A marketing page is a document: it has to
  be readable by a crawler on the first request, printable, and openable on a
  phone with one bar of signal. Everything here is one file the browser caches
  once, which is faster than any pipeline that would produce it.

  The palette is the till's own - warm amber on near-black - so the screenshots
  and the page they sit on do not look like two different products.
*/

:root {
  --ink: #0d0e11;
  --ink-2: #131519;
  --ink-3: #1a1d23;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.14);

  --text: #f1f2f4;
  --text-2: #b6bac2;
  --text-3: #7c828d;

  --amber: #f5a524;
  --amber-2: #ffc35c;
  --amber-dim: rgba(245, 165, 36, 0.14);

  --free: #3ecf8e;
  --taken: #f5a524;
  --bill: #ff5a5f;

  --radius: 14px;
  --page: 1140px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* So a short page - the sign-in form on a tall screen - still puts its footer
     at the bottom instead of halfway up. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

main {
  flex: 1;
}

/* Grid and flex children are min-width:auto by default, which means a wide
   child - a table of eight, a long word - pushes the whole page sideways
   instead of shrinking. Every container here would rather scroll its own
   contents than make the page scroll. */
.hero__in > *,
.form-wrap > *,
.shot__body > * {
  min-width: 0;
}

a {
  color: var(--amber-2);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.num {
  font-variant-numeric: tabular-nums;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 22px;
}

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

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 14, 17, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.top__in {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
}

.logo:hover {
  text-decoration: none;
}

.logo__mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--amber), #d9821a);
  color: #241703;
  font-size: 15px;
}

.top nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14.5px;
}

.top nav a {
  color: var(--text-2);
}

.top nav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* The two topic groups collapse into <details> rather than a hover menu, so
   the same markup opens on a tap as well as a click and needs no script to
   run it. A summary is a nav link that happens to hold a panel instead of a
   URL of its own. */
.top nav details {
  position: relative;
}

.top nav summary {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text-2);
  list-style: none;
}

.top nav summary::-webkit-details-marker {
  display: none;
}

.top nav summary:hover,
.top nav details[open] > summary {
  color: var(--text);
}

.nav-drop__caret {
  font-size: 10px;
  color: var(--text-3);
  transition: transform 0.15s ease;
}

.top nav details[open] .nav-drop__caret {
  transform: rotate(180deg);
}

.nav-drop__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 8px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.nav-drop__menu a {
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 14px;
}

.nav-drop__menu a:hover {
  background: var(--ink-3);
  color: var(--text);
  text-decoration: none;
}

.nav-drop__sep {
  height: 1px;
  margin: 5px 3px;
  background: var(--line);
}

.top__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The language switch.
   Two letters rather than a flag: a flag is a country, and neither of these
   languages belongs to one country. It stays on a phone where the secondary
   button does not, because somebody who cannot read the page cannot look for
   it further down. */
.lang {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.lang:hover {
  color: var(--text);
  border-color: var(--amber);
  text-decoration: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: linear-gradient(160deg, var(--amber), #de8f18);
  border-color: transparent;
  color: #241703;
}

.btn--primary:hover {
  background: linear-gradient(160deg, var(--amber-2), #e89b1f);
}

.btn--lg {
  height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 30px;
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(245, 165, 36, 0.13), transparent 70%),
    var(--ink);
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 54px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.eyebrow b {
  color: var(--amber-2);
  font-weight: 600;
}

h1 {
  margin: 20px 0 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 750;
}

h1 em {
  font-style: normal;
  color: var(--amber);
}

.lede {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-3);
}

/* ------------------------------------------------------- the fake screen -- */

.shot {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ink-2), #0f1115);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.shot__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #33363d;
}

.shot__title {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-3);
}

.shot__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  min-height: 320px;
}

.plan {
  position: relative;
  padding: 16px;
  border-right: 1px solid var(--line);
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.plan__rooms {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}

.chip--on {
  background: var(--amber-dim);
  border-color: rgba(245, 165, 36, 0.35);
  color: var(--amber-2);
}

.plan__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tbl {
  aspect-ratio: 1;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 650;
}

.tbl small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
}

.tbl--free {
  border-color: rgba(62, 207, 142, 0.35);
  box-shadow: inset 0 0 0 1px rgba(62, 207, 142, 0.12);
}

.tbl--free small {
  color: var(--free);
}

.tbl--taken {
  border-color: rgba(245, 165, 36, 0.45);
  background: linear-gradient(180deg, rgba(245, 165, 36, 0.14), var(--ink-3));
}

.tbl--taken small {
  color: var(--amber-2);
}

.tbl--bill {
  border-color: rgba(255, 90, 95, 0.5);
  background: linear-gradient(180deg, rgba(255, 90, 95, 0.14), var(--ink-3));
}

.tbl--bill small {
  color: #ff8b8e;
}

.bill {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.bill__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.bill__head b {
  font-size: 16px;
}

.bill__head span {
  font-size: 12px;
  color: var(--text-3);
}

.ln {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.ln i {
  font-style: normal;
  color: var(--text-3);
  font-size: 12.5px;
}

.ln u {
  text-decoration: none;
  color: var(--text-3);
  font-size: 11.5px;
  display: block;
}

.bill__sum {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.bill__sum b {
  font-size: 22px;
  color: var(--amber-2);
  font-weight: 700;
}

.bill__pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.bill__pay span {
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
}

.bill__pay span:first-child {
  background: var(--amber);
  border-color: transparent;
  color: #241703;
  font-weight: 650;
}

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

section {
  padding: 76px 0;
  border-top: 1px solid var(--line);
}

.section__head {
  max-width: 640px;
  margin-bottom: 40px;
}

h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.section__head p {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 16.5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-2), rgba(19, 21, 25, 0.55));
}

.card h3 {
  margin: 14px 0 8px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.62;
}

.card__ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--amber-dim);
  color: var(--amber-2);
  font-size: 18px;
}

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.step {
  position: relative;
  padding-top: 46px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amber-dim);
  border: 1px solid rgba(245, 165, 36, 0.35);
  color: var(--amber-2);
  font-weight: 700;
  font-size: 14px;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.step p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
}

/* The honesty box. Not a footnote and not grey-on-grey: what this is not is
   the first thing a Serbian bar owner needs to know, and burying it would be
   the kind of small lie that ends a sale later. */
.warn {
  display: flex;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(255, 90, 95, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 90, 95, 0.06);
}

.warn__ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 90, 95, 0.16);
  color: #ff8b8e;
}

.warn h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.warn p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
}

details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  color: var(--amber);
  font-size: 20px;
  line-height: 1;
}

details[open] summary::after {
  content: '−';
}

details p {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 15px;
  max-width: 74ch;
}

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

.page {
  padding: 54px 0 80px;
}

.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 46px;
  align-items: start;
}

.panel {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ink-2), rgba(19, 21, 25, 0.6));
  box-shadow: var(--shadow);
}

.panel h1 {
  margin: 0 0 6px;
  font-size: 26px;
}

.panel > p.sub {
  margin: 0 0 24px;
  color: var(--text-2);
  font-size: 15px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 7px;
}

.input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.input:focus {
  outline: none;
  border-color: rgba(245, 165, 36, 0.6);
  background: rgba(245, 165, 36, 0.05);
}

.hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.msg {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.msg--bad {
  background: rgba(255, 90, 95, 0.12);
  border: 1px solid rgba(255, 90, 95, 0.3);
  color: #ffb0b2;
}

.msg--ok {
  background: rgba(62, 207, 142, 0.1);
  border: 1px solid rgba(62, 207, 142, 0.28);
  color: #9ae7c6;
}

.aside h2 {
  font-size: 20px;
  margin-bottom: 16px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticks li {
  position: relative;
  padding: 0 0 14px 28px;
  color: var(--text-2);
  font-size: 15px;
}

.ticks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  font-weight: 700;
}

/* The demo credentials table. Monospace, because these get typed. */
.creds {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 0;
  font-size: 14px;
}

.creds th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 500;
  padding-bottom: 8px;
}

.creds td {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.creds code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--amber-2);
}

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

footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  color: var(--text-3);
  font-size: 14px;
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.foot__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.foot__links a {
  color: var(--text-2);
}

/* --------------------------------------------------------------- smaller -- */

@media (max-width: 900px) {
  .hero__in,
  .form-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .shot__body {
    grid-template-columns: 1fr;
  }

  .plan {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .top nav {
    display: none;
  }

  section {
    padding: 56px 0;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 46px;
  }

  .panel {
    padding: 22px;
  }

  .top__in {
    gap: 12px;
  }

  /* One call to action in the header, not two. Both together are wider than a
     phone, and a header wider than the screen drags the whole page sideways -
     which is how the rest of the layout ends up looking broken when it is not. */
  .top__cta .btn:not(.btn--primary) {
    display: none;
  }

  .lang {
    height: 34px;
    padding: 0 9px;
  }

  .btn {
    padding: 0 15px;
  }

  .hero__cta .btn {
    flex: 1 1 100%;
  }

  /* Four table cards on a phone leaves each of them the width of a thumbnail.
     Two rows of two reads the way the app itself does at this size. */
  .plan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creds {
    font-size: 12.5px;
  }
}

/* Somebody will print the sign-up page to give to a colleague. */
@media print {
  .top,
  footer,
  .hero__cta {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ------------------------------------------------------- landing pages -- */

/*
  The pages under /sr/program-za-restorane.html and their siblings. Each one
  answers a single search - "program za restorane", "POS sistem", "kuhinjski
  ekran" - and the components below are what those pages need on top of the
  home page's: a breadcrumb, a prose column, a spec table, and the block of
  links to the neighbouring pages that keeps them from being orphans.
*/

.crumbs {
  padding: 20px 0 0;
  font-size: 13.5px;
  color: var(--text-3);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--text-3);
}

.crumbs a {
  color: var(--text-2);
}

/* A measured column. Body copy that runs the full 1140px is copy nobody
   finishes, and a page written to be read is also the page that ranks. */
.prose {
  max-width: 74ch;
}

.prose h2 {
  margin: 40px 0 12px;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 28px 0 8px;
  font-size: 17px;
}

.prose p {
  margin: 0 0 14px;
  color: var(--text-2);
}

.prose ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--text-2);
}

.prose ul li::before {
  content: '◈';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  font-size: 12px;
}

.prose a {
  color: var(--amber-2);
}

/* The table that answers "what exactly do I get" without a sales call. */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 14.5px;
}

.spec th,
.spec td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.spec th {
  color: var(--text);
  font-weight: 600;
  width: 34%;
}

.spec td {
  color: var(--text-2);
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 0;
}

.spec-wrap {
  overflow-x: auto;
}

/* Prices. Three columns on a desktop, stacked on a phone, and the middle one
   marked - not because it is the best deal but because a page with no
   recommendation makes the reader do work they came here to avoid. */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}

.plan-card--pick {
  border-color: rgba(245, 165, 36, 0.42);
  background: linear-gradient(180deg, rgba(245, 165, 36, 0.07), var(--ink-2) 60%);
}

.plan-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.plan-card__for {
  margin: 0 0 18px;
  color: var(--text-3);
  font-size: 14px;
}

.plan-card__price {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan-card__price small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
}

.plan-card .ticks {
  flex: 1;
  margin: 20px 0 22px;
}

/* Where a page hands the reader to the next one. Orphan pages do not rank,
   and a reader who came for "kuhinjski ekran" often wants the stock page
   next - so the links are the real path, not a tag cloud. */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.related a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: border-color 0.15s, transform 0.15s;
}

.related a:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}

.related span {
  display: block;
  margin-top: 6px;
  color: var(--text-3);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
}

/* The footer stops being one line the moment there are fifteen pages worth
   linking. Columns, so a crawler and a person both find the whole site from
   the bottom of any page on it. */
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  padding-bottom: 32px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.foot__col h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.foot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot__col li {
  margin-bottom: 8px;
}

.foot__col a {
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
}

.foot__col a:hover {
  color: var(--text);
}