/* Reflex Dot · legal documents
   ---------------------------------------------------------------------------
   Direction: TRAIL. The game is a point of light crossing the void between two
   arcs; here each section is a bounce. The left margin carries the line and the
   dot lands on the section being read.

   No external dependency: fonts served from here, no request leaves the page.
   It is the least a privacy policy owes itself.
   ------------------------------------------------------------------------- */

/* latin-ext */
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../assets/fontes/big-shoulders-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../assets/fontes/big-shoulders-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fontes/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fontes/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens - */

:root {
  color-scheme: dark;

  /* Surfaces. Hue 265 taken from the background of the logo artwork; elevation
     comes from lightness, never from shadow, as a dark theme demands. */
  --night: oklch(14% 0.028 265);
  --night-raised: oklch(18.5% 0.03 265);
  --night-top: oklch(23% 0.032 265);

  /* Ink. The white is the dot's: slightly warm, never #fff. */
  --light: oklch(94% 0.012 265);
  --light-mid: oklch(76% 0.018 265);
  --light-dim: oklch(63% 0.02 265);

  --rule: oklch(30% 0.028 265);
  /* 50%, not 42%: this rule draws the secondary button's border, and a component
     border needs 3:1 against the background. At 42% it was 2.35:1. */
  --rule-strong: oklch(50% 0.034 265);

  /* Accent: the game's blue, #2CA9FC (Cfg.colAccent), converted. The same one
     that tints the two E's of the logo in the menu. Rare on principle: links,
     focus, the dot, and a single action block per page. */
  --accent: oklch(70.8% 0.16 244);
  --accent-light: oklch(78% 0.15 244);
  --accent-deep: oklch(28% 0.07 244);
  --accent-ink: oklch(18% 0.035 250);

  /* 4pt */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-2xl: 32px;
  --s-3xl: 48px;
  --s-4xl: 64px;
  --s-5xl: 74px;

  /* Type scale, ratio 1.2. Body at 1rem (16px, the floor for reading on a
     phone) and everything else derived from it. */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.75rem, 1.25rem + 2.4vw, 2.75rem);

  --font-display:
    "Big Shoulders", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);

  --margin: 88px; /* trail column */
  --measure: 66ch; /* reading column */
  --gap: var(--s-3xl);
  --doc-pad: var(--s-xl);

  /* The height of a button, named because the type that stands beside one
     has to take the same height to sit on the same line. */
  --button-height: 46px;
}

/* ----------------------------------------------------------------- base -- */

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

/* No image here is meant to be dragged out of the page. The attribute
   `draggable="false"` on each <img> is what actually does it everywhere; this
   rule is the safety net that covers a future image added without it, but only
   in WebKit and Blink, since `user-drag` has never been standardised. So: new
   image, new `draggable="false"`. */
img {
  -webkit-user-drag: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-4xl);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--light-mid);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 400;
  /* Light text on dark reads lighter: generous leading on purpose. */
  line-height: 1.72;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* Star field. Three layers of dots, no image and no canvas.
   It is background, not content, so it stays out of flow and out of the screen
   reader. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      1.4px 1.4px at 18% 22%,
      oklch(88% 0.03 265 / 0.55),
      transparent 60%
    ),
    radial-gradient(
      1.2px 1.2px at 74% 12%,
      oklch(88% 0.03 265 / 0.4),
      transparent 60%
    ),
    radial-gradient(
      1.6px 1.6px at 41% 63%,
      oklch(85% 0.1 244 / 0.4),
      transparent 60%
    ),
    radial-gradient(
      1.1px 1.1px at 88% 47%,
      oklch(88% 0.03 265 / 0.45),
      transparent 60%
    ),
    radial-gradient(
      1.3px 1.3px at 9% 78%,
      oklch(88% 0.03 265 / 0.35),
      transparent 60%
    ),
    radial-gradient(
      1.5px 1.5px at 62% 88%,
      oklch(88% 0.03 265 / 0.3),
      transparent 60%
    ),
    radial-gradient(
      1.2px 1.2px at 31% 41%,
      oklch(85% 0.1 245 / 0.35),
      transparent 60%
    ),
    radial-gradient(
      1.1px 1.1px at 95% 82%,
      oklch(88% 0.03 265 / 0.32),
      transparent 60%
    );
  background-size: 620px 620px;
}

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: oklch(70.8% 0.16 244 / 0.45);
  transition: text-decoration-color 140ms var(--ease-out);
}
a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

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

