/* manum.lv: one stylesheet for every page, no fonts to download. */

:root {
  --ink: #16161d;
  --muted: #5d5f6b;
  --line: #e6e6ec;
  --soft: #f7f7fb;
  --page: #ffffff;
  --card: #ffffff;
  --brand: #5b45f0;
  --brand-ink: #3418b8;
  --brand-soft: #efecff;
  --good: #0b6e4f;
  --link: #3418b8;
  --mark-from: #7b6cff;
  --mark-to: #3418b8;
  --shadow: 0 1px 2px rgba(22, 22, 29, 0.06), 0 12px 32px rgba(52, 24, 184, 0.08);
  --scroll: rgba(22, 22, 29, 0.2);
  --scroll-hover: rgba(22, 22, 29, 0.36);
  --radius: 16px;
  color-scheme: light;
}

/*
 * Dark: chosen with the switch in the header, or the browser's own setting, which follows the device's
 * unless set apart, while nothing is chosen. A choice is kept in data-theme on the page.
 */
:root[data-theme="dark"] {
  --ink: #ececf1;
  --muted: #a4a6b3;
  --line: #2b2c35;
  --soft: #17171d;
  --page: #0f0f14;
  --card: #17171d;
  --brand: #9d8fff;
  --brand-ink: #c3baff;
  --brand-soft: #221d44;
  --good: #45c79a;
  --link: #9d8fff;
  --mark-from: #b3a8ff;
  --mark-to: #6f5cff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --scroll: rgba(236, 236, 241, 0.22);
  --scroll-hover: rgba(236, 236, 241, 0.38);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ececf1;
    --muted: #a4a6b3;
    --line: #2b2c35;
    --soft: #17171d;
    --page: #0f0f14;
    --card: #17171d;
    --brand: #9d8fff;
    --brand-ink: #c3baff;
    --brand-soft: #221d44;
    --good: #45c79a;
    --link: #9d8fff;
    --mark-from: #b3a8ff;
    --mark-to: #6f5cff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
    --scroll: rgba(236, 236, 241, 0.22);
    --scroll-hover: rgba(236, 236, 241, 0.38);
    color-scheme: dark;
  }
}

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

/* Korean breaks lines between words, as Korean is written, not inside a word. */
:lang(ko) {
  word-break: keep-all;
}

html {
  -webkit-text-size-adjust: 100%;
  /* A jump to a part of the page stops below the header, which the script measures. */
  scroll-padding-top: calc(var(--head, 72px) + 16px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 750;
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 720;
}

h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 650;
}

p {
  margin: 0 0 14px;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--page);
}

.skip:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
}

.wrap--narrow {
  width: min(820px, 100% - 32px);
}

.wrap--text {
  width: min(760px, 100% - 32px);
}

.center {
  text-align: center;
}

/* Header */

/* The header stays at the top: it slides away as the page is read down and comes back on the way up. */
.head {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--page);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.head.is-hidden {
  transform: translateY(-100%);
}

.head.is-scrolled {
  box-shadow: 0 6px 24px rgba(22, 22, 29, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .head {
    transition: none;
  }
}

.head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 16px 0;
}

/* MANUM's logo: the M, a little apart, then the name; in the house violet, lighter on a dark page. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
}

.logo__mark {
  width: 30px;
  height: 30px;
  flex: none;
}

.logo__name {
  width: 100px;
  height: 18px;
  flex: none;
}

.logo__from {
  stop-color: var(--mark-from);
}

.logo__to {
  stop-color: var(--mark-to);
}

/* The menu on a computer: the apps, each with its pages, and how to reach us. */
.menu {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}

.menu > a,
.apps-menu summary {
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 520;
  text-decoration: none;
}

.menu > a:hover,
.apps-menu summary:hover,
.apps-menu[open] summary {
  color: var(--ink);
}

.apps-menu {
  position: relative;
}

.apps-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

