/* ─────────────────────────────────────────────────────────────────────────────
   Ritual: the site's design system.

   The idea: Ritual prices your day like a stock, so the site is set like the
   paper that stock would be quoted in. A broadsheet, not a SaaS template:
   - Instrument Serif for headlines, with italic for the word that matters
   - Instrument Sans (the app's own face) for reading
   - IBM Plex Mono for every number, ticker, label and date
   - hairline rules instead of boxes, columns instead of card grids
   - one signal colour (the app's coral) that means "up", used sparingly
   - flat paper with a faint grain, never a glow or a gradient wallpaper

   Built into every page by src-flow/build.py as /assets/site.css?v=<hash>.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ── tokens ────────────────────────────────────────────────────────────────
   Dark is the default: the app's own dark palette. Light is the app's light
   palette, applied by the toggle in the header (data-theme="light"). */
:root {
  color-scheme: dark;
  --paper: #121212;          /* the page */
  --plane: #1a1918;          /* a raised plane: the board, a figure, the coupon */
  --plane-2: #222120;        /* hover on a plane */
  --sunk: #0d0d0d;           /* an inset well, the film's stage */
  --ink: #f4f3f1;            /* text */
  --ink-2: #b9b4ae;          /* secondary text */
  --ink-3: #8e8984;          /* labels, captions */
  --rule: rgba(244, 243, 241, 0.13);
  --rule-2: rgba(244, 243, 241, 0.3);
  --signal: #f07a5c;         /* the app's coral: up, now, the thing to press */
  --signal-ink: #f07a5c;     /* coral as text, at a readable contrast */
  --signal-soft: rgba(240, 122, 92, 0.14);
  --on-signal: #1a0f0b;
  --btn: var(--signal);       /* a filled button or flag: coral at a contrast its label can read on */
  --down: #8e8984;
  --gold: #f2c14e;
  --teal: #4fc1b0;
  --grain-opacity: 0.045;
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85);

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* kept for the app pieces that still ask for them */
  --font-sans: var(--sans);
  --font-mono: var(--mono);

  /* a modular type scale: body steps by 1.2, display by 1.333 */
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --d-1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --d-2: clamp(2.6rem, 1.7rem + 3.8vw, 4.75rem);
  --d-3: clamp(3.2rem, 1.8rem + 6vw, 7rem);
  --d-4: clamp(3.6rem, 1.4rem + 9.6vw, 11.5rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --col-gap: clamp(20px, 3vw, 40px);
  --sec: clamp(72px, 10vw, 152px);   /* the space between sections */
  --header: 60px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* old names the walkthrough and app pieces still use */
  --bg: var(--paper);
  --panel: var(--plane);
  --panel-2: var(--plane-2);
  --line: var(--rule);
  --text: var(--ink);
  --mid: var(--ink-2);
  --muted: var(--ink-3);
  --coral: var(--signal);
  --coral-ink: var(--signal-ink);
  --coral-light: var(--signal-ink);
  --coral-deep: #e85e3e;
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f3f1ee;
  --plane: #ffffff;
  --plane-2: #faf9f7;
  --sunk: #efece8;
  --ink: #1f1d1b;
  --ink-2: #5e5a56;
  --ink-3: #6e6964;
  --rule: rgba(31, 29, 27, 0.14);
  --rule-2: rgba(31, 29, 27, 0.34);
  --signal: #e8613f;
  --signal-ink: #b4472f;
  --signal-soft: rgba(232, 97, 63, 0.1);
  --on-signal: #ffffff;
  --btn: #c4502f;
  --down: #6e6964;
  --gold: #87611c;
  --teal: #1f7a6c;
  --grain-opacity: 0.06;
  --shadow: 0 40px 80px -44px rgba(70, 50, 30, 0.38);
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-m); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* the paper's grain: a fixed, static noise tile at a whisper of opacity */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer, section { position: relative; z-index: 1; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
a, button, input, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: calc(var(--header) + 24px); }
::selection { background: var(--signal); color: var(--on-signal); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: 10px; z-index: 30; padding: 10px 14px; background: var(--ink); color: var(--paper); font-weight: 600; transform: translateY(-160%); transition: transform .2s ease; }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; }

