/* Bati — the public site.
   Palette copied from constants/rawColors.ts, type from DESIGN.md. Two rules only:
   dark world, one accent per surface. Nothing here is loaded from a third party — an app
   that makes no network requests should not have a homepage that phones Google for a font. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --void: #0b0f19;
  --surface: #101322;
  --surface-2: #151a2e;
  --border: #2a3360;
  --glass-border: rgba(232, 236, 255, 0.14);
  /* Internal rules between rows of the same list: quieter than a card edge, or a table of
     five systems reads as five separate objects. */
  --hair: rgba(232, 236, 255, 0.09);
  --indigo: #4a3fd6;
  --indigo-lift: #5d53e8;
  --indigo-text: #8177f7;
  --magenta: #db2777;
  --gold: #ffd700;
  --text: #e8ecff;
  --muted: #909acb;
  --shadow: #060812;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  /* Screenshots and village art run wider than the reading column: they are the evidence, and
     at 1120px four phones are thumbnails. */
  --wrap-wide: 1320px;
  --radius: 16px;
  --head-h: 60px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--indigo-text);
  text-decoration-color: rgba(129, 119, 247, 0.4);
  text-underline-offset: 3px;
}

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

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

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
}

code,
pre {
  font-family: var(--mono);
}

/* Every anchor target clears the sticky header instead of landing under it. */
section[id] {
  scroll-margin-top: calc(var(--head-h) + 1rem);
}

/* --- Language switch -------------------------------------------------------------------
   Every language ships in the markup; all but one are hidden. No build step, no second URL to
   keep in sync, and a visitor with JS off still reads a complete page. */

html:not([data-lang="en"]) [lang="en"],
html:not([data-lang="fr"]) [lang="fr"],
html:not([data-lang="de"]) [lang="de"],
html:not([data-lang="es"]) [lang="es"] {
  display: none;
}

/* The privacy policy exists in English and French only: German and Spanish read the English
   one, under a note in their own language that says so. */
html[data-lang="de"] .prose > [lang="en"],
html[data-lang="es"] .prose > [lang="en"] {
  display: revert;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* Evidence — screenshots, village art — runs wider than the reading column while its caption
   stays in it. At 1120px four phones are thumbnails. */
.bleed {
  width: min(100vw - 2.5rem, var(--wrap-wide));
  max-width: calc(100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

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

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 15, 25, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-head__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--head-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/* A five-section page under a sticky bar that links nowhere wastes the bar. Anchors only —
   below 900px the sections are a short scroll apart and the row would crowd the switch. */
.site-nav {
  display: none;
  gap: 1.5rem;
}

.site-nav a,
.head-link {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover,
.head-link:hover {
  color: var(--text);
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
  }
}

.langs {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.langs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 0.72rem / 1 var(--display);
  letter-spacing: 0.12em;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.langs button[aria-pressed="true"] {
  background: var(--indigo);
  color: #fff;
}

/* --- Hero ------------------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

/* The scrims, in paint order: a horizontal one so the copy always has its own dark ground, a
   vignette that closes the frame, then the fade into the page. The forest has to stay legible
   as a place — the previous stack washed it to a flat grey. */
.hero__art {
  position: absolute;
  inset: 0 0 auto;
  height: 128%;
  background:
    linear-gradient(
      90deg,
      rgba(11, 15, 25, 0.94) 0%,
      rgba(11, 15, 25, 0.72) 42%,
      rgba(11, 15, 25, 0.34) 76%,
      rgba(11, 15, 25, 0.5) 100%
    ),
    radial-gradient(120% 80% at 50% 4%, transparent 0%, rgba(11, 15, 25, 0.5) 66%, var(--void) 100%),
    linear-gradient(180deg, rgba(11, 15, 25, 0.1) 0%, rgba(11, 15, 25, 0.45) 52%, var(--void) 93%),
    url("img/hero.webp") center top / cover no-repeat;
  z-index: -1;
}

/* 5.6vw, not more: the copy column is only ~610px at 1024 and the headline carries a hard
   <br>, so a steeper ramp overflows the second line before the phone breakpoint lets go. */
.hero h1 {
  font-size: clamp(2rem, 5.6vw, 4.75rem);
  max-width: 15ch;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--muted);
  max-width: 52ch;
  margin: 1.5rem 0 2.25rem;
}

.lead strong {
  color: var(--text);
  font-weight: 600;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.cta img {
  height: 56px;
  width: auto;
  display: block;
  border-radius: 10px;
}

.cta a {
  border-radius: 10px;
  box-shadow: 0 14px 30px -18px var(--shadow);
  transition: transform 0.15s ease;
}

.cta a:hover {
  transform: translateY(-2px);
}

/* Was an eyebrow above the headline. The three facts are worth keeping and worth nothing as a
   label: they belong under the buttons, where someone deciding to install actually asks them. */
.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0;
}

.note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 1.25rem 0 0;
  max-width: 54ch;
}

/* The phone only exists on a wide screen: at 1280px the copy stops at 52ch and the right half
   of the hero was empty. Below 960px the copy takes the width and the phone would push the CTA
   below the fold. */
.hero__device {
  display: none;
}

@media (min-width: 960px) {
  .hero__grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    column-gap: 4.5rem;
    align-items: center;
  }

  .hero__device {
    display: block;
    position: relative;
    isolation: isolate;
  }

  /* The bloom the boss art throws — the screenshot in the frame is a boss fight, and its own
     magenta is the only warm thing in the hero. */
  .hero__device::before {
    content: "";
    position: absolute;
    inset: -12% -22%;
    background: radial-gradient(
      50% 42% at 50% 46%,
      rgba(219, 39, 119, 0.28),
      rgba(74, 63, 214, 0.22) 45%,
      transparent 72%
    );
    z-index: -1;
  }

  .hero__phone {
    display: block;
    width: 300px;
    height: auto;
    transform: rotate(3deg);
  }
}

/* One device treatment, hero and gallery alike: a hairline screen edge inside a bezel ring,
   over a shadow with a real offset. */
.device {
  border-radius: 26px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  box-shadow:
    0 0 0 6px rgba(16, 19, 34, 0.72),
    0 36px 70px -28px var(--shadow),
    0 8px 20px -12px var(--shadow);
}

/* --- The loop: reps in, village out -----------------------------------------------------
   The one claim the whole product rests on, so it gets the one drawn structure on the page:
   a rail that runs indigo at the rep and gold at the village. */

/* margin-top alone: the shorthand would overwrite `.wrap`'s margin-inline and un-centre the row. */
.loop-rail {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.loop {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin: 0;
  padding: 0;
}

/* Starts and ends on a node — the nodes sit at the left edge of their column, so the line stops
   a quarter-width short of the right edge rather than running off into nothing. */
.loop::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: calc(25% - 6px);
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--indigo-text) 0%,
    rgba(129, 119, 247, 0.55) 38%,
    rgba(255, 215, 0, 0.5) 78%,
    var(--gold) 100%
  );
  transform-origin: left center;
}

