/*
 * postaim.com. One ink, link blue, on a cool paper. Structural lines are
 * drawn the way a placement spec is drawn: frames, dimension lines, the
 * disclosure bar. One family, Archivo, in three widths: expanded for display,
 * normal for reading, condensed for pixel sizes.
 */

@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo-4c98b9d490d1698e.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #edf0f7;
  --white: #ffffff;
  --blue: #1d2bd8;       /* link blue: display, lines, actions */
  --blue-press: #1520a8;
  --blue-wash: #f4f5ff;
  --ink: #0f1466;        /* deep ink: reading text */
  --ink-soft: #4b4f8c;   /* second lines, hints */
  --line: #7a82c9;       /* control borders, 3:1 on white */
  --rule: #aeb6f2;       /* drawing lines, page furniture */
  --visited: #5a1f9c;    /* the sent state */
  --error: #b3122e;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --section: clamp(104px, 13vw, 184px);

  --text-s: 0.875rem;                                 /* 14 */
  --text-m: 1rem;                                     /* 16 */
  --text: 1.125rem;                                   /* 18 */
  --text-l: 1.3125rem;                                /* 21 */
  --title: clamp(1.75rem, 1.15rem + 2.4vw, 2.875rem); /* 28 to 46 */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  font-stretch: 100%;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 780;
  font-stretch: 125%;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 { font-size: var(--title); max-width: 17em; }
h3 { font-size: var(--text-l); font-stretch: 112%; font-weight: 720; line-height: 1.2; letter-spacing: -0.005em; }
p { margin: 0; max-width: 34em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font: inherit; }
strong { font-weight: 700; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.wrap { width: min(calc(100% - 2 * var(--gutter)), var(--max)); margin-inline: auto; }

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

.skip {
  position: absolute; left: var(--gutter); top: -200px; z-index: 10;
  padding: 10px 16px; background: var(--white); color: var(--blue); font-weight: 650;
}
.skip:focus { top: 12px; }

/* Buttons: rectangles, like the units they sell. */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border: 2px solid var(--blue); border-radius: 0;
  background: var(--blue); color: var(--white);
  font: inherit; font-size: var(--text-m); font-weight: 700; font-stretch: 112%; line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.button:hover { background: var(--blue-press); border-color: var(--blue-press); text-decoration: none; }
.button-small { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.button-quiet { background: transparent; color: var(--blue); }
.button-quiet:hover { background: var(--white); color: var(--blue-press); }
.button-inverse { background: var(--white); border-color: var(--white); color: var(--blue); }
.button-inverse:hover { background: var(--paper); border-color: var(--paper); color: var(--blue-press); }

/* Header */

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  font-size: var(--text-l); font-weight: 800; font-stretch: 125%; letter-spacing: -0.02em; line-height: 1;
}
.brand:hover { text-decoration: none; }
.mark { width: 48px; height: 16px; flex: none; color: var(--blue); }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a:not(.button) { color: var(--ink); font-size: var(--text-m); text-decoration: none; }
.site-nav a:not(.button):hover { color: var(--blue); text-decoration: underline; }

/*
 * The hero is a Postaim unit drawn as a spec: the disclosure bar every
 * Postaim frame carries, over a banner composed for the placement the screen
 * can hold. 900 × 300 on wide screens, 600 × 300 in between, 300 × 250 on
 * phones, each with its own line breaks. Everything inside scales with the
 * unit (cqi), as a banner does.
 */

.hero { padding-block: clamp(24px, 5vw, 64px) var(--section); }

.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  grid-template-rows: 32px auto;
  gap: 12px 14px;
}

.dim { position: relative; display: grid; place-items: center; color: var(--blue); }
.dim-value {
  position: relative; z-index: 1;
  background: var(--paper);
  font-size: 0.8125rem; font-weight: 620; font-stretch: 72%; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  animation: appear 0.4s ease 0.85s both;
}
.dim-x { grid-column: 1; grid-row: 1; }
.dim-x .dim-value { padding: 2px 10px; }
.dim-x::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: currentColor; transform-origin: 50% 50%;
  animation: draw-x 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.dim-x::after {
  content: ""; position: absolute; inset: 8px 0;
  border-inline: 1px solid currentColor;
  animation: appear 0.3s ease 0.7s both;
}
.dim-y { grid-column: 2; grid-row: 2; }
.dim-y .dim-value { padding: 8px 0; }
.dim-y::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: currentColor; transform-origin: 50% 50%;
  animation: draw-y 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.dim-y::after {
  content: ""; position: absolute; inset: 0 12px;
  border-block: 1px solid currentColor;
  animation: appear 0.3s ease 0.7s both;
}