/* ── type ── */
.serif { font-family: var(--serif); font-weight: 400; }
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 0.95; text-wrap: balance; }
.display em, .h2 em, .h3 em { font-style: italic; color: var(--signal-ink); }
.h2 { font-family: var(--serif); font-size: var(--d-2); font-weight: 400; line-height: 0.98; letter-spacing: -0.012em; text-wrap: balance; }
.h3 { font-family: var(--serif); font-size: var(--d-1); font-weight: 400; line-height: 1.04; letter-spacing: -0.008em; text-wrap: balance; }
.label { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.label b { color: var(--ink); font-weight: 500; }
.label .up, .up { color: var(--signal-ink); }
.dn { color: var(--down); }
.lede { font-size: var(--t-l); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.lede strong { color: var(--ink); font-weight: 500; }
.body-copy p + p { margin-top: 1em; }
.prose { color: var(--ink-2); line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a, .text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color .2s ease, color .2s ease; }
.prose a:hover, .text-link:hover { text-decoration-color: var(--signal); }

/* a section's slug: "§ 01  The price", set like a newspaper's section marker */
.slug { display: flex; align-items: baseline; gap: 14px; padding-top: 14px; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.slug .n { color: var(--signal-ink); }
.slug .r { margin-left: auto; color: var(--ink-3); }
.flag { display: inline-block; padding: 2px 6px 1px; background: var(--btn); color: var(--on-signal); font: 500 0.6875rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.15em; }
.flag.quiet { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule-2); }

/* ── buttons: rectangular, labelled like an order ticket ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 50px; padding: 0 22px; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--btn); color: var(--on-signal);
  font: 600 0.9375rem/1 var(--sans); letter-spacing: -0.005em;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { background: #f38a6e; }
:root[data-theme="light"] .btn:hover { background: #b4472f; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.65; cursor: progress; }
.btn.small { height: 38px; padding: 0 14px; font-size: 0.875rem; gap: 8px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn.ghost:hover { background: var(--plane); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { background: var(--btn); color: var(--on-signal); }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--rule-2); padding-bottom: 4px; transition: border-color .2s ease, gap .25s var(--ease); }
.arrow-link svg { width: 16px; height: 16px; }
.arrow-link:hover { border-color: var(--signal); gap: 14px; }

/* ── header ── */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--rule); }
.top .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -0.01em; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.top nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.top .links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; }
.top .links a { position: relative; display: block; padding-block: 6px; color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; transition: color .2s ease; }
.top .links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.top .links a:hover { color: var(--ink); }
.top .links a:hover::after { transform: scaleX(1); }
.top .links a[aria-current="page"] { color: var(--ink); }
.top .links a[aria-current="page"]::after { transform: scaleX(1); height: 2px; }
.top .links small { display: none; }
.theme-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 2px; background: transparent; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); transition: color .2s ease, box-shadow .2s ease; }
.theme-btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .sun { display: none; }
[data-theme="light"] .theme-btn .sun { display: block; }
[data-theme="light"] .theme-btn .moon { display: none; }
.menu-btn { display: none; }
/* a link the bar only has room for from 1024px (build.py, WIDE_ONLY); the phone menu always shows it */
@media (min-width: 761px) and (max-width: 1023px) { .top .links li.wide { display: none; } }
@media (min-width: 761px) and (max-width: 1099px) { .top .links li.wider { display: none; } }
@media (min-width: 1024px) { .top .links a { white-space: nowrap; } }
@media (max-width: 760px) {
  .top nav { gap: 8px; }
  .top .btn.small { padding: 0 12px; }
  .menu-btn {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
    background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule);
  }
  .menu-btn i { grid-area: 1 / 1; display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .22s ease; }
  .menu-btn i:first-child { transform: translateY(-3.5px); }
  .menu-btn i:last-child { transform: translateY(3.5px); }
  .top.open .menu-btn i:first-child { transform: rotate(45deg); }
  .top.open .menu-btn i:last-child { transform: rotate(-45deg); }
  .top .links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--rule);
    box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .top.open .links { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
  .top .links li + li { border-top: 1px solid var(--rule); }
  .top .links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 14px 0; color: var(--ink); font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; }
  .top .links a::after { display: none; }
  .top .links a small { display: block; grid-column: 1; margin-top: 4px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
  .top .links a[aria-current="page"] { color: var(--signal-ink); }
}
@media (max-width: 400px) { .brand span { display: none; } }

/* ── footer: the colophon ── */
footer { margin-top: var(--sec); padding-bottom: 28px; color: var(--ink-3); font-size: var(--t-s); }
footer .fgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px var(--col-gap); padding-top: 28px; border-top: 1px solid var(--ink); }
footer .colo p { max-width: 38ch; line-height: 1.6; }
footer .colo b { color: var(--ink); font-weight: 500; }
footer h2 { margin-bottom: 12px; font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
footer .foot { display: grid; gap: 8px; }
footer .foot a { color: var(--ink-2); text-decoration: none; width: fit-content; }
footer .foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--signal); }
footer .mark { grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 64px); padding-top: 0.06em; font-family: var(--serif); font-size: min(calc((100vw - 2 * var(--gutter)) * 0.46), calc(var(--max) * 0.46)); line-height: 0.8; letter-spacing: -0.03em; color: var(--ink); overflow: hidden; white-space: nowrap; user-select: none; }
footer .mark i { font-style: italic; color: var(--signal-ink); }
footer .base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 760px) { footer .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } footer .colo { grid-column: 1 / -1; } }