/* The padding is on the row, not on the list: the node hangs in it, level with the rail. */
.loop li {
  position: relative;
  padding: 1.9rem 1.5rem 0 0;
}

.loop li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--void);
  border: 1px solid var(--indigo-text);
  box-shadow: 0 0 0 4px var(--void);
}

.loop li:last-child::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow:
    0 0 0 4px var(--void),
    0 0 18px 1px rgba(255, 215, 0, 0.55);
}

.loop__k {
  display: block;
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.loop__v {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.loop li:last-child .loop__v {
  color: var(--gold);
}

.loop-caption {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 1.5rem 0 0;
  max-width: 54ch;
}

/* --- Bands ----------------------------------------------------------------------------- */

.band {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  border-top: 1px solid var(--hair);
}

.band h2 {
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  max-width: 18ch;
  text-wrap: balance;
}

.band__intro {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  max-width: 56ch;
  margin: 1.25rem 0 0;
}

/* --- Screens ----------------------------------------------------------------------------
   Four phones, staggered: a straight row of identical rectangles reads as a spec sheet, and
   these are the product. */

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}

.shots figure {
  margin: 0;
  scroll-snap-align: center;
}

.shots img {
  width: 100%;
  display: block;
}

.shots figcaption {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 30ch;
}

@media (min-width: 960px) {
  .shots {
    overflow: visible;
    padding-bottom: 3.5rem;
    align-items: start;
  }

  .shots figure:nth-child(even) {
    transform: translateY(3rem);
  }
}

/* --- Systems ----------------------------------------------------------------------------
   Five rows and one piece of evidence, not six identical cards: the village is the payoff and
   the other five are the machinery, so they are not the same size. */

.systems {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}

.systems li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.35rem 1.25rem;
  align-items: start;
  padding: 1.35rem 0.75rem 1.35rem 0;
  border-bottom: 1px solid var(--hair);
  transition: background-color 0.15s ease;
}

.systems li:hover {
  background-color: rgba(129, 119, 247, 0.05);
}

.systems svg {
  width: 24px;
  height: 24px;
  margin-top: 0.15rem;
  stroke: var(--indigo-text);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.systems h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.systems p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

@media (min-width: 860px) {
  .systems li {
    grid-template-columns: 26px minmax(190px, 15rem) 1fr;
    align-items: baseline;
    gap: 1.5rem;
  }

  .systems p {
    grid-column: 3;
    max-width: 52ch;
  }
}

/* The village, four tiers apart: the one place the site shows the app's own art, at a size
   where the citadel is legible as a citadel. */
.village {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}

.village__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.village__strip img {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 50px -30px var(--shadow);
  display: block;
}

.village > figcaption {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--muted);
  max-width: 62ch;
}

.village > figcaption strong {
  color: var(--text);
  font-weight: 600;
}

