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

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: oklch(0.15 0.018 232);
  --surface: oklch(0.19 0.02 230);
  --surface-high: oklch(0.23 0.022 228);
  --surface-hover: color-mix(in oklch, var(--surface-high), var(--ink) 6%);
  --hairline: oklch(0.32 0.018 225);
  --hairline-strong: color-mix(in oklch, var(--hairline), var(--ink) 12%);
  --ink: oklch(0.95 0.008 220);
  --muted: oklch(0.7 0.012 220);
  --faint: oklch(0.62 0.012 220);
  --primary: oklch(0.78 0.125 198);
  --primary-hover: oklch(0.83 0.11 198);
  --primary-pressed: oklch(0.7 0.13 198);
  --indigo: oklch(0.58 0.15 282);
  --periwinkle: oklch(0.7 0.09 285);

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;

  --lift: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --well: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  --glow: 0 0 28px -4px oklch(0.78 0.125 198 / 0.55);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --calm: 320ms;

  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --text: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  --z-header: 10;
  --z-toast: 40;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip rather than hidden: the hero glow is wider than the viewport on small screens and
     must not become a scrollable region. */
  overflow-x: clip;
}

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

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

a {
  color: var(--ink);
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.22em;
  transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}

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

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

.wrap {
  width: min(100% - 2 * clamp(20px, 5vw, 56px), 1140px);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-high);
  color: var(--ink);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-sm);
  z-index: var(--z-toast);
}

.skip:focus {
  left: var(--s-md);
  top: var(--s-md);
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.display {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.h3 {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  color: var(--muted);
  max-width: 54ch;
}

.note {
  font-size: 0.9375rem;
  color: var(--faint);
  max-width: 62ch;
}

.num {
  font-family: var(--display);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums;
}

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: clamp(var(--s-lg), 3vw, var(--s-xl));
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}

.wordmark img {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
}

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

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-md), 2.5vw, var(--s-lg));
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

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

.hero {
  padding-block: clamp(var(--s-2xl), 8vw, 116px) clamp(var(--s-2xl), 8vw, 120px);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(var(--s-xl), 5vw, 72px);
  align-items: center;
}

.hero__copy > * + * {
  margin-top: var(--s-lg);
}

.hero h1 {
  font-size: clamp(2.75rem, 7.6vw, 5.75rem);
  max-width: 16ch;
}

.hero__lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 22px 10px 18px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: var(--surface-high);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--lift);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.store-btn:hover {
  color: var(--ink);
  background: var(--surface-hover);
  border-color: var(--hairline-strong);
}

.store-btn:active {
  transform: translateY(1px);
}

.store-btn svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

.store-btn__text {
  display: grid;
  line-height: 1.15;
}

.store-btn__text small {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.store-btn__text strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.store-btn--primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--bg);
}

.store-btn--primary:hover {
  background: var(--primary-hover);
  border-color: transparent;
  color: var(--bg);
}

.store-btn--primary:active {
  background: var(--primary-pressed);
}

.store-btn--primary .store-btn__text small {
  color: color-mix(in oklch, var(--bg), var(--primary) 22%);
}

section {
  padding-block: clamp(var(--s-2xl), 7vw, 108px);
}

.band {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}

.section-head {
  max-width: 46ch;
  display: grid;
  gap: var(--s-md);
  margin-bottom: clamp(var(--s-2xl), 5vw, 72px);
}

.screen {
  position: relative;
  margin: 0;
}

/* 11% of the width, expressed vertically as a share of the 1320x2868 aspect, keeps the
   corner circular at any rendered size. */
.screen img {
  width: 100%;
  height: auto;
  border-radius: 11% / 5.06%;
  box-shadow: 0 0 0 1px var(--hairline), var(--lift);
}

.screen figcaption {
  position: absolute;
  left: 50%;
  bottom: -15px;
  white-space: nowrap;
  padding: 6px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--surface-high);
  box-shadow: var(--lift);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--muted);
}

.hero__stage {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
}

.hero__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 210%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    oklch(0.78 0.125 198 / 0.3) 0%,
    oklch(0.78 0.125 198 / 0.12) 30%,
    oklch(0.7 0.09 285 / 0.06) 52%,
    transparent 72%
  );
  opacity: 0.9;
  pointer-events: none;
  animation: breathe 9s var(--ease) infinite;
}

/* The screen is cut short and dissolved so it reads as rising out of the page, not as a
   pasted rectangle. mask-repeat must stay no-repeat or the overflow tiles back in. */
