/*
  Chess Best Move website.
  One stylesheet for every page. The page is dark: a slate-to-black field with the App Store
  screenshots laid on it, which is the house style of the other site by the same developer.
  Display type is GFS Didot, an editorial serif; everything else is set in the system text
  face, which is what the app itself uses, so the running text of the page and the text
  inside the screenshots are the same shapes. Hairline rules instead of cards, and one cobalt
  accent, the color of the best-move arrow, kept for focus and for the few marks that need it.
*/

/* ---------- Font (SIL Open Font License 1.1, text in fonts/) ---------- */

/*
  Served from this repository, not from a font network. The privacy policy says this site
  loads nothing from other sites, and a stylesheet or font fetched from a content delivery
  network would hand that network every visitor's address. The file is the released GFS Didot
  compressed to WOFF2 and changed in no other way; see scripts/import_assets.py.
*/
@font-face {
  font-family: "GFS Didot";
  src: url("fonts/GFSDidot-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Color and type tokens ---------- */

:root {
  color-scheme: dark;

  /* The page itself is a gradient from slate through deep navy to black; these are the stops. */
  --page-top: #0f172b;
  --page-mid: #0b1220;
  --page-bottom: #000000;

  --canvas: #0b1220;
  --raised: rgba(255, 255, 255, 0.04);
  --ink: #f1f3f8;
  --ink2: #c3cbdb;
  --ink3: #8b95aa;
  --rule: rgba(255, 255, 255, 0.12);
  --rule2: rgba(255, 255, 255, 0.28);
  --accent: #93a8ff;
  --accent-subtle: rgba(147, 168, 255, 0.22);
  --caution: #f0b45a;

  /* GFS Didot is published in one weight, so display type is never asked for a bold: a
     browser would draw a slanted, smeared copy of the regular instead. Size carries the
     hierarchy, as it does in a Didone. */
  --serif: "GFS Didot", Didot, "Bodoni 72", Georgia, "Times New Roman", serif;
  /* The text face of the device. On an iPhone, an iPad and a Mac that is SF Pro, which is
     what the app sets its own text in. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Chess notation and file names only, where the characters have to line up in columns.
     On Apple devices this is SF Mono, again the face the app uses for the same job. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 16px;
  --measure: 44rem;
}

/* Increase Contrast: raise the quiet grays and the hairlines until they separate cleanly. */
@media (prefers-contrast: more) {
  :root {
    --ink2: #e2e7f1;
    --ink3: #b9c2d3;
    --rule: rgba(255, 255, 255, 0.34);
    --rule2: rgba(255, 255, 255, 0.55);
    --accent: #b9c6ff;
  }
}

@media (min-width: 420px) {
  :root { --gutter: 20px; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--page-bottom);
}

/* The gradient is attached to the viewport rather than to the length of the page, so a short
   page shows the top of it instead of the whole run compressed into one screen, and a long
   page does not repeat it. The plain color under it is what a browser without the gradient
   shows, and what fills the area past the end of a very long page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--canvas);
  background-image: linear-gradient(to bottom, var(--page-top), var(--page-mid) 46%, var(--page-bottom));
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

::selection {
  background: var(--accent-subtle);
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

/* The display voice: page and section titles. Set in GFS Didot
   at its one weight, and never in italic, which the family does not ship either. */
.display,
.section-head h2,
.doc-head h1,
.doc > h1,
.doc h2,
.not-found h1,
.brand {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink3);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

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

/* The only monospace on the site: chess notation, evaluations and file names, where the
   characters have to line up and where the app shows them in a monospace too. */
code,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
  font-weight: 400;
}

/* Figures of the same width, for the numbers that sit in columns or in rules. */
.facts dd,
.doc-head .meta,
.doc h2 .n,
.steps .num,
.not-found .code {
  font-variant-numeric: tabular-nums;
}

strong {
  font-weight: 600;
}

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

.skip-link {
  position: absolute;
  top: 8px;
  left: var(--gutter);
  z-index: 10;
  padding: 10px 14px;
  background: var(--page-top);
  color: var(--ink);
  border: 1px solid var(--rule2);
  border-radius: 8px;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: calc(72rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Instrument label: short uppercase words, never sentences (design section 4, label). */
.label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
  font-feature-settings: "case" 1;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  row-gap: 0;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--ink);
}

/* Home already has a prominent wordmark in its opening. */
.site-header-home .wrap {
  justify-content: flex-end;
}

/* The exact outlined image used by the app, shown in white on the dark site.
   An image keeps the approved kerning independent of browser font shaping. */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

.brand .wordmark {
  width: 196px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
}

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

.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
  text-underline-offset: 0.45em;
}

/* The Menu button that collapses the four links on a narrow screen. It is hidden here and
   shown only by the narrow-screen rules below, and only when menu.js has marked the page
   with the js-menu class: display:none keeps it out of the page and out of the accessibility
   tree everywhere else, so a wide screen, a browser without JavaScript and a browser that
   never received menu.js all show the row of links instead. The icon is three rules drawn
   from the element and its two pseudo-elements, so no image and no icon font are needed.
   The negative right margin lets the 44 px target reach past the gutter while the rules
   themselves stay in line with it. */
.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
  color: var(--ink);
}