::selection {
  background: var(--accent-deep);
  color: var(--light);
}

/* ------------------------------------------------------------- language -- */

/* Language switching without a line of JavaScript: two targets at the top of
   the body and :has() deciding which one shows. Without JS the default is
   Portuguese; #en forces English and is a valid URL to register with the store.

   Each language carries the whole document, links included, which is why moving
   between the three pages preserves the language without relying on script. */

.target {
  position: absolute;
  top: 0;
}

/* Every rule from here uses two classes or more: `.doc` also declares display,
   and at equal specificity whoever hides has to come last. */

/* Without :has() (older browser), Portuguese remains. Never a blank page. */
.doc.lang[lang="en"] {
  display: none;
}

@supports selector(html:has(a)) {
  .doc.lang {
    display: none;
  }

  body:not(:has(#en:target)):not(:has(.doc[lang="en"] :target))
    .doc.lang[lang="pt-BR"] {
    display: grid;
  }

  /* The second condition holds English when the target is a section of the
     English document itself. Without it, clicking an anchor would drop the page
     back to Portuguese. */
  body:has(#en:target) .doc.lang[lang="en"],
  body:has(.doc[lang="en"] :target) .doc.lang[lang="en"] {
    display: grid;
  }
}

.languages {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.languages__option {
  color: var(--light-dim);
  text-decoration: none;
  padding: var(--s-sm) var(--s-md);
  border-radius: 999px;
  transition:
    color 140ms var(--ease-out),
    background-color 140ms var(--ease-out);
}
.languages__option:hover {
  color: var(--light);
  background: var(--night-raised);
}

/* The active pair mirrors exactly the condition that decides the content. */
.languages__option[href="#pt"] {
  color: var(--light);
  background: var(--night-raised);
}

body:has(#en:target) .languages__option[href="#pt"],
body:has(.doc[lang="en"] :target) .languages__option[href="#pt"] {
  color: var(--light-dim);
  background: none;
}

body:has(#en:target) .languages__option[href="#en"],
body:has(.doc[lang="en"] :target) .languages__option[href="#en"] {
  color: var(--light);
  background: var(--night-raised);
}

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

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  padding: var(--s-xl) var(--s-xl) 0;
  max-width: calc(
    var(--margin) + var(--gap) + var(--measure) + var(--doc-pad) * 2
  );
  margin-inline: auto;
}

/* Wordmark identical to the game's: silver base on top, the two E's filled by
   the accent underneath. Two files, as in Unity.

   On the three documents it is also the link back to the game's page, so it
   answers the pointer — dimming the base only, which leaves the accent E's
   lit and reads as the mark stepping forward. */
.brand {
  position: relative;
  display: inline-block;
  line-height: 0;
}
a.brand .brand__base { transition: opacity 260ms var(--ease-out); }
a.brand:hover .brand__base { opacity: 0.72; }
.brand__base {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(124px, 19vw, 168px);
  height: auto;
}
.brand__e {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--accent);
  -webkit-mask-image: url(../assets/reflex-wordmark-e.png);
  mask-image: url(../assets/reflex-wordmark-e.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

/* ------------------------------------------------------------- document -- */

/* The grid has a fixed width and is centred by margin, not by justify-content:
   this way the left column starts exactly at the padding and the trail can be
   positioned by calculation, without measuring anything. */
.doc {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, var(--measure));
  column-gap: var(--gap);
  max-width: calc(
    var(--margin) + var(--gap) + var(--measure) + var(--doc-pad) * 2
  );
  margin-inline: auto;
  padding: var(--s-5xl) var(--doc-pad) var(--s-5xl);
  position: relative;
}

.doc__opening,
.section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.doc__opening > *,
.section > * {
  grid-column: 2;
}

.doc__label {
  grid-column: 1 / -1;
  margin: 0 0 var(--s-lg);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-dim);
}

.doc__title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--light);
  /* Compensates for the inner white of the uppercase in the left margin. */
  margin-left: -0.045em;
  text-wrap: balance;
}

.doc__date {
  margin: var(--s-lg) 0 0;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--light-dim);
}

.doc__summary {
  margin: var(--s-xl) 0 0;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--light);
  max-width: 46ch;
  text-wrap: pretty;
}

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

.section {
  margin-top: var(--s-5xl);
}