@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@keyframes appear { from { opacity: 0; } }

.at-p3, .at-p2 { display: none; }

.hero-unit {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column;
  aspect-ratio: 3 / 1;
  container-type: inline-size;
  background: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.disclosure {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 10px;
  background: var(--white); color: var(--ink-soft);
  font-size: 0.75rem; line-height: 1rem;
}

.hero-banner {
  position: relative; flex: 1;
  padding: 5cqi 5.5cqi;
  color: var(--white);
}
.hero-banner h1 {
  max-width: none;
  font-size: 7.2cqi; font-weight: 820; line-height: 0.94; letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero-cta { position: absolute; right: 5.5cqi; bottom: 4.5cqi; min-height: 44px; }
.hero-banner :focus-visible { outline-color: var(--white); }

.hero-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 48px;
  margin-top: 32px;
}
.deck { max-width: 31em; font-size: var(--text-l); line-height: 1.45; }
.hero-aside { font-size: var(--text-m); font-weight: 620; }

/* The headline's line breaks belong to its composition: three lines in the
   wide units, four in the box. */
@media (min-width: 720px) {
  .br-narrow { display: none; }
}
@media (max-width: 1099px) {
  .at-p1, .at-p2 { display: none; }
  .at-p3 { display: inline; }
  .hero-unit { aspect-ratio: 2 / 1; }
  .hero-banner h1 { font-size: 8.9cqi; }
}
@media (max-width: 719px) {
  .at-p1, .at-p3 { display: none; }
  .at-p2 { display: inline; }
  .spec { grid-template-columns: minmax(0, 1fr) 32px; gap: 10px; }
  .hero-unit { aspect-ratio: 6 / 5; }
  .hero-banner { padding: 6.5cqi; }
  .br-wide { display: none; }
  .hero-banner h1 { font-size: 10.8cqi; }
  .hero-cta { left: 6.5cqi; right: auto; bottom: 6.5cqi; }
  .hero-foot { margin-top: 24px; }
  .deck { font-size: var(--text); }
}

/* Sections */

.section { padding-block: 0 var(--section); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 80px); }
.section-head p { font-size: var(--text); }

.points { display: grid; gap: 18px; align-content: start; }
.points li { position: relative; padding-left: 28px; }
.points li::before {
  content: ""; position: absolute; left: 0; top: 0.48em;
  width: 13px; height: 11px; background: var(--blue);
}
.points strong { color: var(--ink); }

/* Measurement: the path of one conversion. A real sequence, so numbered. */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 24px;
}
.steps::before {
  content: ""; position: absolute; top: 14px; left: 0; height: 1px;
  width: calc(4 * ((100% - 96px) / 5 + 24px) + 34px);
  background: var(--blue);
}
.step { position: relative; display: grid; gap: 10px; align-content: start; }
.step-n {
  display: grid; place-items: center;
  width: 34px; height: 28px; margin-bottom: 14px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--blue);
  color: var(--blue);
  font-size: var(--text-s); font-weight: 720; font-stretch: 72%; font-variant-numeric: tabular-nums; line-height: 1;
}
.step-end .step-n { background: var(--blue); color: var(--white); }
.step p { color: var(--ink-soft); font-size: var(--text-m); line-height: 1.5; }

.points-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 56px;
  margin-top: clamp(56px, 7vw, 96px);
}

