@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Anton_400Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Barlow_400Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Barlow_500Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Barlow_600SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Barlow_700Bold.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono_400Regular.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/IBMPlexMono_600SemiBold.ttf") format("truetype");
}

:root {
  color-scheme: dark;

  --ink: #070807;
  --surface: #161917;
  --raised: #1f2320;
  --line: #2b302c;
  --lineBright: #505853;
  --text: #f4f5f1;
  --muted: #98a09a;
  --faint: #6b736d;

  --volt: #c6f24e;

  --font-display: Anton, Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  --font-ui: Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --page: 76rem;
  --radius: 18px;
  --pill: 9999px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(3rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: 0.02em; }

/* Anton has no Hebrew or Arabic glyphs, and a display face that silently falls
   back renders two of the eight languages in whatever serif the platform picks.
   Those two get the UI face at a heavier weight instead, which is a choice
   rather than an accident.

   The brand mark is deliberately not in this list, where the wordmark it
   replaced used to be: it is the Latin string "Train MF" on all eight pages,
   Anton has every glyph in it, and a mark that changed typeface by locale
   would be a different mark. */
:root[lang="he"] h1, :root[lang="he"] h2, :root[lang="he"] h3,
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3,
:root[lang="he"] .panel-title, :root[lang="ar"] .panel-title,
:root[lang="he"] figcaption strong, :root[lang="ar"] figcaption strong {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: none;
  line-height: 1.12;
}

p { margin: 0; }
a { color: inherit; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: 24px; }

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

:root[lang="he"] .label, :root[lang="ar"] .label { letter-spacing: 0; text-transform: none; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

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

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--volt);
  color: var(--ink);
  padding: 10px 18px;
  font-weight: 600;
  z-index: 80;
}

.skip:focus { inset-inline-start: 0; }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.nav-right { display: flex; align-items: center; gap: 14px; }

.nav-soon {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--volt);
  border: 1px solid color-mix(in srgb, var(--volt) 40%, transparent);
  border-radius: var(--pill);
  padding: 4px 12px;
}

.picker {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 6px 12px;
}

.hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 80px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

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

.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); margin-bottom: 22px; }

.dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--volt); flex: none; }

h1 .volt { color: var(--volt); }

.lede { font-size: clamp(1.12rem, 1.7vw, 1.35rem); color: var(--muted); max-width: 46ch; margin-top: 26px; }

.stores { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/**
 * The two store badges.
 *
 * Inert by design — there is nothing to link to yet — so they carry no hover
 * or focus affordance. What makes them read as buttons rather than as outlined
 * text is depth instead of interaction: a top-lit gradient, a hairline of light
 * along the upper edge, and a shadow that sits them on the page. The glyph gets
 * its own tile in the accent colour, which is what gives each badge a fixed
 * optical anchor no matter how long the sentence beside it runs — and the
 * sentences do run long, from "Coming to the App Store" to "Demnächst bei
 * Google Play".
 */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 10px 22px 10px 11px;
  background: linear-gradient(180deg, var(--raised), var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 10px 24px -16px #000000;
}

.store-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  flex: none;
  background: color-mix(in srgb, var(--volt) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--volt) 26%, transparent);
}

.store svg { width: 18px; height: 18px; fill: var(--volt); display: block; }

.store-text { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }

/**
 * The mark, and the words it is short for.
 *
 * The expansion is the load-bearing half: M and F are picked out of it in the
 * accent so the eye reads "MF" out of "More, Focus More" without being told.
 * The mark is the display face at nav weight; the expansion sits in mono
 * beneath it, which is what keeps two lines of type from competing.
 */
.brand { display: inline-flex; flex-direction: column; gap: 3px; }

.brand-mark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.045em;
}

.brand-initials { color: var(--volt); }

/*
 * Both lines of the lockup are a Latin run, and on the two mirrored pages they
 * have to be laid out as one: without this Arabic reordered "Train." to the far
 * side of the phrase it introduces and rendered "MORE FOCUSED .TRAIN". The
 * direction is set on the lines rather than on .brand so the lockup as a whole
 * still sits where the page puts it — flush right on he and ar — while what is
 * inside it reads left to right, the way the brand is written.
 */