/* The last tier carries the same gold as the last node of the loop: same claim, two places. */
.village__strip figure:last-child img {
  border-color: rgba(255, 215, 0, 0.4);
}

.village__strip figure {
  margin: 0;
}

.village__strip figcaption {
  margin-top: 0.7rem;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.village__strip figure:last-child figcaption {
  color: var(--gold);
}

/* Two muted paragraphs of the same measure read as one block otherwise. */
.village + .note {
  margin-top: 2.5rem;
}

/* --- Privacy ----------------------------------------------------------------------------
   Four zeros are the section, not a chip row under it. */

.privacy {
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(74, 63, 214, 0.18), transparent 70%), var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.zeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--glass-border);
}

.zeros li {
  padding: 1.5rem 1.25rem 0 0;
}

.zeros li + li {
  border-left: 1px solid var(--glass-border);
  padding-left: 1.5rem;
}

.zeros b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold);
}

.zeros span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.link-arrow {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
}

/* --- Install ----------------------------------------------------------------------------
   Two ways in, not two equal ways in: the repository updates itself and the APK does not. */

.install {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 860px) {
  .install {
    grid-template-columns: 1.45fr 1fr;
    gap: 2rem;
  }
}

.install__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.install__card--alt {
  background: transparent;
  border-color: var(--hair);
}

.install h3 {
  font-size: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.tag {
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
}

.install p {
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 54ch;
}

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--indigo);
  color: #fff;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.btn:hover {
  background: var(--indigo-lift);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--indigo-text);
  color: var(--text);
}

.repo {
  display: block;
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin: 1.5rem 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text);
}

/* Breaks at the spaces of the fingerprint, never inside a group: a hex block split mid-token
   is a fingerprint nobody can check against the one F-Droid shows. */
.repo span {
  display: block;
  overflow-wrap: break-word;
}

.repo span + span {
  margin-top: 0.5rem;
  color: var(--muted);
}

.warn {
  border-left: 1px solid var(--gold);
  padding-left: 1rem;
  font-size: 0.9rem;
}

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

.site-foot {
  padding: 3.5rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--muted);
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

.colophon {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  max-width: 70ch;
}

/* --- Prose (the privacy policy) --------------------------------------------------------- */

.prose {
  width: min(100% - 2.5rem, 68ch);
  margin: 0 auto;
  padding: 3.5rem 0 4rem;
}

.prose h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 1.5rem;
}

.prose h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.prose h3 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-left: 1px solid var(--indigo);
  border-radius: 0 12px 12px 0;
  color: var(--text);
}

.prose code {
  background: var(--surface-2);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* --- Small screens ---------------------------------------------------------------------- */

@media (max-width: 760px) {
  /* The break is composed for the two-line desktop headline; on a phone it strands "roi." on a
     line of its own. Let `balance` do the wrapping instead. */
  .hero h1 br {
    display: none;
  }

  /* The rail turns vertical rather than disappearing: the sequence is the point. One segment
     per step, node to node, so it ends on the village instead of trailing past it. */
  .loop {
    grid-template-columns: 1fr;
    padding-left: 1.75rem;
  }

  .loop::before {
    content: none;
  }

  .loop li {
    padding: 0 0 1.5rem;
  }

  .loop li::before {
    left: -1.75rem;
    top: 2px;
  }

  .loop li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(-1.75rem + 6px);
    top: 15px;
    bottom: 0;
    width: 1px;
    background: var(--seg, var(--indigo-text));
  }

  .loop li:nth-child(2)::after {
    --seg: rgba(129, 119, 247, 0.6);
  }

  .loop li:nth-child(3)::after {
    --seg: rgba(255, 215, 0, 0.55);
  }

  .loop li:last-child {
    padding-bottom: 0;
  }

  .cta img {
    height: 48px;
  }

  .village__strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .zeros {
    grid-template-columns: repeat(2, 1fr);
  }

  /* A vertical rule against the top edge of the grid is a rule against nothing on row two. */
  .zeros li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .zeros li:nth-child(n + 3) {
    border-top: 1px solid var(--glass-border);
  }
}

/* --- Motion ------------------------------------------------------------------------------
   One authored moment, on the loop only: the rail draws from the rep to the village, and the
   four steps arrive in the order the app produces them. Everything else is still. */

@media (prefers-reduced-motion: no-preference) {
  .loop::before {
    animation: draw 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  /* `backwards`, not `forwards`: the hidden state lives in the keyframe, so a browser that
     never runs the animation still shows four visible steps. */
  .loop li {
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  .loop li:nth-child(1) {
    animation-delay: 0.15s;
  }
  .loop li:nth-child(2) {
    animation-delay: 0.3s;
  }
  .loop li:nth-child(3) {
    animation-delay: 0.45s;
  }
  .loop li:nth-child(4) {
    animation-delay: 0.6s;
  }

  @keyframes draw {
    from {
      transform: scaleX(0);
    }
    to {
      transform: none;
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}