/* ── the waitlist coupon: a form cut from the paper, dashed like a coupon ── */
.coupon { position: relative; padding: clamp(20px, 2.4vw, 28px); background: var(--plane); border: 1px dashed var(--rule-2); }
.coupon .chead { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.join { max-width: 520px; }
.join .row { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); transition: border-color .2s ease; }
.join .row:focus-within { border-color: var(--signal); }
.join input[type="email"] {
  flex: 1; min-width: 0; height: 52px; padding: 0 2px; border: 0; background: transparent; outline: none;
  color: var(--ink); font: 400 1.125rem var(--sans);
}
.join input[type="email"]::placeholder { color: var(--ink-3); }
.join input[type="email"]:focus-visible { outline: none; }
.join .btn { height: 44px; align-self: center; margin-left: 10px; }
.join .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join .note { margin-top: 12px; font-size: 0.8125rem; color: var(--ink-3); }
.join .note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.join .note a:hover { color: var(--ink); }
.join .msg { margin-top: 10px; font-size: 0.9375rem; }
.join .msg:empty { display: none; }
.join .msg.err { color: var(--signal-ink); }
.join.done .row { display: none; }
.join .ok { display: none; align-items: center; gap: 14px; padding: 14px 0; border-block: 1px solid var(--rule); }
.join.done .ok { display: flex; }
.join .ok .tick { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--btn); }
.join .ok .tick svg { stroke: var(--on-signal); }
.join .ok b { font-weight: 600; }
.join .ok span { color: var(--ink-2); }
@media (max-width: 480px) {
  .join .row { flex-wrap: wrap; border-bottom: 0; }
  .join input[type="email"] { flex-basis: 100%; border-bottom: 1px solid var(--ink); }
  .join .row:focus-within input[type="email"] { border-color: var(--signal); }
  .join .btn { margin: 12px 0 0; width: 100%; height: 50px; }
}

/* ── figures: a screenshot set like a plate in the paper ── */
.plate { margin: 0; }
.plate .frame { position: relative; overflow: hidden; border-radius: 8px; background: var(--plane); box-shadow: 0 0 0 1px var(--rule), var(--shadow); }
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption, .cap { display: flex; gap: 10px; margin-top: 12px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; }
.plate figcaption .label, .cap .label { flex: none; }

/* ── the iPhone frame: the app sits between the status bar and the home indicator ── */
.dv { width: min(100%, 340px); container-type: inline-size; }
.device {
  position: relative; padding: 1.1cqw; border-radius: 15.1cqw;
  background: linear-gradient(135deg, #5c5c60, #2a2a2d 22%, #1b1b1d 50%, #38383b 78%, #5a5a5e);
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.75);
}
[data-theme="light"] .device { box-shadow: 0 50px 80px -44px rgba(70, 50, 30, 0.5); }
.device::before, .device::after { content: ''; position: absolute; width: 0.9cqw; border-radius: 1cqw; background: #333336; }
.device::before { left: -0.75cqw; top: 36cqw; height: 13cqw; box-shadow: 0 16cqw 0 #333336; }
.device::after { right: -0.75cqw; top: 46cqw; height: 21cqw; }
.bezel { padding: 2.4cqw; border-radius: 14cqw; background: #050505; }
.screen { position: relative; aspect-ratio: 440 / 956; border-radius: 11.6cqw; overflow: hidden; background: #121212; container-type: inline-size; }
[data-theme="light"] .screen { background: #f3f1ee; }
.screen .app { position: absolute; left: 0; top: 14.09cqw; width: 100%; height: auto; aspect-ratio: 440 / 860; }
.screen .sb { position: absolute; inset: 0 0 auto 0; height: 13.4cqw; display: flex; align-items: center; justify-content: space-between; color: #fff; }
[data-theme="light"] .screen .sb { color: #1f1d1b; }
[data-theme="light"] .screen .sb svg rect:not([fill="none"]), [data-theme="light"] .screen .sb svg circle { fill: #1f1d1b; }
[data-theme="light"] .screen .sb svg [fill="none"] { stroke: #1f1d1b; }
.screen .sb .t { width: 34%; padding-left: 4cqw; text-align: center; font: 600 3.9cqw/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -0.01em; }
.screen .sb .ic { width: 34%; padding-right: 4cqw; display: flex; justify-content: center; }
.screen .sb svg { width: 17.5cqw; height: auto; }
.screen .island { position: absolute; top: 2.5cqw; left: 50%; width: 28.6cqw; height: 8.4cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
.screen .hi { position: absolute; bottom: 1.9cqw; left: 50%; width: 31.8cqw; height: 1.2cqw; transform: translateX(-50%); border-radius: 99px; background: rgba(255, 255, 255, 0.86); }
[data-theme="light"] .screen .hi { background: rgba(31, 29, 27, 0.8); }

/* ── reveal on scroll: content settles into place once, never on a loop ── */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.in { opacity: 1; transform: none; }

@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 .rv { opacity: 1; transform: none; }
}
@media print { body::before, .top, footer .mark { display: none; } }