.nav-toggle[aria-expanded="true"] {
  color: var(--ink);
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

/* Open, the three rules become a cross, so the button says what pressing it again does. */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    transition: top 120ms ease, transform 120ms ease, background-color 120ms ease;
  }
}

@media (max-width: 559px) {
  .site-header .wrap {
    padding-block: 6px 2px;
  }

  .site-nav {
    width: 100%;
    margin-top: -2px;
  }

  .site-nav ul {
    column-gap: 18px;
  }

  /* With menu.js running, the same four links are a menu: the button joins the brand on the
     first row and the list drops below it, one link to a row, when the button is pressed. */
  .js-menu .site-header .wrap {
    padding-block: 6px;
  }

  .js-menu .nav-toggle {
    display: inline-flex;
  }

  /* Closed, the navigation is taken out of the page altogether rather than emptied, so that
     screen readers do not offer a navigation landmark with nothing in it. */
  .js-menu .site-nav {
    display: none;
    margin-top: 0;
  }

  .js-menu .site-nav.is-open {
    display: block;
    margin-bottom: 4px;
  }

  .js-menu .site-nav.is-open ul {
    display: block;
  }

  .js-menu .site-nav.is-open a {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-top: 1px solid var(--rule);
    font-size: 1.0625rem;
    color: var(--ink);
  }
}

@media (max-width: 559px) and (prefers-reduced-motion: no-preference) {
  .js-menu .site-nav.is-open {
    animation: nav-open 140ms ease-out;
  }
}

@keyframes nav-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ---------- Footer ---------- */

main {
  flex: 1 0 auto;
}

.site-footer {
  margin-top: 72px;
  border-top: 1px solid var(--rule);
  color: var(--ink2);
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: grid;
  gap: 20px;
  padding-block: 28px 40px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-meta {
  display: grid;
  gap: 4px;
}

.footer-meta p:first-child {
  color: var(--ink);
  font-weight: 500;
}

@media (min-width: 768px) {
  .site-footer .wrap {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .site-footer ul {
    justify-content: flex-end;
  }
}

/* ---------- Home page: the opening ---------- */

/* The opening centers the wordmark and introduction. Everything below is left aligned. */
.opening {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding-block: 32px 40px;
  text-align: center;
}

.display {
  width: min(100%, 44rem);
  line-height: 1;
}

.lede {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink2);
}

/* Four short facts, side by side under the sentence, each one a label over a value. */
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  width: 100%;
  max-width: 44rem;
  margin-top: 4px;
}