.screen--hero {
  z-index: 1;
  height: clamp(440px, 50vw, 620px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.screen--hero img {
  box-shadow: 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.how {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(var(--s-xl), 6vw, 88px);
  align-items: center;
}

.how__copy > * + * {
  margin-top: var(--s-md);
}

.cross {
  position: relative;
  width: min(100%, 520px);
  margin-left: auto;
  padding-block: clamp(var(--s-lg), 4vw, var(--s-xl));
}

.cross__a {
  position: absolute;
  left: 0;
  top: 0;
  width: 54%;
  z-index: 1;
  transform: translateY(var(--drift, 0px)) rotate(-7deg);
}

.cross__a img {
  opacity: 0.68;
}

/* Above and left, the only corner the front screen never reaches. */
.cross__a figcaption {
  top: -15px;
  bottom: auto;
  left: 0;
  transform: rotate(7deg);
}

.cross__b {
  position: relative;
  width: 60%;
  margin: 12% 0 0 auto;
  z-index: 2;
  transform: translateY(var(--drift, 0px)) rotate(4.5deg);
}

.cross__b img {
  box-shadow: 0 0 0 1px var(--hairline-strong), var(--lift),
    0 0 70px -18px oklch(0.78 0.125 198 / 0.4);
}

.cross__b figcaption {
  transform: translateX(-50%) rotate(-4.5deg);
}

.preview {
  position: relative;
  max-width: 920px;
}

/* The source is a mid-scroll capture: fade the last band so the half-cut row at its
   bottom edge reads as a dissolve rather than a crop. */
/* The marked panel, as a share of the 1320x2868 capture. The scrim and the marker both
   derive from these four, so they cannot drift apart. */
.preview__phone {
  --mx: 8.7%;
  --my: 38.2%;
  --mr: 91.7%;
  --mb: 58.9%;
  width: 320px;
  max-width: 100%;
  border-radius: 11% / 5.06%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), var(--lift);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.preview__phone img {
  border-radius: inherit;
  box-shadow: none;
}

/* Scrim with a hole: the outer ring runs clockwise and the inner one counter-clockwise, so
   the marked panel is the one part left undimmed. (A huge spread shadow does the same job
   in one declaration, but its paint rect is big enough to stop Chrome painting sections
   further down the page.) */
.preview__phone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(0.15 0.018 232 / 0.72);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    var(--mx) var(--my),
    var(--mx) var(--mb),
    var(--mr) var(--mb),
    var(--mr) var(--my),
    var(--mx) var(--my)
  );
}

.preview__marker {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  right: calc(100% - var(--mr));
  bottom: calc(100% - var(--mb));
  z-index: 1;
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
}

.preview__detail {
  position: absolute;
  left: 380px;
  top: 48.55%;
  width: 500px;
  transform: translateY(-50%) translateY(var(--drift, 0px));
}

.preview__leader {
  position: absolute;
  right: 100%;
  top: 50%;
  width: 87px;
  height: 1px;
  background: linear-gradient(
    to left,
    var(--primary),
    color-mix(in oklch, var(--primary), transparent 65%)
  );
}

.preview__leader::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

/* A window onto the same file, scaled up. Source coordinates are in the exported image's
   own pixel space (1100 wide); everything else derives from them. */
.loupe {
  --img-w: 1100;
  --sx: 96;
  --sy: 913;
  --sw: 913;
  --sh: 496;
  --lw: 500;
  --k: calc(var(--lw) / var(--sw));
  width: calc(var(--lw) * 1px);
  height: calc(var(--sh) * var(--k) * 1px);
  max-width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background-image: url('../img/screens/progress.webp');
  background-repeat: no-repeat;
  background-size: calc(var(--img-w) * var(--k) * 1px) auto;
  background-position: calc(var(--sx) * var(--k) * -1px) calc(var(--sy) * var(--k) * -1px);
  box-shadow: var(--lift), 0 0 60px -20px oklch(0.78 0.125 198 / 0.45);
}

.preview__cap {
  margin-top: var(--s-md);
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 46ch;
}

.deck {
  position: relative;
  transform: translateY(var(--drift, 0px));
}

.deck__b {
  position: relative;
  width: 56%;
  margin-inline: auto;
  z-index: 3;
}

.deck__a,
.deck__c {
  position: absolute;
  top: 7%;
  width: 48%;
  z-index: 1;
}

.deck__a {
  left: 2%;
  transform: rotate(-9deg);
}

.deck__c {
  right: 2%;
  transform: rotate(9deg);
}

.deck__a img,
.deck__c img {
  opacity: 0.72;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.refusals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.refusal {
  padding: clamp(var(--s-lg), 3vw, var(--s-xl)) clamp(var(--s-md), 3vw, var(--s-xl))
    clamp(var(--s-lg), 3vw, var(--s-xl)) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-sm);
}

.refusal:nth-child(odd) {
  border-right: 1px solid var(--hairline);
}

.refusal:nth-child(even) {
  padding-left: clamp(var(--s-md), 3vw, var(--s-xl));
}

.refusal h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.refusal p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 40ch;
}

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

.plus .section-head {
  margin-bottom: var(--s-xl);
}

.plus__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-md);
}

.plus__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-md);
  padding-bottom: var(--s-md);
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
}

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

.plus__list b {
  font-family: var(--text);
  font-weight: 600;
  color: var(--ink);
}

.plus__mark {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: none;
}

.plus__mark::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--periwinkle);
}