.apps-menu summary .icon,
.drawer__group summary .icon {
  transition: transform 0.15s ease;
}

.apps-menu[open] summary .icon,
.drawer__group[open] summary .icon {
  transform: rotate(180deg);
}

.apps-menu__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  z-index: 6;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.apps-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}

.apps-item:hover {
  background: var(--soft);
}

.apps-item img {
  flex: none;
  border-radius: 10px;
}

.apps-item__text {
  display: grid;
  line-height: 1.35;
}

.apps-item__text span {
  color: var(--muted);
  font-size: 14px;
}

/* The app's pages under it, their words in line with its icon's edge. */
.apps-item__pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 4px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.apps-item__pages a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14.5px;
  text-decoration: none;
}

.apps-item__pages a:hover,
.apps-item__pages a[aria-current="page"],
.apps-item__pages a[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--link);
}

/* The language menu, the theme button and, on a phone or tablet, the menu button: at the header's end. */
.head__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.langs {
  position: relative;
  font-size: 15px;
}

.langs summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.langs summary::-webkit-details-marker,
.apps-menu summary::-webkit-details-marker,
.drawer__group summary::-webkit-details-marker {
  display: none;
}

.langs[open] summary,
.langs summary:hover {
  color: var(--ink);
}

/*
 * The languages in one column, A to Z, in a card. The list scrolls inside the card's padding, so its bar
 * stays clear of the round corners: a thin rounded thumb on no track, the page's own colours.
 */
.langs__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 6;
  width: 236px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.langs__menu ul {
  display: grid;
  gap: 2px;
  max-height: min(392px, 62vh);
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.langs__menu ul::-webkit-scrollbar,
.docs__nav ul::-webkit-scrollbar {
  width: 10px;
}

.langs__menu ul::-webkit-scrollbar-track,
.langs__menu ul::-webkit-scrollbar-corner,
.docs__nav ul::-webkit-scrollbar-track,
.docs__nav ul::-webkit-scrollbar-corner {
  background: transparent;
}

.langs__menu ul::-webkit-scrollbar-button,
.docs__nav ul::-webkit-scrollbar-button {
  display: none;
  height: 0;
}

.langs__menu ul::-webkit-scrollbar-thumb,
.docs__nav ul::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--scroll) padding-box;
}

.langs__menu ul::-webkit-scrollbar-thumb:hover,
.docs__nav ul::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-hover);
}

@supports not selector(::-webkit-scrollbar) {
  .langs__menu ul,
  .docs__nav ul {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll) transparent;
  }
}

.langs li a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}

.langs li a:hover,
.langs li a[aria-current="true"] {
  background: var(--brand-soft);
}

.langs__code {
  display: none;
}

/* Light or dark: one round button showing the other theme, the device's until one is chosen. */
.theme-toggle,
.burger,
.drawer__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover,
.burger:hover,
.drawer__close:hover {
  color: var(--ink);
}

.theme-toggle__light,
:root[data-theme="dark"] .theme-toggle__dark {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__light {
  display: grid;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__dark {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__light {
    display: grid;
  }
}

.langs summary:focus-visible,
.apps-menu summary:focus-visible,
.theme-toggle:focus-visible,
.burger:focus-visible,
.drawer__close:focus-visible,
.drawer__group summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* An app's own pages, in a row under the header on each of them. */
.subnav {
  border-top: 1px solid var(--line);
}

.subnav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  min-height: 52px;
  padding: 7px 0;
}

.subnav__app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 680;
  text-decoration: none;
}

.subnav__app img {
  border-radius: 6px;
}

.subnav__here {
  display: none;
  color: var(--muted);
}

.subnav__here::before {
  content: "›";
  margin-right: 10px;
  color: var(--muted);
}

.subnav__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.subnav__pages a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}

.subnav__pages a:hover {
  color: var(--ink);
}