.section__num {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  justify-self: end;
  padding-right: var(--s-xl);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--light-dim);
  transition: color 260ms var(--ease-out);
}

.section__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 var(--s-lg);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--light);
  text-wrap: balance;
}

/* The section being read lights up the numeral. */
.section.is-current .section__num {
  color: var(--accent);
}

.section p {
  margin: 0 0 var(--s-lg);
  text-wrap: pretty;
}
.section p:last-child {
  margin-bottom: 0;
}

.section strong {
  color: var(--light);
  font-weight: 600;
}

.section ul {
  margin: 0 0 var(--s-lg);
  padding: 0;
  list-style: none;
}
/* Unordered lists only: the steps list has a marker of its own, and without
   the `ul` here it would inherit the rotated diamond on top of the number. */
.section ul li {
  position: relative;
  padding-left: var(--s-xl);
  margin-bottom: var(--s-md);
}
.section ul li:last-child {
  margin-bottom: 0;
}
.section ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--rule-strong);
  transform: rotate(45deg);
}

/* Each section's anchor only appears when the title receives the cursor or the
   keyboard. It serves the real case: the store asks for a direct link to a
   section. */
.section__anchor {
  margin-left: var(--s-md);
  font-family: var(--font-display);
  font-size: 0.8em;
  font-weight: 600;
  color: var(--light-dim);
  text-decoration: none;
  opacity: 0;
  transition:
    opacity 140ms var(--ease-out),
    color 140ms var(--ease-out);
}
.section__title:hover .section__anchor,
.section__anchor:focus-visible {
  opacity: 1;
}
.section__anchor:hover {
  color: var(--accent);
}

/* -------------------------------------------------------------- trail --- */

/* A 1px line in the margin. The stretch already read stays lit; the dot lands
   on the current section's marker. Markers and dot are born in JS, because they
   depend on measuring the already composed text. Without it the line and the
   numerals hanging in the margin remain, and on their own they already say
   where you are. */

.trail {
  position: absolute;
  top: var(--s-5xl);
  bottom: var(--s-5xl);
  left: calc(var(--doc-pad) + var(--margin));
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}

.trail__lit {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(70.8% 0.16 244 / 0.12),
    var(--accent)
  );
  transform: scaleY(var(--progress, 0));
  transform-origin: top;
  transition: transform 420ms var(--ease-out);
}

.trail__dot {
  position: absolute;
  /* Above the markers: they are appended after it, so without this the marker
     it has landed on draws its dark centre over the dot and the landing reads
     as a ring instead of a dot. */
  z-index: 1;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--light);
  box-shadow:
    0 0 0 3px oklch(94% 0.012 265 / 0.1),
    0 0 16px 2px oklch(70.8% 0.16 244 / 0.6);
  transform: translateY(var(--landing, 0px));
  transition: transform 380ms var(--ease-out), opacity 260ms var(--ease-out);
  opacity: 0;
}

/* Landed, not merely alive: before the first section crosses the threshold
   there is no marker under the dot, and a dot resting at the top of the line
   sits a dozen pixels from the first marker and reads as a second one. */
.trail.is-alive.is-landed .trail__dot {
  opacity: 1;
}

/* The tail, short, always behind the movement. */
.trail__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 34px;
  margin-left: -1px;
  background: linear-gradient(to top, oklch(94% 0.012 265 / 0.5), transparent);
}

.marker {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--night);
  transform: translateY(var(--y, 0px));
}

/* ------------------------------------------------------------- action --- */

/* One block per page, and only on deletion: it is the only place where the
   person has to do something. */

.action {
  grid-column: 2;
  margin: var(--s-xl) 0;
  padding: var(--s-xl);
  background: var(--night-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.action__title {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--light);
}

/* Numbered steps of the path inside the game. The numbers come from the CSS
   counter and sit in the display font, to read as markers and not as text. */
.steps {
  margin: var(--s-lg) 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.steps li {
  counter-increment: passo;
  position: relative;
  padding-left: 52px;
  margin-bottom: var(--s-md);
  min-height: 34px;
}
.steps li:last-child {
  margin-bottom: 0;
}

/* The number uses the BODY font: the display one is too condensed for a single
   digit inside a 34px circle. */
.steps li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}

.action__foot {
  margin: var(--s-lg) 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--light-mid);
}