@media (max-width: 919px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-left: 58px; }
  .steps::before { top: 0; bottom: 0; left: 17px; width: 1px; height: auto; }
  .step-n { position: absolute; left: -58px; top: -4px; margin: 0; }
}
@media (max-width: 639px) {
  .points-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Segments: choose, and see which example placements match. */

.segmenter { margin-bottom: clamp(56px, 7vw, 96px); }

.sentence {
  margin-bottom: 36px;
  font-size: clamp(1.25rem, 0.95rem + 1.3vw, 1.875rem);
  font-weight: 640; font-stretch: 112%; line-height: 1.7; letter-spacing: -0.01em;
}
.sentence[hidden] { display: none; }
.sentence select {
  display: inline-block; width: auto; min-height: 0; margin: 0 2px;
  padding: 0 30px 0 8px;
  border: 0; border-bottom: 2px solid var(--blue);
  background-color: var(--white); background-position: right 9px center;
  color: var(--blue);
  font: inherit; font-weight: 760; line-height: 1.4;
  vertical-align: baseline;
}
.sentence select:hover { background-color: var(--blue-wash); }
.sentence select { max-width: 100%; }
/* Measures the chosen option, so each select is as wide as what it shows (site.js). */
.sentence { position: relative; }
.sentence-ruler {
  position: absolute; top: 0; left: 0;
  visibility: hidden; pointer-events: none; white-space: pre;
  font-weight: 760;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px 20px;
  align-items: end;
}
.tile {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0;
  overflow-wrap: anywhere;
  transition: opacity 0.2s ease;
}
.screen {
  display: grid; align-content: start; gap: 5px;
  margin-bottom: 10px; padding: 9%;
  background: var(--white); box-shadow: 0 0 0 1px var(--rule);
}
.tile-desktop .screen { aspect-ratio: 16 / 10; }
.tile-mobile .screen { width: 56%; aspect-ratio: 9 / 16; }
.screen i { display: block; height: 5px; background: var(--paper); }
.screen i:first-child { width: 72%; height: 8px; background: var(--rule); }
.screen b { display: block; margin-block: 3px; background: var(--blue); transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.tile-desktop .screen b { aspect-ratio: 3 / 1; }
.tile-mobile .screen b { aspect-ratio: 6 / 5; }
.tile-name { font-size: var(--text-s); font-weight: 700; font-stretch: 112%; line-height: 1.3; }
.tile-meta { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.35; }
.tile.is-out { opacity: 0.4; }
.tile.is-out .screen b { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }

.segment-count { margin-top: 32px; color: var(--ink-soft); font-size: var(--text-m); }
.segment-count[hidden] { display: none; }
.segment-count strong { color: var(--ink); }

@media (max-width: 919px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 14px; }
}

/* Spec lists: four columns of short definitions. */

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 36px;
  margin: 0;
}
.specs dt { margin-bottom: 6px; font-size: var(--text-m); font-weight: 720; font-stretch: 112%; }
.specs dd { margin: 0; color: var(--ink-soft); font-size: var(--text-m); line-height: 1.5; }

@media (max-width: 919px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .specs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Why: one statement, and the three promises it makes, each a way into its section. */

.statement {
  max-width: 24em;
  font-size: clamp(1.625rem, 1.05rem + 2.3vw, 2.75rem);
  font-weight: 640; font-stretch: 112%; line-height: 1.18; letter-spacing: -0.018em;
  text-wrap: balance;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 4vw, 56px);
  margin-top: clamp(56px, 7vw, 96px);
}
.pillar {
  display: grid; gap: 10px; align-content: start; height: 100%;
  padding-top: 22px;
  box-shadow: 0 -2px 0 var(--blue);
  color: inherit; text-decoration: none;
}
.pillar p { color: var(--ink-soft); font-size: var(--text-m); }
.pillar-more { margin-top: 6px; color: var(--blue); font-size: var(--text-m); font-weight: 680; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pillar:hover .pillar-more { text-decoration-thickness: 2px; }
.pillar:hover h3 { color: var(--blue); }

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

/* Feature grids: a short title and a line each. */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px clamp(32px, 5vw, 72px);
}
.features-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features > div { display: grid; gap: 10px; align-content: start; padding-left: 26px; position: relative; }
.features > div::before {
  content: ""; position: absolute; left: 0; top: 0.36em;
  width: 13px; height: 11px; background: var(--blue);
}
.features p { color: var(--ink-soft); font-size: var(--text-m); line-height: 1.55; }
.section-cta { margin-top: clamp(48px, 6vw, 72px); }

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

/* Publishers: a change of audience, so a change of ground. */