.subnav__pages a[aria-current="page"],
.subnav__pages a[aria-current="true"] {
  background: var(--brand-soft);
  color: var(--link);
}

/* On a phone the row says where you are; the drawer holds the pages. */
@media (max-width: 767px) {
  .subnav__pages {
    display: none;
  }

  .subnav__here {
    display: inline;
  }
}

/* The menu button and the drawer are for phones and tablets only. */
.burger,
.drawer {
  display: none;
}

/*
 * On a phone or tablet the menu is a drawer from the side, closing on a tap outside or Escape. A browser
 * without that keeps the menu in a line of its own under the logo.
 */
@media (max-width: 1023px) {
  .head__row {
    column-gap: 12px;
  }

  .menu {
    order: 3;
    flex-basis: 100%;
  }

  @supports selector(:popover-open) {
    .menu {
      display: none;
    }

    .burger {
      display: grid;
      color: var(--ink);
    }

    .drawer {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(380px, 88vw);
      height: auto;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow-y: auto;
      border: 0;
      border-left: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      box-shadow: var(--shadow);
      transform: translateX(100%);
      transition:
        transform 0.25s ease,
        overlay 0.25s allow-discrete,
        display 0.25s allow-discrete;
    }

    .drawer:popover-open {
      display: flex;
      flex-direction: column;
      transform: none;
    }

    @starting-style {
      .drawer:popover-open {
        transform: translateX(100%);
      }
    }

    .drawer::backdrop {
      background: rgba(15, 15, 20, 0.36);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none;
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.drawer__nav {
  display: grid;
  gap: 2px;
  padding: 10px 12px 28px;
}

.drawer__section {
  margin: 16px 12px 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.drawer__link {
  display: block;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 16.5px;
  text-decoration: none;
}

.drawer__link:hover,
.drawer__link[aria-current="page"],
.drawer__link[aria-current="true"] {
  background: var(--brand-soft);
}

.drawer__group summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

.drawer__group summary:hover {
  background: var(--soft);
}

.drawer__group summary img {
  flex: none;
  border-radius: 9px;
}

.drawer__app {
  display: grid;
  flex: 1;
  line-height: 1.35;
}

.drawer__app span {
  color: var(--muted);
  font-size: 13.5px;
}

/* An app's pages hang from it, a line down their left like a tree. */
.drawer__pages {
  display: grid;
  gap: 2px;
  margin: 2px 0 8px 29px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.drawer__pages .drawer__link {
  padding: 9px 12px;
  font-size: 16px;
}

/* On a phone the language shows by its code, so the logo and the three buttons share a line. */
@media (max-width: 480px) {
  .langs summary {
    padding: 0 10px;
  }

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

  .langs__code {
    display: inline;
    font-size: 14px;
    font-weight: 600;
  }
}

/* The narrowest phones: a smaller logo and closer buttons. */
@media (max-width: 360px) {
  .head__row,
  .head__tools {
    column-gap: 6px;
  }

  .logo {
    gap: 7px;
  }

  .logo__mark {
    width: 26px;
    height: 26px;
  }

  .logo__name {
    width: 84px;
    height: 15px;
  }

  .langs summary {
    padding: 0 8px;
  }

  .theme-toggle,
  .burger {
    width: 36px;
    height: 36px;
  }
}

/* Hero */

.hero {
  padding: 72px 0 40px;
  background: radial-gradient(1200px 520px at 80% -10%, var(--brand-soft), transparent 70%);
}

.hero--home {
  padding-bottom: 56px;
}

.hero--page {
  padding: 40px 0 28px;
  background: none;
}

.hero__text {
  max-width: 880px;
  margin-left: max(16px, calc((100% - 1120px) / 2));
}

.lead {
  max-width: 760px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
}

.tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.tag--brand {
  background: var(--brand-soft);
  color: var(--link);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.soon {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  border-color: var(--muted);
}

.button--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #7b6cff, #3418b8);
  color: #ffffff;
}

.button--primary:hover {
  border-color: transparent;
  filter: brightness(1.08);
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 36px 0 28px;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
}

.facts .icon {
  flex: none;
  color: var(--brand);
}

@media (max-width: 900px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Screens of the app */

.screen {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.screen--hero {
  margin-top: 8px;
}

.screen picture {
  display: block;
}

@media (max-width: 600px) {
  .screen {
    max-width: 390px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* A link after a row of cards keeps its distance from them. */
.grid + p {
  margin-top: 22px;
}

/* Sections */

.section {
  padding: 64px 0;
}

.section--tight {
  padding-top: 8px;
}

.section--soft {
  background: var(--soft);
}

.section__lead {
  max-width: 760px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 18px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.more {
  font-weight: 650;
  text-decoration: none;
}

.more:hover {
  text-decoration: underline;
}

/* A feature: its words beside its screen, the screen on the other side every second time. */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 40px;
  margin-top: 48px;
}

.feature--flip {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
}

.feature--flip .feature__text {
  order: 2;
}

.feature__text p {
  color: var(--muted);
  font-size: 17.5px;
}

@media (max-width: 860px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 40px;
  }

  .feature--flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature--flip .feature__text {
    order: 0;
  }
}

.video {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #000000;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}

/* Plans */

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

@media (max-width: 960px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.plan h3 {
  font-size: 18px;
}

.plan__price {
  margin: 4px 0 2px;
}

.plan__amount {
  font-size: 34px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.plan__per {
  color: var(--muted);
}

.plan__yearly {
  min-height: 3em;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14.5px;
}

.plan ul,
.checks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan li,
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15.5px;
}

.plan .icon,
.checks .icon {
  flex: none;
  margin-top: 3px;
  color: var(--good);
}

.checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

@media (max-width: 700px) {
  .checks {
    grid-template-columns: minmax(0, 1fr);
  }
}

.note {
  color: var(--muted);
  font-size: 15.5px;
}

/* Questions */

.faq {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

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

.faq__item summary::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__item summary h3 {
  margin: 0;
  font-size: 17.5px;
}

.faq__answer {
  padding: 0 20px 6px;
  color: var(--muted);
}

/* Help and metrics: topics beside their answers */

.docs {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
}

/*
 * The topics stay in view below the header while it shows, and move up to the top once it slides away. A list
 * taller than the window scrolls within itself.
 */
.docs__nav ul {
  position: sticky;
  top: calc(var(--head, 72px) + 16px);
  display: grid;
  gap: 4px;
  max-height: calc(100vh - var(--head, 72px) - 32px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  transition: top 0.25s ease;
}

html:has(.head.is-hidden) .docs__nav ul {
  top: 16px;
  max-height: calc(100vh - 32px);
}

@media (prefers-reduced-motion: reduce) {
  .docs__nav ul {
    transition: none;
  }
}

.docs__nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
}

.docs__nav a:hover {
  background: var(--soft);
  color: var(--ink);
}

/* Every figure of Metrics is a topic: beside them, closer together, so the whole list fits in the window. */
@media (min-width: 861px) {
  .docs__nav--terms ul {
    gap: 2px;
  }

  .docs__nav--terms a {
    padding: 3px 10px;
    font-size: 15px;
  }
}

.topic {
  margin-bottom: 40px;
}

.answer {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.answer p {
  color: var(--muted);
}

@media (max-width: 860px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .docs__nav ul {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: none;
    overflow: visible;
  }

  .docs__nav a {
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 15px;
  }
}

.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

@media (max-width: 760px) {
  .terms {
    grid-template-columns: minmax(0, 1fr);
  }
}

.term {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.term p {
  color: var(--muted);
}

.formula {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink) !important;
  font-size: 15px;
}

.formula__label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Setup steps */

.steps {
  display: grid;
  gap: 14px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.step h2 {
  margin-bottom: 8px;
  font-size: 21px;
}

.step p {
  margin: 0;
  color: var(--muted);
}

.step__number {
  margin: 0 0 2px !important;
  color: var(--brand) !important;
  font-size: 14px;
  font-weight: 700;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

/* Guides: a card for each, and each guide's steps with the screens they are about */

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-card {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.guide-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.guide-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.guide-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.guide-card__words {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.guide-card__words strong {
  font-size: 18px;
  line-height: 1.3;
}

.guide-card__words span {
  color: var(--muted);
}

.guide-card__words .guide-card__count {
  margin-top: 2px;
  font-size: 14px;
}

/* A guide's words keep to a reading width; its pictures may take the page's whole width. */
.guide .crumbs,
.guide h1,
.guide .lead,
.guide-step h2,
.guide-step p {
  max-width: 760px;
}

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

.guide-step {
  padding: 28px 0;
  scroll-margin-top: 96px;
}

.guide-step + .guide-step {
  border-top: 1px solid var(--line);
}

.guide-step__number {
  margin: 0 0 4px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

.guide-step h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

.guide-step p {
  color: var(--muted);
}

.guide-step__picture {
  margin-top: 18px;
}

.guide-step__picture .zoom {
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.guide-step__picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

.guide-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* The next guide: its name under a small label, no punctuation between them in any language. */
.guide-next__link {
  display: grid;
  gap: 2px;
  justify-items: end;
  margin-left: auto;
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  text-align: right;
  text-decoration: none;
}

.guide-next__link span {
  color: var(--muted);
  font-size: 14px;
}

.guide-next__link:hover {
  background: var(--brand);
  color: #ffffff;
}

.guide-next__link:hover span {
  color: rgba(255, 255, 255, 0.8);
}

.guide-next__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Breadcrumbs */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
  list-style: none;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

/* The home page's app */

.app-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  max-width: 820px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.app-card h3 {
  font-size: 24px;
}

.app-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.app-card .tag {
  margin-bottom: 8px;
}

.app-card p {
  color: var(--muted);
}

.app-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

@media (max-width: 520px) {
  .app-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

.final {
  text-align: center;
}

.final .section__lead {
  margin-right: auto;
  margin-left: auto;
}

.final .actions {
  justify-content: center;
}

/* Legal pages keep their own markup inside the site's frame. */

.legal {
  padding: 40px 0;
}

.legal h1 {
  font-size: clamp(30px, 4vw, 42px);
}

.legal h2 {
  margin-top: 36px;
  font-size: 24px;
}

.legal h3 {
  margin-top: 24px;
}

.legal table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.legal th,
.legal td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* Footer: the company and how to reach it, the app's pages, the company's and legal pages, every language. */

.foot {
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 15px;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 32px;
  padding: 48px 0 36px;
}

.foot__logo {
  margin-bottom: 16px;
}

.foot p {
  margin: 0 0 8px;
}

.foot h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.foot ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot a {
  color: var(--muted);
}

.foot ul a {
  text-decoration: none;
  /* A long word, such as German's Datenschutzerklärung, breaks by its language's rules in a narrow column. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.foot a:hover,
.foot a[aria-current] {
  color: var(--ink);
}

.foot ul a:hover {
  text-decoration: underline;
}

.foot__soon {
  margin-top: 14px !important;
  color: var(--ink);
  font-weight: 600;
}


.foot__note {
  margin-top: 12px !important;
  font-size: 14px;
}

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px 0 28px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.foot__bottom p {
  margin: 0;
}

.foot__bottom span {
  white-space: nowrap;
}

/* The foot's language picker opens upwards, over the foot. */
.langs--up .langs__menu {
  top: auto;
  bottom: calc(100% + 8px);
}

.foot .langs li a {
  color: var(--ink);
}

/* On a phone the picker sits at the left, under the company's numbers: its list opens from there. */
@media (max-width: 600px) {
  .foot .langs .langs__menu {
    right: auto;
    left: 0;
  }
}

/* A tablet: the company across, the pages in two columns, the languages across under them. */
@media (max-width: 960px) {
  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .foot__grid {
    gap: 28px 20px;
    padding-top: 36px;
  }
}

/* An old link to the 404 page's home */

.notfound {
  padding: 96px 0;
}

/* A screenshot that opens large: the cursor and a small sign in its corner say so. */
.zoom {
  position: relative;
  display: block;
  border-radius: inherit;
  cursor: zoom-in;
}

.zoom__hint {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15, 15, 20, 0.66);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.zoom:hover .zoom__hint,
.zoom:focus-visible .zoom__hint {
  opacity: 1;
}

.zoom:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

@media (hover: none) {
  .zoom__hint {
    opacity: 1;
  }
}

/* The lightbox's buttons in the site's colours. */
.pswp {
  --pswp-bg: #0f0f14;
  --pswp-icon-color: #ffffff;
  --pswp-icon-color-secondary: #3418b8;
}

/* Everything Sharpsum does: a grid of four columns, every row full. Wide cards take two columns and show the
   thing itself under their words; the narrow ones are the icon and the words. On a tablet the grid has two
   columns, a wide card a row of its own; on a phone, one column. */
.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ability {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* A soft glow of Sharpsum's colour in the card's corner, brighter under the pointer. */
.ability::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 108, 255, 0.16), transparent);
  pointer-events: none;
  transition: opacity 0.25s ease;
  opacity: 0.6;
}

.ability:hover {
  transform: translateY(-3px);
  border-color: rgba(123, 108, 255, 0.45);
  box-shadow: var(--shadow);
}

.ability:hover::before {
  opacity: 1;
}

.ability--wide {
  grid-column: span 2;
}

.ability__words {
  position: relative;
}

.ability__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, #7b6cff, #3418b8);
  box-shadow: 0 6px 16px rgba(52, 24, 184, 0.28);
  color: #ffffff;
}

.ability h3 {
  margin-bottom: 6px;
  font-size: 17.5px;
}

.ability p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

/* The thing itself: a piece of the app's own screen, drawn large and cut by the card, fading at its edges. */
.ability__show {
  position: relative;
  height: 210px;
  margin-top: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.ability__show img {
  position: absolute;
  top: 0;
  left: 0;
  width: 170%;
  max-width: none;
  height: auto;
  transform-origin: 0 0;
  transition: transform 0.6s ease;
}

.ability:hover .ability__show img {
  transform: scale(1.03);
}

/* Each screen's part that says the most: the Profit page's cards, the report's rows, the return on ad spend. */
.ability__show--profit img {
  translate: -1% -5%;
}

.ability__show--reports img {
  translate: -1% -6%;
}

/* Grown from the table's right edge, so a pointer over the card never pushes POAS out of it. */
.ability__show--ad-spend img {
  translate: -40% -58%;
  transform-origin: 98% 60%;
}

/* Every language Sharpsum speaks, each a link to the Sharpsum page in it. */
.ability__langs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.ability__langs a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.ability__langs a:hover {
  border-color: var(--brand);
  color: var(--link);
}

.ability__langs a[aria-current] {
  border-color: transparent;
  background: linear-gradient(135deg, #7b6cff, #3418b8);
  color: #ffffff;
}

/* Two phones side by side, the second a little lower and turned. */
.ability__show--phones {
  display: flex;
  justify-content: center;
  gap: 18px;
  height: 260px;
  padding-top: 18px;
  border: 0;
  background: linear-gradient(160deg, var(--brand-soft), transparent 70%);
}

.ability__show--phones img {
  position: static;
  width: 148px;
  height: auto;
  border: 6px solid #16161d;
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(22, 22, 29, 0.25);
}

.ability__show--phones img + img {
  margin-top: 26px;
  rotate: 4deg;
}

.ability:hover .ability__show--phones img {
  transform: translateY(-4px);
}

/* New orders arriving: rows slide in at the top, each with a live dot, while the oldest fades away below. */
.ability__show--live {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  background: var(--soft);
}

.ability__order {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  animation: ability-order-in 6s ease-in-out infinite;
}

.ability__order--1 {
  animation-delay: 1.5s;
}

.ability__order--2 {
  animation-delay: 3s;
}

.ability__order--3 {
  animation-delay: 4.5s;
}

.ability__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #14a05a;
  box-shadow: 0 0 0 4px rgba(20, 160, 90, 0.16);
}

.ability__bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--line);
}

.ability__bar--short {
  flex: 0.5;
}

.ability__plus {
  flex: none;
  width: 54px;
  height: 18px;
  border-radius: 9px;
  background: rgba(20, 160, 90, 0.18);
}

@keyframes ability-order-in {
  0%,
  100% {
    opacity: 0.45;
    transform: none;
  }

  12% {
    opacity: 1;
    transform: translateX(6px);
  }

  30% {
    opacity: 1;
    transform: none;
  }
}

/* The small drawings at the foot of a narrow card: lines, dots and chips in the site's colours, no words. */
.sketch {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.sketch--compare {
  height: 104px;
  padding: 12px 12px 10px;
}

.sketch--compare svg {
  width: 100%;
  height: 70px;
  overflow: visible;
}

.sketch__then,
.sketch__now {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.sketch__then {
  stroke: var(--line);
  stroke-dasharray: 2 6;
}

.sketch__now {
  stroke: #7b6cff;
}

.sketch__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 26px;
}

.sketch__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e8a400;
}

.sketch__dot--1 {
  background: #e5484d;
}

.sketch__dot--2 {
  background: #14a05a;
}

.sketch__bar {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
}

.sketch__chip {
  flex: none;
  width: 42px;
  height: 16px;
  border-radius: 8px;
  background: rgba(123, 108, 255, 0.18);
}

.sketch__chip--up {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(20, 160, 90, 0.2);
}

/* A cost recorded and a cost counted, side by side on each row. */
.sketch__row--pair .sketch__dot {
  display: none;
}

.sketch__row--pair .sketch__chip {
  box-shadow: -52px 0 0 rgba(123, 108, 255, 0.1);
}

.sketch__card {
  width: 46px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7b6cff, #3418b8);
  box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.18);
}

.sketch--fees .sketch__dot {
  background: #7b6cff;
}

/* A guide's steps: two ticked off, one to go. */
.sketch__tick {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--line);
  border-radius: 50%;
}

.sketch__tick--done {
  border-color: #14a05a;
  background: #14a05a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

@media (max-width: 1099px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .ability--wide {
    grid-column: span 1;
  }

  /* On a phone the card is narrow: the last columns, ROAS and POAS, drawn larger and filling the picture. */
  .ability__show--ad-spend img {
    width: 260%;
    translate: -61% -58%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ability,
  .ability__show img,
  .ability__order {
    transition: none;
    animation: none;
  }
}

/* The tour video's player in the site's colours, its corners as the screenshots'. */
.plyr {
  --plyr-color-main: #5b45f0;
  --plyr-video-control-background-hover: #5b45f0;
  --plyr-captions-background: rgba(15, 15, 20, 0.82);
  --plyr-font-family: inherit;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* The subtitles size themselves to the player, in the page and in full screen alike. */
  container-type: inline-size;
}

/* Subtitles as a film sets them: one or two balanced lines in the site's type, on a soft dark band with
   rounded corners that keeps them readable over the app's white screens, each easing in as it is said.
   The player's own styles come after these, so these name the player more fully to stand over them. */
.plyr.plyr--full-ui.plyr--video .plyr__captions {
  padding-inline: 5%;
  font-size: clamp(15px, 2.4cqi, 30px);
}

.plyr .plyr__caption {
  display: inline-block;
  max-width: min(100%, 34em);
  padding: 0.32em 0.8em 0.36em;
  border-radius: 0.6em;
  background: rgba(16, 13, 32, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0.3em 1.2em rgba(8, 6, 20, 0.28);
  color: #ffffff;
  font-weight: 560;
  letter-spacing: 0.005em;
  line-height: 1.4;
  text-wrap: balance;
  white-space: normal;
  animation: caption-in 0.24s ease-out;
}

@keyframes caption-in {
  from {
    opacity: 0;
    transform: translateY(0.3em);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plyr .plyr__caption {
    animation: none;
  }
}

/* The site's own subtitles, word by word, where each word's time is known: a short phrase on one line, the
   words already said bright, the word being said lit in Sharpsum's colour, the rest waiting dimmed. They rise
   above the player's controls while those show. The player's own subtitles give way to them. */
.plyr.has-subs .plyr__captions {
  display: none;
}

.subs {
  position: absolute;
  right: 0;
  bottom: 62px;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding-inline: 5%;
  pointer-events: none;
  transition: bottom 0.3s ease;
}

.plyr--hide-controls .subs {
  bottom: 22px;
}

.subs[hidden] {
  display: none;
}

.subs__line {
  max-width: min(100%, 24em);
  margin: 0;
  padding: 0.26em 0.66em 0.3em;
  border-radius: 0.55em;
  background: rgba(16, 13, 32, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0.3em 1.2em rgba(8, 6, 20, 0.3);
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(15px, 2.6cqi, 31px);
  font-weight: 650;
  letter-spacing: 0.005em;
  line-height: 1.38;
  text-align: center;
  text-wrap: balance;
  transition: opacity 0.18s ease;
}

.subs.is-empty .subs__line {
  opacity: 0;
}

.subs__word {
  border-radius: 0.28em;
  transition:
    color 0.12s ease,
    background-color 0.12s ease,
    box-shadow 0.12s ease;
}

.subs__word.is-said {
  color: #ffffff;
}

.subs__word.is-now {
  background: #5b45f0;
  box-shadow: 0 0 0 0.12em #5b45f0;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .subs,
  .subs__line,
  .subs__word {
    transition: none;
  }
}

/* Back to the top of a long page: a round button at the bottom right, once the page is read well down. */
.to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 25;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.to-top[hidden] {
  display: none;
}

.to-top:hover {
  color: var(--link);
}

.to-top:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The AI assistants page: Claude asking to connect, cut to the question and what it may read. */
.ability__show--ai img {
  translate: -1% -4%;
}

/* Settings, cut to gift cards and returned items: the choices that change how profit counts. */
.ability__show--settings img {
  translate: -1% -60%;
}

/* An order's profit block beside a Flow trigger passing the figures on: numbers only, in every language. */
.ability__show--block {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  padding: 18px;
  background: var(--soft);
}

.mock-block {
  display: grid;
  gap: 9px;
  width: min(260px, 60%);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(22, 22, 29, 0.08);
}

.mock-block__head,
.mock-block__row,
.mock-block__total {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mock-block__head {
  margin-bottom: 2px;
}

.mock-block__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7b6cff, #3418b8);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.mock-block__order,
.mock-block__amount {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.mock-block__total {
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.mock-block__profit {
  margin-left: auto;
  color: #078d4e;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mock-block__pill {
  padding: 1px 8px;
  border-radius: 999px;
  background: #cdfee1;
  color: #0c5132;
  font-size: 12px;
  font-weight: 600;
}

.mock-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
}

.mock-flow__step {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--brand);
}

.mock-flow__line {
  width: 2px;
  height: 14px;
  background: linear-gradient(var(--brand), rgba(123, 108, 255, 0.25));
}

.ability:hover .mock-block {
  transform: translateY(-3px);
  transition: transform 0.25s ease;
}