.facts div {
  flex: 1 1 10rem;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 12px 16px;
  border-top: 1px solid var(--rule);
}

.facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink3);
}

.facts dd {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink);
}

.fair-play {
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink2);
}

.fair-play strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 720px) {
  .opening {
    gap: 28px;
    padding-block: 52px 48px;
  }

}

/* ---------- Home page: the screenshots ---------- */

/*
  The screenshots are the page, not an illustration beside it. Each one is a figure holding a
  link to the full size picture, and the picture in the link is the small copy that
  scripts/import_screenshots.py writes. A plain link, not a script: clicking a picture opens
  it with JavaScript turned off as well.

  Two across on a phone and three from 40rem, laid out with flex-wrap rather than a grid so
  that the seventh picture centers itself under the six above it instead of hanging on the
  left. The captions are drawn inside the pictures by the capture step, so there is no
  figcaption here; the alt text of each picture carries the caption in words.
*/
.shots-section > .wrap {
  max-width: calc(62rem + 2 * var(--gutter));
  padding-block: 4px 16px;
}

.shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 12px;
}

.shots > figure {
  flex: 0 0 calc((100% - 12px) / 2);
  max-width: calc((100% - 12px) / 2);
}

.shot {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--raised);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  cursor: zoom-in;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot:hover {
  box-shadow: 0 26px 52px -18px rgba(0, 0, 0, 0.95);
}

@media (prefers-reduced-motion: no-preference) {
  .shot {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }

  .shot:hover {
    transform: translateY(-3px);
  }
}

@media (min-width: 40rem) {
  .shots {
    gap: 36px 20px;
  }

  .shots > figure {
    flex-basis: calc((100% - 2 * 20px) / 3);
    max-width: calc((100% - 2 * 20px) / 3);
  }

  .shot {
    border-radius: 20px;
  }
}

/* The iPad pictures are wider than they are tall in the shape of their tile, so they take
   the full column on a phone and two across from 40rem. */
.shots-wide > figure,
.shots-wide > figure:only-child {
  flex-basis: 100%;
  max-width: 30rem;
}

@media (min-width: 40rem) {
  .shots-wide > figure {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

/* ---------- Landing page sections ---------- */

.section {
  border-top: 1px solid var(--rule);
}

.section > .wrap {
  display: grid;
  gap: 24px;
  padding-block: 44px 8px;
}

.section-head {
  display: grid;
  gap: 10px;
  align-content: start;
}

.section-head h2 {
  font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.625rem);
  line-height: 1.1;
}

.section-head p {
  max-width: 30rem;
  color: var(--ink2);
}

@media (min-width: 960px) {
  .section > .wrap {
    grid-template-columns: 17rem minmax(0, 1fr);
    column-gap: 72px;
    padding-block: 64px 16px;
  }
}

@media (min-width: 1200px) {
  .section > .wrap {
    grid-template-columns: 19rem minmax(0, 1fr);
    column-gap: 104px;
  }
}

/* Steps, set like a scoresheet: number, step, what happens. */
.steps {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule2);
}

.steps-head {
  display: none;
}

.steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  padding-block: 16px 18px;
  border-bottom: 1px solid var(--rule);
}

.steps .num {
  grid-row: span 2;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.75rem;
  color: var(--ink3);
}

.steps h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.steps p {
  color: var(--ink2);
}

@media (min-width: 720px) {
  .steps-head {
    display: grid;
    grid-template-columns: 3rem 13rem minmax(0, 1fr);
    column-gap: 16px;
    padding-block: 8px;
    border-bottom: 1px solid var(--rule);
  }

  .steps-head span {
    font-size: 0.75rem;
  }

  .steps {
    border-top: 0;
  }

  .steps-wrap {
    border-top: 1px solid var(--rule2);
  }

  .steps li {
    grid-template-columns: 3rem 13rem minmax(0, 1fr);
    column-gap: 16px;
    padding-block: 18px 20px;
  }

  .steps .num {
    grid-row: auto;
  }
}