.brand-mark, .brand-expansion { direction: ltr; }

.brand-expansion {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-letter { color: var(--volt); font-weight: 600; }

/**
 * The cycling half of the expansion.
 *
 * An inline grid with every phrase stacked into the one cell: the invisible
 * ghosts are what give the box the width of the longest phrase, so a line that
 * is typing "Manage Fatigue" cannot shove the caret around as it passes through
 * the length of "Max Force". The live span and the ghosts share the cell, so
 * the reserved width costs no layout of its own.
 *
 * align-items is start rather than stretch so the ghosts do not inherit a
 * height they would then impose on a single-line box.
 */
.brand-cycle {
  display: inline-grid;
  align-items: start;
}

.brand-cycle-ghost, .brand-cycle-layer { grid-area: 1 / 1; white-space: nowrap; }

.brand-cycle-ghost { visibility: hidden; }

/* Read once, as prose, by anything that speaks the page. The animated copy is
   aria-hidden: a live region retyping one character at a time is unusable, and
   the effect is decorative. Not display:none, which would take it out of the
   accessibility tree along with everything else. */
.brand-cycle-read {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The caret, and the hole its width leaves in every ghost. Same box so the
   reserved width and the drawn width cannot drift apart. */
.brand-caret, .brand-caret-space {
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  margin-inline-start: 0.14em;
  vertical-align: text-bottom;
}

.brand-caret {
  background: var(--volt);
  animation: caret 1s step-end infinite;
}

@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/*
 * Asked for less motion: the script leaves the first phrase where it is, so all
 * that is left to do is take away the caret that would otherwise blink beside a
 * line that never changes.
 */
@media (prefers-reduced-motion: reduce) {
  .brand-caret { animation: none; display: none; }
}

/* In the nav the mark is chrome, so it drops to wordmark size. */
.brand-compact .brand-mark { font-size: 1.15rem; letter-spacing: 0.05em; }
.brand-compact .brand-expansion { font-size: 9.5px; letter-spacing: 0.08em; }

/* The hero lockup is the page's first statement, so it gets a line of its own.
   Block-level rather than inline: beside the nav it is one item among several,
   but here the eyebrow follows it and would otherwise sit on its baseline. */
.hero .brand { display: flex; align-items: flex-start; margin-bottom: 20px; }
.hero .brand-mark { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.hero .brand-expansion { font-size: 12px; }

/*
 * On a phone the nav has to hold the mark, the "coming soon" badge and the
 * language picker on one row, and the expansion is the widest thing in the
 * lockup — wider than the mark above it. It is also the one part of the nav
 * the hero repeats in full a finger-scroll below, so it is the right thing to
 * drop.
 *
 * 600px rather than the 420px this first shipped with. 420 was measured
 * against nothing, and it happens to work on a 390pt phone — but 430pt phones
 * exist and would have sat just above it, holding the widest part of the
 * lockup next to a badge and a select. The margin costs nothing: the hero
 * repeats the expansion in full, one finger-scroll down.
 */
@media (max-width: 600px) { .brand-compact .brand-expansion { display: none; } }

.stage { perspective: 1400px; display: flex; justify-content: center; }

.device {
  position: relative;
  width: min(300px, 78vw);
  border-radius: 34px;
  padding: 9px;
  background: linear-gradient(160deg, #2f342f, #101210 46%, #23281f);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px var(--line),
    0 0 70px -22px color-mix(in srgb, var(--volt) 45%, transparent);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.device img { display: block; width: 100%; border-radius: 26px; }
.device.lg { width: min(330px, 82vw); }

.band { border-block: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--ink)); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; }

.fact { padding: 30px 24px; border-inline-end: 1px solid var(--line); }
.fact:last-child { border-inline-end: 0; }

.fact dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1;
  color: var(--volt);
}

.fact dt { font-size: 0.86rem; color: var(--muted); line-height: 1.42; }

.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--line); }

.head { max-width: 58ch; margin-bottom: clamp(32px, 4vw, 52px); }
.head h2 { margin-block: 14px 18px; }
.head p { color: var(--muted); font-size: 1.06rem; }

.tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.tab {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 9px 18px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.tab:hover { color: var(--text); border-color: var(--lineBright); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--volt); border-color: var(--volt); }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

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

.panel-copy h3 { margin-bottom: 14px; }
.panel-copy p { color: var(--muted); max-width: 46ch; }
.panel-copy .readout { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 12px;
  background: var(--surface);
}

/* Every frame is rendered and painted; only opacity moves. Without JavaScript
   the first of each stack is the one on screen, which is the whole page's
   fallback position. */
.swap { position: relative; display: flex; justify-content: center; }
.swap .device { position: absolute; opacity: 0; transition: opacity 340ms ease; pointer-events: none; }
.swap .device.on { position: relative; opacity: 1; pointer-events: auto; }

/**
 * The feature panel's frame, which grows into place rather than leaning.
 *
 * The rest of the page's frames tilt toward the pointer, and this one used to
 * as well. It is the wrong frame for it: this is the only screenshot on the
 * page that changes what it shows while the reader is looking at it, and a
 * lean the cursor is causing on top of a switch the tab caused reads as one
 * confused motion rather than two clear ones — press "The muscles" and the
 * phone answers by rocking toward your hand.
 *
 * A scale answers the tab and nothing else. The incoming screen comes up from
 * slightly under size as it fades in, so the movement points at the thing that
 * caused it, and the frame is still when nothing has been pressed. The
 * outgoing one is left small, which is what keeps the two from crossing at the
 * same size and reading as a dissolve.
 */
#swap .device {
  transform: scale(0.94);
  transition: opacity 340ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#swap .device.on { transform: scale(1); }

.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }

.arrows { display: flex; gap: 10px; }

/* The display: flex above outranks the user-agent rule that the hidden
   attribute relies on, so the pair has to be told again. The script sets
   hidden on both the arrows and the dots when the rail has only one page. */
.arrows[hidden], .dots[hidden] { display: none; }

.arrow {
  width: 44px; height: 44px;
  border-radius: var(--pill);
  border: 1px solid var(--lineBright);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 180ms ease, border-color 180ms ease;
}

.arrow:hover { background: var(--raised); border-color: var(--volt); }
.arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* At either end of the rail. Dimmed and inert rather than taken away, so the
   pair keeps its width and the remaining arrow does not slide sideways under
   the cursor that is still pressing it. */
.arrow:disabled { opacity: 0.34; cursor: default; }
.arrow:disabled:hover { background: var(--surface); border-color: var(--lineBright); }

/* The arrows point the way the page reads. */
:root[dir="rtl"] .arrow svg { transform: scaleX(-1); }

.rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 24px 26px;
  margin-inline: -24px;
  scrollbar-width: none;

  /* The negative margin and the padding cancel out, so a slide at rest lines up
     with the heading above it — but snapping does not know that. It aligns a
     slide to the edge of the scrollport, which is the border box, and parked
     the first phone a gutter's width to the outside of the type it belongs
     under. This moves the line the slides snap to onto the content box, where
     the rest of the page's left edge already is. */
  scroll-padding-inline: 24px;
}

.rail::-webkit-scrollbar { display: none; }

/**
 * A rail whose slides all fit at once.
 *
 * On a wide screen "More of the app" is four phones in a row of four, and the
 * carousel around it was answering a question nobody had: arrows that could
 * not move, and four dots under four screens already on screen. The script
 * spots the case and says so here, and what is left is a centred row — which
 * is what it always was.
 *
 * Snapping goes with it. Mandatory snap on a container with nowhere to scroll
 * is harmless until the reader nudges it with a trackpad and the browser pulls
 * a centred row back to an edge.
 */
.rail[data-static="true"] { justify-content: center; scroll-snap-type: none; }

/* Slides align to the start of the rail rather than its centre, because the
   rail pages by the screenful: the page lands with its first slide against the
   gutter and the rest of the page following it. Centring is the right rule for
   a rail that moves one slide at a time, and the wrong one for a rail that
   moves four — it puts the middle of a group where the reader is looking for
   its beginning. */