.band {
  margin-bottom: var(--section);
  padding-block: clamp(80px, 10vw, 144px);
  background: var(--ink); color: #c9cff5;
}
.band h2, .band strong { color: var(--white); }
.band .lede { color: #e3e6fb; }
.band .points li::before { background: var(--rule); }
.band :focus-visible { outline-color: var(--white); }
.publishers {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: start;
}
.publishers-head { display: grid; gap: 24px; }
.lede { font-size: var(--text-l); line-height: 1.45; }

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

/* The invite form */

.invite {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.invite-intro { position: sticky; top: 32px; display: grid; gap: 20px; }

.form {
  display: grid; gap: 44px;
  padding: clamp(22px, 4vw, 48px);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--rule);
}
.form[hidden] { display: none; }

.group { display: grid; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.group[hidden] { display: none; }
.group legend {
  float: left; width: 100%; padding: 0;
  font-size: var(--text-l); font-weight: 760; font-stretch: 118%; line-height: 1.2; letter-spacing: -0.01em;
}

.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.field > label, .label { font-size: var(--text-m); font-weight: 640; line-height: 1.35; }
.optional { margin-left: 4px; color: var(--ink-soft); font-size: var(--text-s); font-weight: 400; }
.hint { color: var(--ink-soft); font-size: var(--text-s); line-height: 1.4; }
.error { color: var(--error); font-size: var(--text-s); font-weight: 640; line-height: 1.4; }
.error[hidden] { display: none; }
.field-short { max-width: 26rem; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

input[type="text"], input[type="email"], input[type="url"], select, textarea {
  width: 100%; min-height: 48px; margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--white); color: var(--ink);
  font: inherit; font-size: var(--text-m); line-height: 1.4;
}
textarea { resize: vertical; min-height: 120px; }
select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d2bd8' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
::placeholder { color: var(--ink-soft); opacity: 0.7; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue); outline-offset: 0;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error); box-shadow: inset 3px 0 0 var(--error);
}

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; align-items: start;
  padding: 16px 18px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.choice:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); }
.choice input { grid-row: span 2; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.choice-title { font-weight: 720; font-stretch: 112%; line-height: 1.3; }
.choice-note { color: var(--ink-soft); font-size: var(--text-s); line-height: 1.4; }
.choice:has(input:checked) { background: var(--blue-wash); box-shadow: inset 0 0 0 2px var(--blue); }
.choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.group[data-invalid] .choice { box-shadow: inset 0 0 0 1px var(--error); }

.options { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.option { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--text-m); cursor: pointer; }
.option input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.ratio { display: inline-block; height: 14px; box-shadow: inset 0 0 0 1.5px var(--blue); }
.ratio-p1 { width: 42px; }
.ratio-p3 { width: 28px; }
.ratio-p2 { width: 17px; }

.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.fine { flex: 1 1 16em; color: var(--ink-soft); font-size: var(--text-s); }

/* Sent. Shown by the script, or by :target after a submission without it. */
.sent {
  display: none; gap: 16px;
  padding: clamp(22px, 4vw, 48px);
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--visited);
}
.sent:focus { outline: none; }
.sent:target, .sent.is-shown { display: grid; }
.invite:has(.sent:target) .form { display: none; }
.sent h3 { color: var(--visited); font-size: var(--title); font-stretch: 125%; font-weight: 780; }
.sent strong { overflow-wrap: anywhere; }

@media (max-width: 919px) {
  .invite { grid-template-columns: minmax(0, 1fr); }
  .invite-intro { position: static; }
}
@media (max-width: 559px) {
  .two, .choices { grid-template-columns: minmax(0, 1fr); }
  .form { gap: 36px; }
}

/* Footer */

.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding-block: 36px 48px;
  box-shadow: 0 -1px 0 var(--rule);
  color: var(--ink-soft); font-size: var(--text-s);
}
.brand-small { gap: 10px; font-size: var(--text-m); }
.brand-small .mark { width: 36px; height: 12px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--blue); text-decoration: underline; }

/* The 404 page, built in src/homepage.ts. */
.missing { display: grid; gap: 32px; justify-items: start; padding-block: 22vh; }
.missing h1 { font-size: var(--title); max-width: 14em; }

@media (max-width: 899px) {
  .site-nav a:not(.button) { display: none; }
}
@media (max-width: 719px) {
  body { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}