/* Features: term and description pairs separated by hairlines. */
.features {
  display: grid;
  column-gap: 40px;
}

.features div {
  display: grid;
  gap: 6px;
  align-content: start;
  padding-block: 18px 22px;
  border-top: 1px solid var(--rule);
}

.features dt {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.features dd {
  color: var(--ink2);
}

.features dd + dd {
  margin-top: 4px;
}

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

  .features div:nth-child(-n + 2) {
    border-top-color: var(--rule2);
  }
}

@media (max-width: 719px) {
  .features div:first-child {
    border-top-color: var(--rule2);
  }
}

/* Plans */
.plans {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule2);
  text-align: left;
}

.plans th,
.plans td {
  padding: 14px 16px 16px 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule);
}

.plans thead th {
  padding-block: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}

.plans tbody th {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}

.plans td {
  color: var(--ink2);
}

.plans td:last-child {
  padding-right: 0;
}

.plans .kind {
  color: var(--ink);
}

.after-table {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-width: var(--measure);
  color: var(--ink2);
  font-size: 0.9375rem;
}

@media (max-width: 719px) {
  .plans thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .plans,
  .plans tbody,
  .plans tr,
  .plans th,
  .plans td {
    display: block;
  }

  .plans tr {
    display: grid;
    gap: 2px;
    padding-block: 14px 16px;
    border-bottom: 1px solid var(--rule);
  }

  .plans th,
  .plans td {
    padding: 0;
    border: 0;
  }

  .plans tbody th {
    white-space: normal;
  }
}

/* ---------- Document pages (privacy, terms, support, source, 404) ---------- */

.doc-head {
  display: grid;
  gap: 14px;
  padding-block: 40px 32px;
}

.doc-head h1,
.doc > h1 {
  font-size: clamp(2.375rem, 1.75rem + 2.4vw, 3.75rem);
  line-height: 1.04;
  max-width: 20ch;
}

/* A page whose title stands in the article rather than in a doc-head still needs the space
   under it that the doc-head would have given. */
.doc > h1 {
  padding-top: 32px;
}

.doc > h1 + *,
.doc > p + p {
  margin-top: 14px;
}

.doc-head .intro {
  max-width: 40rem;
  font-size: 1.1875rem;
  line-height: 1.42;
}

.doc-head .meta {
  font-size: 0.875rem;
  color: var(--ink3);
}

.doc-layout {
  display: grid;
  gap: 32px;
  border-top: 1px solid var(--rule2);
  padding-top: 8px;
}

.toc {
  font-size: 0.9375rem;
}

.toc .label {
  display: block;
  padding-block: 10px 6px;
}

.toc ol {
  padding: 0;
  list-style: none;
}

.toc a {
  display: block;
  padding-block: 6px;
  line-height: 1.3;
  color: var(--ink2);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 1023px) {
  .toc {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 14px;
  }

  .toc ol {
    columns: 2 15rem;
    column-gap: 32px;
  }

  .toc li {
    break-inside: avoid;
  }
}

@media (min-width: 1024px) {
  .doc-head {
    padding-block: 64px 44px;
  }

  .doc-layout {
    grid-template-columns: 15rem minmax(0, var(--measure));
    column-gap: 72px;
  }

  .toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding-block: 8px 24px;
    /* Room inside the scroll box for the focus ring, which the overflow would clip. */
    padding-inline: 6px;
    margin-inline: -6px;
  }
}

@media (min-width: 1200px) {
  .doc-layout {
    grid-template-columns: 17rem minmax(0, var(--measure));
    column-gap: 104px;
  }
}

.doc {
  max-width: var(--measure);
  min-width: 0;
}

.doc section {
  padding-block: 32px 30px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 16px;
}

.doc section:first-child {
  border-top: 0;
}