.action__template {
  margin: var(--s-lg) 0;
  padding: var(--s-lg);
  background: var(--night);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--light-mid);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.action__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 var(--s-xl);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 120ms var(--ease-out),
    background-color 140ms var(--ease-out),
    color 140ms var(--ease-out),
    border-color 140ms var(--ease-out);
}
.button:active {
  transform: translateY(1px);
}

.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.button--primary:hover {
  background: var(--accent-light);
}

.button--ghost {
  background: none;
  border-color: var(--rule-strong);
  color: var(--light-mid);
}
.button--ghost:hover {
  color: var(--light);
  border-color: var(--light-dim);
}

.button__echo {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.button__echo.is-visible {
  opacity: 1;
}

/* --------------------------------------------------------------- notes -- */

.note {
  margin: var(--s-xl) 0 0;
  padding: var(--s-lg) var(--s-xl);
  background: var(--night-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: var(--t-sm);
  color: var(--light-mid);
}
.note :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ siblings -- */

.siblings {
  grid-column: 2;
  margin-top: var(--s-5xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
}

.siblings__label {
  width: 100%;
  margin: 0 0 var(--s-xs);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-dim);
}

.siblings a {
  color: var(--light-mid);
}
.siblings a:hover {
  color: var(--light);
}
.siblings [aria-current="page"] {
  color: var(--light-dim);
  text-decoration: none;
  cursor: default;
}

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

.footer {
  border-top: 1px solid var(--rule);
  background: oklch(11.5% 0.026 265);
}

.footer__inner {
  max-width: calc(
    var(--margin) + var(--gap) + var(--measure) + var(--doc-pad) * 2
  );
  margin-inline: auto;
  padding: var(--s-2xl) var(--s-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-sm) var(--s-xl);
  font-size: var(--t-xs);
  color: var(--light-dim);
}

.footer__entity {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--light-mid);
}

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

/* --------------------------------------------------------- responsive -- */

/* The margin column narrows and the numerals move up next to the title: the
   content reorganises instead of shrinking. The trail stays: it is what gives
   the page its identity on a phone, where there is no room left for anything
   else. */
@media (max-width: 860px) {
  :root {
    --margin: 26px;
    --gap: var(--s-lg);
  }

  .doc__opening,
  .section,
  .siblings {
    display: block;
    grid-column: 2;
  }

  .doc__opening > *,
  .section > *,
  .action {
    grid-column: auto;
  }

  .section__num {
    display: block;
    justify-self: auto;
    padding: 0;
    margin-bottom: var(--s-xs);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .section {
    margin-top: var(--s-4xl);
  }
  .action {
    margin-top: var(--s-lg);
  }
}

@media (max-width: 560px) {
  :root {
    --doc-pad: var(--s-lg);
  }
  .top {
    padding: var(--s-lg) var(--s-lg) 0;
  }
  .doc {
    padding-block: var(--s-3xl) var(--s-4xl);
  }
  .trail {
    top: var(--s-3xl);
    bottom: var(--s-4xl);
  }
  .footer__inner {
    padding: var(--s-xl) var(--s-lg);
  }
  .action {
    padding: var(--s-lg);
  }
  .action__buttons .button {
    width: 100%;
  }
}

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* The dot disappears; the lit numeral keeps saying where you are. */
  .trail__dot {
    display: none;
  }
}

/* --------------------------------------------------------------- print -- */

/* Lawyers and store reviewers save to PDF. */
@media print {
  body {
    background: #fff;
    color: #111;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  body::before,
  .trail,
  .languages,
  .siblings {
    display: none;
  }
  .brand__base {
    width: 130px;
    filter: invert(1) contrast(1.4);
  }
  .brand__e {
    background: #111;
  }
  .doc {
    display: block;
    padding: 0;
    max-width: none;
  }
  .doc__title,
  .section__title,
  .action__title,
  .footer__entity {
    color: #111;
  }
  .doc__summary,
  .section strong {
    color: #111;
  }
  .section {
    margin-top: 22pt;
    break-inside: avoid;
  }
  .section__num {
    color: #666;
    margin-bottom: 2pt;
  }
  .action,
  .note {
    background: none;
    border-color: #bbb;
  }
  .action__template {
    background: none;
    border-color: #bbb;
  }
  a {
    color: #111;
    text-decoration: underline;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
  .footer {
    border-color: #bbb;
    background: none;
  }
}