/* ---------- The faces: Onest and Literata from the site itself (assets/fonts, the app's own files, SIL OFL), latin and
   latin-ext, so the page asks no other server for anything before the visitor has chosen (Privacy policy: nothing
   reaches Google before Accept). The system's tokens read --font-onest and --font-literata; until a face has loaded
   the text stands on Arial and Georgia with the faces' metrics, as in the app (apps/scout/src/app/fonts/fonts.css),
   so nothing moves when it arrives ---------- */
:root { --font-onest: 'Onest', 'Onest Fallback'; --font-literata: 'Literata', 'Literata Fallback'; }
@font-face { font-family: 'Onest'; src: url('../assets/fonts/onest-latin-wght-normal.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; 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; }
@font-face { font-family: 'Onest'; src: url('../assets/fonts/onest-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; 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; }
@font-face { font-family: 'Literata'; src: url('../assets/fonts/literata-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; 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; }
@font-face { font-family: 'Literata'; src: url('../assets/fonts/literata-latin-ext-opsz-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; 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; }
@font-face { font-family: 'Onest Fallback'; src: local('Arial'); ascent-override: 92.2%; descent-override: 28.99%; line-gap-override: 0%; size-adjust: 105.2%; }
@font-face { font-family: 'Literata Fallback'; src: local('Georgia'); ascent-override: 108.4%; descent-override: 28.37%; line-gap-override: 0%; size-adjust: 108.58%; }

/* ==========================================================================
   LANDING v8 — the landing's own layer on the product's design system 0.16.0 (chimera.css). Colours, faces, lines and
   corners come from the system's tokens only; what is the landing's own is its larger display scale, the container,
   the screen and the parts every screen shares: the header, the footer, the consent banner and the sample email.
   A screen's own CSS lives in parts/css/NN-name.css with classes prefixed by its number (s07-…). parts/FOUNDATION.md
   says which class to use for what.
   ========================================================================== */

/* ---------- Size: on a large screen the page grows, as the product grows at its sizes M and L ----------
   Every size of the landing is in rem (1rem = 16px at the base size), as the system's are, so the root's font size
   grows the whole page: type, gaps, the product's window and its pictures. From a window of about 2276 × 1172 the root
   grows with it, up to 112.5% (18px, the product's size L) at 2560 × 1318, a 27-inch screen (owner, 30 Oct: the page
   should not stay a laptop's page in the middle of a big screen; then, the same day: 125% made the menu, the lead and
   the buttons too large). Both sides must allow it, so a wide but low window keeps the base size and How it works still
   fits under the header. Breakpoints (@media) stay in px: they are the
   window's own width. A script that keeps its own px multiplies them by the root's size over 16. */
html { font-size: clamp(100%, min(0.703125vw, 1.3657vh), 112.5%); }

/* ---------- Scale: the landing's display sizes on the system's faces, stepped at three widths ---------- */
:root {
  --hdr-h: 4rem;
  --site-cap: 90rem;
  --gutter: clamp(1rem, 2.6vw, 4rem);
  --site-display: 3.5rem; --site-lh-display: 3.875rem;
  --site-h2: 2.75rem;      --site-lh-h2: 3.125rem;
  --site-h3: 1.25rem;      --site-lh-h3: 1.75rem;
  --site-lead: 1.3125rem;    --site-lh-lead: 2rem;
  --site-prose: 1.0625rem;   --site-lh-prose: 1.75rem;
  --site-num: 6rem;     --site-lh-num: 6rem;
  --site-num-sm: 3.5rem;  --site-lh-num-sm: 3.75rem;
  --site-tight: -0.01em;
  --screen-pad: clamp(3rem, 7vh, 5.5rem);
  --head-gap: 4rem;               /* a screen's head to its body, and one part of a screen to the next under it */
  --col-gap: 6rem;                /* two columns side by side */
}
/* Spacing has three steps and nothing in between (owner, 30 Oct: gaps fitted to a screen or a window read as holes):
   --screen-pad between screens, --head-gap between a screen's parts (its head and its body, parts one under another),
   --col-gap between columns side by side; inside a part, the system's --space-* scale. A screen sets none of its own.
   They step down with the window, the same everywhere. */
@media (max-width: 1099px) { :root { --col-gap: 3rem; } }   /* --screen-pad and --head-gap step with the type, below */
@media (max-width: 1099px) {
  :root { --site-display: 3rem; --site-lh-display: 3.375rem; --site-h2: 2.125rem; --site-lh-h2: 2.5rem; --site-lead: 1.1875rem; --site-lh-lead: 1.8125rem; --site-prose: 1rem; --site-lh-prose: 1.625rem; --site-num: 4.5rem; --site-lh-num: 4.75rem; --site-num-sm: 2.75rem; --site-lh-num-sm: 3rem; --head-gap: 3rem; }
}
@media (max-width: 639px) {
  :root { --hdr-h: 3.5rem; --site-display: 2.25rem; --site-lh-display: 2.625rem; --site-h2: 1.75rem; --site-lh-h2: 2.125rem; --site-h3: 1.125rem; --site-lh-h3: 1.625rem; --site-lead: 1.0625rem; --site-lh-lead: 1.625rem; --site-prose: 0.9375rem; --site-lh-prose: 1.5rem; --site-num: 3.5rem; --site-lh-num: 3.75rem; --site-num-sm: 2.25rem; --site-lh-num-sm: 2.5rem; --screen-pad: 4rem; --head-gap: 2rem; }
}

/* The hero's field of dots: the ink and the live green as rgb triples, for the canvas to mix with alpha */
:root, [data-theme="light"] { --dot: 42, 38, 35; --dot-live: 47, 110, 88; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dot: 247, 244, 239; --dot-live: 184, 227, 201; } }
[data-theme="dark"] { --dot: 247, 244, 239; --dot-live: 184, 227, 201; }

/* ---------- Page ---------- */
html { scroll-padding-top: calc(var(--hdr-h) + var(--hairline)); scroll-behavior: smooth; }   /* the header and its line: a link lands its screen under both */
body.site { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--text-body)/var(--leading-body) var(--font-ui); }
:where(.site) p { margin: 0; text-wrap: pretty; }   /* :where, so any class sets a paragraph's margin */
:where(.site) :is(h1, h2, h3, h4) { margin: 0; font-weight: 500; }
.site-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: 100%; padding-inline: max(var(--gutter), calc((100% - var(--site-cap)) / 2)); }

/* ---------- Type ---------- */
.site-display { font: 500 var(--site-display)/var(--site-lh-display) var(--font-ui); letter-spacing: var(--site-tight); color: var(--ink); text-wrap: balance; }
.site-h2 { max-width: 22em; font: 500 var(--site-h2)/var(--site-lh-h2) var(--font-ui); letter-spacing: var(--site-tight); color: var(--ink); text-wrap: balance; }
.site-h3 { font: 500 var(--site-h3)/var(--site-lh-h3) var(--font-ui); color: var(--ink); text-wrap: balance; }
.site-lead { max-width: 34em; font: 400 var(--site-lead)/var(--site-lh-lead) var(--font-ui); color: var(--ink); }
.site-prose { font: 400 var(--site-prose)/var(--site-lh-prose) var(--font-ui); color: var(--ink); }
.site-muted { color: var(--ink-muted); }
/* A headline's turn: its second sentence in the page's colour, in the same face and weight */
.site-turn { display: inline-block; color: var(--accent); }   /* a heading too long for one line breaks before its turn, not inside it (owner, 31 Oct: "lighter / than an enterprise platform") */
.site-h2 + .site-lead { margin-top: 1.25rem; }
.site-h3 + :is(.site-prose, p) { margin-top: 0.625rem; }

/* ---------- Colour: the page's one colour beside ink is the system's ink blue (owner's pick, 29 Oct) ----------
   The same blue as the primary button, in three places: a headline's turn (.site-turn, above), the marked faces of a
   drawing and the month's bars in 08. A drawing takes it with the system's own modifier, .ch-thumb.is-accent (design
   system 0.9.0: --drawing-mark-accent-1…3, the mark ladder's lightness at the accent's hue), so the page holds no
   colour of its own. Everything else stays ink and stone; the live green of the dot and of the hero's field is the
   agent's. */

/* ---------- Screen: one portion of the story ---------- */
/* A screen is as tall as its content, with --screen-pad above and below, so two screens are parted by the same air
   whatever their length (owner's note, 28 Oct: a short screen centred in a window-tall box left too much air); on a
   landscape window it is one window tall instead, its air held between 2.5rem and 14rem (owner, 1 Nov; .is-fit). Every
   screen stands on the page's canvas, How it works alone on paper (owner, 29 Oct, a trial): screens are parted by air
   and never by a line (owner, 29 Oct: content is not parted by lines). */
.screen { position: relative; display: flex; flex-direction: column; padding-block: var(--screen-pad); overflow: clip; }
.screen > .container { position: relative; z-index: 1; }
/* A screen as one window (owner, 1 Nov; base.js, A screen is one window): on a landscape window a screen after the hero
   takes the air that makes it the window's height under the header, 2.5rem to 14rem over and under its content, so one
   screen is in view at rest; a push glides to the next screen whole (the tour's glide, page-wide). A screen that does not fit, a portrait
   window and a phone keep --screen-pad. */
.screen.is-fit { padding-block: var(--fit-pad); }
/* the last screen: its air under the questions a least height, so an opened answer takes it before the screen grows */
.screen.is-fit-last { padding-bottom: 0; min-height: var(--fit-h); }
.screen-head { max-width: 56.25rem; margin-inline: auto; text-align: center; }
.screen-head :is(.site-h2, .site-lead) { margin-inline: auto; }
/* a heading that stands in a column beside the screen's body keeps to that column's start */
:is(.split, .s11-grid) .screen-head, :is(.split, .s11-grid) .screen-head :is(.site-h2, .site-lead) { margin-inline: 0; text-align: start; }
.screen-head + * { margin-top: var(--head-gap); }

/* ---------- Large controls: the landing's calls to action, on the system's button and field ---------- */
.ch-btn.site-btn-lg { min-height: 3.25rem; padding-inline: 1.5rem; font-size: 1.0625rem; line-height: 1.5rem; }
.ch-link.site-link-lg { min-height: 2.75rem; font-size: 1.0625rem; line-height: 1.5rem; }
.ch-input.site-input-lg { min-height: 3.25rem; padding-inline: 1rem; font-size: 1.0625rem; line-height: 1.5rem; }
@media (max-width: 639px) { .ch-btn.site-btn-lg.is-full { width: 100%; } }

/* ---------- Header: the mark and the word left, links centred, one quiet button right ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); border-bottom: var(--hairline) solid var(--line); }
/* Over a screen with a ground of its own the header takes that ground and palette (base.js). The ground follows the
   page as the screen comes in, with no fade, or it would trail it; the words and the button change with a short one,
   none under reduced motion */
.site-header { transition: border-color .15s var(--ease); }
.site-header :is(.site-brand, .site-nav a) { transition: color .15s var(--ease); }
.site-header .site-header-cta { transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease); }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header :is(.site-brand, .site-nav a, .site-header-cta) { transition: none; } }
.site-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; height: var(--hdr-h); }
.site-brand { display: inline-flex; align-items: center; gap: 0.375rem; justify-self: start; font: 500 1.1875rem/1.5rem var(--font-ui); color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-brand .ch-icon { width: 1.875rem; height: 1.875rem; }   /* the mark fills 70% of its box: 21px drawn */
.site-nav { display: flex; align-items: center; gap: 2.25rem; font: 400 0.9375rem/1.375rem var(--font-ui); }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.ch-btn.site-header-cta { justify-self: end; min-height: 2.5rem; padding-inline: 1rem; font-size: 0.9375rem; line-height: 1.375rem; }
@media (max-width: 1099px) { .site-nav { gap: 1.5rem; } }
@media (max-width: 759px) { .site-header-inner { grid-template-columns: minmax(0, 1fr) auto; } .site-nav { display: none; } }
/* touch: every control at least 44px tall */
@media (max-width: 899px) {
  .ch-btn.site-header-cta, .consent-actions .ch-btn { min-height: 2.75rem; }
  .site-footer-mail, .site-footer-bottom :is(a, .site-footer-link) { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* ---------- Reading field: what the agent reads, as faint page text behind a screen ----------
   Built by base.js into any [data-pattern="read"]; a few phrases light up in turn, as if being read. In the
   system's face (no monospace), the ink at a few percent, so it stays a texture and never reads as words. Static
   under reduced motion. */
.pattern-read { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none;
  font: 400 0.8125rem/1.375rem var(--font-ui); white-space: pre;
  color: color-mix(in srgb, var(--ink) var(--pattern-rest, 8%), transparent);
  -webkit-mask-image: var(--pattern-mask, linear-gradient(to right, transparent 0, transparent 35%, var(--ink) 75%));
          mask-image: var(--pattern-mask, linear-gradient(to right, transparent 0, transparent 35%, var(--ink) 75%)); }
.pattern-read b { font-weight: 400; transition: color 1.6s ease; }
.pattern-read b.is-lit { color: color-mix(in srgb, var(--ink) var(--pattern-lit, 30%), transparent); }
.pattern-read.is-full { --pattern-mask: linear-gradient(to bottom, var(--ink) 0, var(--ink) 100%); }
.pattern-read.is-centre { --pattern-mask: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 0, transparent 40%, var(--ink) 90%); }
.screen[data-pattern] > .container { pointer-events: auto; }

/* ---------- Big number: the number first, what it means under it, parted by air ---------- */
.nums { --nums-cols: 3; display: grid; grid-template-columns: repeat(var(--nums-cols), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.num { min-width: 0; padding: 2rem 2rem 2.25rem 0; }
.num + .num { padding-left: 2rem; }
.num-value { display: block; font: 500 var(--site-num)/var(--site-lh-num) var(--font-ui); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-value .unit { margin-left: 0.5rem; font-size: calc(var(--site-num) * .34); line-height: 1; letter-spacing: 0; color: var(--ink-muted); }
.num-label { display: block; margin-top: 0.875rem; max-width: 18em; font: 400 var(--site-prose)/var(--site-lh-prose) var(--font-ui); color: var(--ink); }
.num-label span { color: var(--ink-muted); }
.num.is-sm .num-value { font-size: var(--site-num-sm); line-height: var(--site-lh-num-sm); }
.nums.is-2 { --nums-cols: 2; }
.nums.is-4 { --nums-cols: 4; }
.nums:not(.is-2):not(.is-4) > .num:nth-child(3n + 1), .nums.is-2 > .num:nth-child(2n + 1), .nums.is-4 > .num:nth-child(4n + 1) { padding-left: 0; }
@media (max-width: 899px) {
  .nums, .nums.is-4 { --nums-cols: 2; }
  .nums:not(.is-2) > .num:nth-child(3n + 1), .nums.is-4 > .num:nth-child(4n + 1) { padding-left: 2rem; }
  .nums > .num:nth-child(2n + 1) { padding-left: 0 !important; }
}
@media (max-width: 479px) { .nums, .nums.is-2, .nums.is-4 { --nums-cols: 1; } .nums > .num { padding-left: 0 !important; } }

/* ---------- A finding's drawing: the system's isometric tile (.ch-thumb) at a landing width ---------- */
.site-drawing { display: block; width: 100%; max-width: var(--drawing-w, 15rem); }
.site-drawing > .ch-thumb:not(.is-shelf) { width: 100%; }
.site-drawing.is-sm { --drawing-w: 8.25rem; }
.site-drawing.is-md { --drawing-w: 12.5rem; }
.site-drawing.is-lg { --drawing-w: 22.5rem; }
.site-drawing.is-xl { --drawing-w: 32.5rem; }
/* Off the plate: the system's own form, `svg.ch-thumb.is-shelf` (DS 0.7.0), the figure alone on the canvas, cut to its box
   (the viewBox and --fw/--fh from the system's thumbs.json → boxes), drawn at --thumb-k px a unit: a screen sets it for a
   narrower column. The landing adds nothing of its own. */

/* ---------- Split: words beside a picture ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--head-gap); align-items: center; }
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--col-gap); }
  .split.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.is-flip > :first-child { order: 2; }
}

/* ---------- Capture: a piece of the product drawn with the system's own markup, on a plate of paper ----------
   Paper is the system's document; the plate is framed by a hairline and set on the page's canvas, so the
   product's parts inside it (ch-plate, ch-list, ch-finding…) read as they do in the product. */
.capture-figure { min-width: 0; margin: 0; container: capture / inline-size; }
.capture { position: relative; min-width: 0; padding: 1.75rem 2rem 2rem; background: var(--paper); color: var(--ink); border: var(--hairline) solid var(--line); border-radius: var(--radius); overflow: hidden; pointer-events: none; text-align: left; }
.capture-figure > figcaption { margin-top: 0.75rem; font: 400 var(--text-meta)/var(--leading-meta) var(--font-ui); color: var(--ink-faint); }
@container capture (max-width: 30rem) { .capture { padding: 1.125rem 1rem 1.375rem; } }

/* ---------- Form on the page: the system's fields at the landing's size ---------- */
.site-form { display: grid; gap: 1rem; max-width: 35rem; }
.site-form .ch-fields--grow > .ch-btn { flex: none; }

/* ---------- Footer: the page's end on the dark theme (data-theme="dark" in both themes; owner, 1 Nov). No menu while
   the site is one landing: the brand and its line at the left, how to reach us at the right, under a hairline who we
   are and the documents ---------- */
.site-footer { background: var(--canvas); color: var(--ink); border-top: var(--hairline) solid var(--line); }   /* the line parts it from a page that is dark too */
.site-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-8) var(--space-12); padding-block: var(--space-18) var(--space-12); }
.site-footer-brand { display: grid; gap: var(--space-3); justify-items: start; }
.site-footer-tagline { font: 400 var(--site-prose)/var(--site-lh-prose) var(--font-ui); color: var(--ink-muted); }
.site-footer-reach { display: grid; gap: var(--space-4); justify-items: end; }
.site-footer-mail { font: 400 var(--site-prose)/var(--site-lh-prose) var(--font-ui); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.site-footer-mail:hover { text-decoration-color: currentColor; }
.site-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-social .ch-btn--icon { width: 2.5rem; min-height: 2.5rem; }
.site-social .ch-icon { width: 1.25rem; height: 1.25rem; }
.site-footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-8); padding-block: var(--space-6) var(--space-8); border-top: var(--hairline) solid var(--line); font: 400 var(--text-ui)/var(--leading-ui) var(--font-ui); color: var(--ink-faint); }
.site-footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.site-footer-bottom :is(a, .site-footer-link) { color: var(--ink-faint); text-decoration: none; }
.site-footer-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }   /* Cookie settings: a button that reads as the links beside it */
.site-footer-link[hidden], .consent[hidden] { display: none; }
.site-footer-bottom :is(a, .site-footer-link):is(:hover) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
@media (max-width: 899px) {   /* one column: the brand, then how to reach us under it; the icons at 44px for touch */
  .site-footer-top { flex-direction: column; }
  .site-footer-reach { justify-items: start; }
  .site-social .ch-btn--icon { width: 2.75rem; min-height: 2.75rem; }
  .site-footer-bottom { padding-block: var(--space-2) var(--space-6); }
}
@media (max-width: 559px) {
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-social { display: grid; grid-template-columns: repeat(4, max-content); }   /* two rows of four, never one alone */
}

/* ---------- Consent banner (spec §9): paper at the window's edge, two equal buttons ---------- */
.consent { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; background: var(--paper); color: var(--ink); border-top: var(--hairline) solid var(--line-control); }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 0.875rem; }
.consent-text { font: 400 0.9375rem/1.375rem var(--font-ui); }
.consent-text .ch-link { font: inherit; }
.consent-actions { flex-wrap: nowrap; }
.consent-actions .ch-btn { min-width: 7rem; }
@media (max-width: 639px) { .consent-inner { flex-wrap: nowrap; gap: 0.75rem; padding-block: 0.625rem; } .consent-actions .ch-btn { min-width: 0; } }


/* ---------- The waitlist window: the system's form modal ---------- */
.waitlist .ch-modal__body { display: grid; gap: var(--space-4); }
.waitlist .ch-field__error[hidden], .waitlist .ch-banner[hidden] { display: none; }
.waitlist .w-say { outline: none; font: 400 var(--text-body)/var(--leading-body) var(--font-ui); color: var(--ink); }
.waitlist .w-say b { font-weight: 500; overflow-wrap: anywhere; }
.waitlist-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* only bots fill it */
html.is-modal { overflow: hidden; }   /* the page under the window stays put */
@media (max-width: 899px) { .waitlist [data-close-waitlist].ch-btn--icon { width: 2.75rem; min-height: 2.75rem; } }

/* ---------- Arrival: a screen's parts rise into place once, as it enters ---------- */
.rise { opacity: 0; transform: translateY(1rem); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }

/* ---------- Reduced motion: nothing moves; the system turns its own animation off too ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .pattern-read b { transition: none; }
}