.doc h2 {
  text-wrap: pretty;
  font-size: 1.625rem;
  line-height: 1.22;
}

.doc h2 .n {
  font-family: var(--sans);
  font-size: 0.6875em;
  font-weight: 600;
  color: var(--ink3);
  margin-right: 0.6em;
}

.doc h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  scroll-margin-top: 16px;
}

.doc section > * + *,
.doc .notice > * + * {
  margin-top: 12px;
}

.doc section > h2 + *,
.doc section > h3 + * {
  margin-top: 10px;
}

.doc section > * + h3 {
  margin-top: 30px;
}

.doc ul {
  padding-left: 1.25rem;
}

.doc ol {
  padding-left: 1.75rem;
}

.doc ul {
  list-style: square;
}

.doc li + li {
  margin-top: 6px;
}

.doc li::marker {
  color: var(--ink3);
}

.doc ol li::marker {
  font-size: 0.9em;
  color: var(--ink3);
}

.doc a {
  overflow-wrap: anywhere;
}

.doc .summary {
  font-size: 1.125rem;
  line-height: 1.5;
}

.doc blockquote,
.doc .notice {
  margin-inline: 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--rule2);
  color: var(--ink2);
}

.doc address.notice {
  color: var(--ink);
}

.doc .legal-caps {
  font-size: 0.9375rem;
}

.doc dl.pairs {
  border-top: 1px solid var(--rule);
}

.doc dl.pairs div {
  display: grid;
  gap: 2px;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
}

.doc dl.pairs dt {
  font-weight: 600;
}

.doc dl.pairs dd {
  color: var(--ink2);
}

@media (min-width: 600px) {
  .doc dl.pairs div {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 16px;
  }
}

.doc .address {
  font-style: normal;
}

.placeholder {
  display: inline-block;
  padding: 1px 8px;
  border: 2px dashed var(--caution);
  border-radius: 4px;
  color: var(--caution);
  font-weight: 600;
}

.fair-play-block {
  margin-top: 16px;
  padding: 16px 0 18px 18px;
  border-left: 2px solid var(--rule2);
}

.fair-play-block p:first-child {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
}

.fair-play-block p + p {
  margin-top: 6px;
  color: var(--ink2);
}

.contact-line {
  font-size: 1.1875rem;
  font-weight: 600;
}

/* Not found */
.not-found {
  display: grid;
  gap: 36px;
  padding-block: 48px 24px;
}

.not-found > div {
  display: grid;
  gap: 12px;
  align-content: start;
}

.not-found .code {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink3);
}

.not-found h1 {
  font-size: clamp(2.625rem, 1.9rem + 3.2vw, 4.25rem);
  line-height: 1.02;
}

.not-found p {
  max-width: 34rem;
  color: var(--ink2);
}

.not-found nav .label {
  margin-bottom: 8px;
}

.not-found ul {
  max-width: 34rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule2);
}

.not-found li a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-weight: 500;
}

.not-found li a span {
  color: var(--ink2);
  font-weight: 400;
  font-size: 0.9375rem;
}

.not-found li a:hover {
  text-decoration: underline;
}

@media (min-width: 960px) {
  .not-found {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: 72px;
    padding-block: 88px 40px;
    align-items: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

/* Sample position pictures, four to a page on a wide screen and one on a phone. */
.doc ul.samples,
.samples {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.samples li {
  margin-top: 0;
}

.samples a {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--raised);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.9);
}

.samples img {
  width: 100%;
  height: auto;
}

.samples p {
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 0.9375rem;
}

/* Download and launch offer, October 2026. */
.download { margin: 1.75rem 0 1rem; }
.app-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: .4rem;
  background: var(--ink);
  color: var(--canvas);
  font-weight: 600;
  text-decoration: none;
}
.app-store-link:hover { background: var(--ink2); color: var(--canvas); }
.launch-offer { max-width: 43rem; color: var(--ink2); }
.launch-offer strong { color: var(--ink); }