.slide { flex: 0 0 auto; scroll-snap-align: start; width: min(252px, 70vw); }
.slide figure { margin: 0; }

.slide .device {
  width: 100%;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease;
}

.slide:hover .device {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px var(--lineBright),
    0 0 90px -20px color-mix(in srgb, var(--volt) 55%, transparent);
}

.slide figcaption { margin-top: 16px; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }

.slide figcaption strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

/* One dot per page the rail can rest on, not one per slide. The script hides
   the rest: eight dots over a rail that shows four at a time was a control
   describing a carousel that does not exist, and the dot that lit up was never
   the one that had been pressed. */
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 4px; }

.dot-btn {
  width: 7px; height: 7px; padding: 0;
  border-radius: var(--pill);
  border: 0;
  background: var(--lineBright);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}

.dot-btn[aria-current="true"] { background: var(--volt); width: 22px; }

.themes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }

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

.themes h2 { margin-block: 14px 18px; }
.themes .body { color: var(--muted); max-width: 44ch; }

.toggle {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  margin-top: 24px;
}

.toggle button {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  border: 0;
  border-radius: var(--pill);
  padding: 8px 18px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.toggle button[aria-pressed="true"] { background: var(--volt); color: var(--ink); }

.foot {
  border-top: 1px solid var(--line);
  padding-block: 30px 44px;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: baseline; justify-content: space-between;
  color: var(--faint); font-size: 0.88rem;
}

.foot-end { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px; }

.foot-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }

/* The one link in the footer today, and the shape the privacy policy and the
   terms arrive in. Underlined rather than left to the colour to carry it: at
   --faint on --ink a link that is only a colour is a link nobody sees, and the
   documents in this row are the ones a reader goes looking for on purpose. */
.foot-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}

.foot-links a:hover { color: var(--text); text-decoration-color: var(--lineBright); }

/* The page the reader is already on. Rendered as text, not as a link to
   itself, so this is only telling them which one that is. */
.foot-links [aria-current="page"] { color: var(--text); }

/* The support address, underlined on the same argument as the document links:
   at --faint on --ink a link carried by colour alone is a link nobody sees,
   and this is one a reader goes looking for on purpose. */
.foot-mail {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}

.foot-mail:hover { color: var(--text); text-decoration-color: var(--lineBright); }

/**
 * The documents: the licences page today, the privacy policy and the terms
 * next.
 *
 * A narrower measure than the pitch, because this is prose to be read rather
 * than a headline to be hit by — around 68 characters a line, which is where
 * the eye stops needing to hunt for the start of the next one.
 */
.doc { padding-block: 60px 90px; }

.doc-wrap { max-width: 46rem; }

.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 34px; }

.doc-head h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin-block: 14px 20px;
}

.doc-head .lede { color: var(--muted); font-size: 1.08rem; }

.doc-section { margin-top: 52px; }

.doc-section h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 18px; }

.doc-section > p { color: var(--muted); }

.doc-note { color: var(--faint); font-size: 0.9rem; margin-top: 18px; }

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

.licence-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.licence-family { font-weight: 600; font-size: 1.05rem; text-align: start; }

/* Nothing in a card is translated — a family name, a copyright line, the
   licence it is under — so all three are set left-to-right on all eight pages.
   dir="ltr" in the markup does the ordering; text-align: start inherits from
   that rather than from the document, which is what keeps the card together on
   a page that is mirrored around it. */
.licence-notice, .licence-terms { text-align: start; }

.licence-notice {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.licence-terms { margin-top: 6px; color: var(--faint); font-size: 0.85rem; }

/* The licence text itself: English, left-to-right, inside a page that may be
   neither. Everything about it is stated rather than inherited. */
.licence-body {
  margin-top: 26px;
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 22px;
  text-align: left;
}

.licence-body section + section { margin-top: 30px; }

.licence-body h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.4;
}

.licence-body p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* The mark in the bar is a link on every page but the home page. It must not
   pick up a link's underline — it is the logo, not a word. */
.nav-home { text-decoration: none; display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .device { transform: none !important; }
}