.get {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--s-xl), 5vw, 72px);
  align-items: start;
}

.get__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-md), 2.5vw, var(--s-lg));
}

.get__card {
  display: grid;
  gap: var(--s-lg);
  justify-items: start;
  padding: clamp(var(--s-lg), 3vw, var(--s-xl));
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
}

.qr {
  width: 132px;
  height: 132px;
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--ink);
}

.qr svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: crispEdges;
}

.qr path,
.qr rect {
  fill: var(--bg);
}

.qr rect:first-child {
  fill: var(--ink);
}

.get__note {
  font-size: 0.875rem;
  color: var(--faint);
}

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(var(--s-2xl), 5vw, var(--s-3xl));
  background: var(--surface);
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-lg);
  align-items: start;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
  font-size: 0.9375rem;
}

.site-footer__links a {
  color: var(--muted);
  text-decoration: none;
}

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

.site-footer__fine {
  margin-top: clamp(var(--s-xl), 4vw, var(--s-2xl));
  display: grid;
  gap: var(--s-sm);
  font-size: 0.875rem;
  color: var(--faint);
  max-width: 72ch;
}

.page-head {
  padding-block: clamp(var(--s-2xl), 6vw, 88px) clamp(var(--s-lg), 3vw, var(--s-xl));
  display: grid;
  gap: var(--s-md);
  max-width: 60ch;
}

.page-head .display {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.updated {
  font-size: 0.9375rem;
  color: var(--faint);
}

.summary {
  padding: clamp(var(--s-lg), 3vw, var(--s-xl));
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  display: grid;
  gap: var(--s-md);
  max-width: 72ch;
}

.summary ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--s-sm);
  color: var(--muted);
}

.toc {
  margin-block: clamp(var(--s-xl), 4vw, var(--s-2xl));
  padding-bottom: clamp(var(--s-xl), 4vw, var(--s-2xl));
  border-bottom: 1px solid var(--hairline);
  max-width: 72ch;
}

.toc ol {
  margin: var(--s-md) 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--s-2xl);
  font-size: 0.9375rem;
}

.toc li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.toc a {
  color: var(--muted);
  text-decoration: none;
}

.toc a:hover {
  color: var(--primary);
}

.toc__label {
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.prose {
  max-width: 72ch;
  padding-bottom: clamp(var(--s-3xl), 8vw, 112px);
}

.prose section {
  padding-block: 0;
  margin-top: clamp(var(--s-xl), 4vw, var(--s-2xl));
  scroll-margin-top: var(--s-xl);
}

.prose h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-md);
}

.prose h3 {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.0625rem;
  margin: var(--s-lg) 0 var(--s-sm);
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose p + p,
.prose ul + p,
.prose p + ul {
  margin-top: var(--s-md);
}

.prose ul {
  margin: var(--s-md) 0 0;
  padding-left: 1.15em;
  display: grid;
  gap: var(--s-sm);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose a {
  color: var(--primary);
  text-decoration-color: color-mix(in oklch, var(--primary), transparent 60%);
}

.prose__contact {
  margin-top: clamp(var(--s-xl), 4vw, var(--s-2xl));
  padding: clamp(var(--s-lg), 3vw, var(--s-xl));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--s-sm);
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.hero__copy > * {
  animation: rise 800ms var(--ease) both;
}

.hero__copy > *:nth-child(2) {
  animation-delay: 70ms;
}

.hero__copy > *:nth-child(3) {
  animation-delay: 140ms;
}

.hero__copy > *:nth-child(4) {
  animation-delay: 210ms;
}

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

@media (max-width: 900px) {
  .hero h1,
  .hero__lead {
    max-width: none;
  }

  .hero,
  .how,
  .plus,
  .get {
    grid-template-columns: 1fr;
  }

  .hero__stage {
    margin-top: var(--s-lg);
  }

  .cross,
  .deck {
    width: min(100%, 440px);
    margin-inline: auto;
  }

  .deck {
    margin-top: var(--s-2xl);
  }

  .preview__detail {
    position: static;
    width: 100%;
    margin-top: var(--s-2xl);
    transform: none;
  }

  .preview__leader {
    display: none;
  }

  .loupe {
    --lw: 420;
  }

  .get__cards {
    max-width: 560px;
  }

  .toc ol {
    columns: 1;
  }
}

@media (max-width: 640px) {
  .loupe {
    --lw: 320;
  }
}

@media (max-width: 400px) {
  .preview__phone {
    width: 100%;
  }

  .loupe {
    --lw: 260;
  }
}

@media (max-width: 640px) {
  .refusals {
    grid-template-columns: 1fr;
  }

  .refusal:nth-child(odd) {
    border-right: 0;
  }

  .refusal:nth-child(even) {
    padding-left: 0;
  }

  .site-nav {
    gap: var(--s-md);
  }

  .site-nav__more {
    display: none;
  }

  .get__cards {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .cross__a,
  .cross__b,
  .deck__a,
  .deck__c,
  .preview__detail {
    --drift: 0px;
  }
}