@import url('/assets/fonts/fonts.css');

/* ============================================================================
   DivisionOS website.

   Built on the Cassia Audio design system (references/cassiaaudio.com-template)
   — light base, dark nav, two-tone headlines, pill buttons, a stats strip and
   dark showcase bands. Cassia is React + Vite; this is plain HTML and CSS, so
   the vocabulary is ported into real classes instead of inline style objects.

   One deliberate difference: Cassia sets headlines at font-weight 800. The Inter
   we self-host is a variable font with a 300–700 range, so 800 would clamp and
   render no heavier than 700. Headlines top out at 700 here — a real weight in
   a real file, rather than a number the browser quietly ignores.
   ============================================================================ */

:root {
  /* Dark base — the greeter's own palette, so the site and the surfaces it
     shows are lit the same way. Values from the login mockup's :root. */
  --bg: #0A0B0E;          /* ground  — the page */
  --bg-alt: #14161B;      /* panel   — banded sections */
  --bg-card: #14161B;
  --bg-card-hover: #1B1E25; /* raised */

  /* Deeper bands — where a showcase visual sits below the page */
  --bg-dark: #06070A;
  --bg-dark-card: #14161B;

  --border: #272B34;      /* line */
  --border-dark: #1B1E25;

  /* Accent — the OS's own default accent, used sparingly */
  --accent: #3584e4;
  --accent-dim: rgba(53, 132, 228, 0.10);

  --text: #EAECF1;
  --text-muted: #878E9C;  /* dim */
  --text-faint: #5B6270;  /* faint */

  --text-on-dark: #EAECF1;
  --text-on-dark-muted: #878E9C;

  color-scheme: dark;

  --col: 1412px;   /* the hero's width: 1380 plus its 16px band either side */
  --gutter: calc(16px + clamp(16px, 3vw, 40px));   /* so every edge lines up with the hero's words */
  font-size: 16px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The footer always sits at the bottom of the window, however short the page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Flex items with auto margins would shrink to their content; keep each one full width
   (a .section still caps itself at --col and centres). */
body > * { width: 100%; flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Entrance ───────────────────────────────────────────────────────────────*/
@keyframes fadeUp    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }

.fade-up    { animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fade-right { animation: fadeRight 1.15s cubic-bezier(0.22, 1, 0.36, 1) both; }
.d1 { animation-delay: .10s; } .d2 { animation-delay: .22s; } .d3 { animation-delay: .34s; }
.d4 { animation-delay: .46s; } .d5 { animation-delay: .58s; } .d6 { animation-delay: .70s; }

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

/* ── Section — the one measure everything sits inside ───────────────────────*/
.section {
  max-width: var(--col);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) var(--gutter);
}
.section--tight { padding-top: 36px; padding-bottom: 36px; }
.section--tall  { padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(80px, 12vh, 120px); }

/* ── Bands ──────────────────────────────────────────────────────────────────*/
.band--alt   { background: var(--bg-alt); }
.band--ruled { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band--dark  { background: var(--bg-dark); color: var(--text-on-dark); }
.band--dark .muted { color: var(--text-on-dark-muted); }

/* ── Nav — dark bar, active link is a filled chip ───────────────────────────*/
.nav { position: sticky; top: 0; z-index: 100; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.nav__inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__mark { width: 34px; height: 34px; }
.nav__name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--text); }

.nav__links { display: flex; gap: 2px; }
.nav__links a {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color .15s, background .15s;
}
.nav__links a:hover { color: var(--text); }
.nav__links a.is-active { color: var(--text); background: rgba(255, 255, 255, 0.08); }

.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 8px;
}
.nav__drawer {
  display: none;
  background: var(--bg-alt);
  border-top: 1px solid #222;
  padding: 12px 24px 20px;
  flex-direction: column;
  gap: 4px;
}
.nav__drawer.is-open { display: flex; }
.nav__drawer a { padding: 11px 12px; border-radius: 6px; font-size: 17px; font-weight: 500; color: var(--text-muted); }
.nav__drawer a.is-active { color: var(--text); background: rgba(255, 255, 255, 0.08); }

/* ── Text roles ─────────────────────────────────────────────────────────────*/
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge--dark { background: rgba(255, 255, 255, 0.08); color: #ccc; }
.badge--alpha { background: rgba(53, 132, 228, 0.16); color: #8ab8ff; }

.h1 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
}
.h2 {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.h3 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
/* The second line of a two-tone headline. */
.soft { color: var(--text-muted); }
.band--dark .soft { color: var(--text-on-dark-muted); }

.lead { font-size: 18px; color: var(--text-muted); line-height: 1.65; }
.lead--big { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.7; }

/* The home page's name, above its Download and How it works buttons. */
.home-title { text-align: center; font-size: clamp(40px, 6vw, 72px); margin-bottom: 28px; }

/* ── Buttons ────────────────────────────────────────────────────────────────*/
.buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.buttons--center { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 16px; height: 16px; }

/* On a dark page the solid button is the light one — it inverts. */
.btn--solid { background: var(--text); color: var(--bg); font-weight: 700; }
.btn--solid:hover { background: #ffffff; }

.btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--text-faint); color: var(--text); }

.band--dark .btn--solid { background: var(--text); color: var(--bg); }
.band--dark .btn--solid:hover { background: #ffffff; }
.band--dark .btn--ghost { color: var(--text-on-dark-muted); border-color: var(--border-dark); }
.band--dark .btn--ghost:hover { color: var(--text-on-dark); border-color: #666; }

/* A quiet inline "see more" link with an arrow. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .15s, opacity .15s;
}
.more:hover { color: var(--text); }
.more svg { width: 14px; height: 14px; }
.band--dark .more { color: var(--text-on-dark); }
.band--dark .more:hover { opacity: 0.7; }

/* ── Hero ───────────────────────────────────────────────────────────────────*/
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Screenshot placeholders ────────────────────────────────────────────────
   Solid blocks standing in for real captures. Every one is labelled with the
   shot that belongs there, so staging the photography is a checklist rather
   than a guess. Swapping one for an <img> is the only change needed. */
.shot {
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
}
.shot--hero { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55); }
.shot--tall { aspect-ratio: 4 / 5; }
.shot--wide { aspect-ratio: 21 / 9; }
.shot__label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.shot__note { font-size: 12px; }
.shot svg { width: 26px; height: 26px; opacity: 0.35; }

.band--dark .shot {
  background: var(--bg-dark-card);
  border-color: var(--border-dark);
  color: #666;
}
.band--dark .shot__label { color: var(--text-muted); }

/* A real capture (assets/img/shots/), filling its frame. */
.shot--img { padding: 0; overflow: hidden; border-color: transparent; background: #000; }
.band--dark .shot--img { background: #000; border-color: transparent; }
.shot--img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── The header: a tablet showing the desktop ────────────────────────────────
   A tablet built like the real thing — a thin aluminium band, a black glass bezel,
   and the screen — every corner concentric with the next. Its screen is the
   DivisionOS desktop at the real desktop's proportions: everything on it is sized in
   cqw against a 1920px-wide screen (1cqw = 19.2 design px), the width the shots were
   taken at, so a 1280px window is two thirds of the screen as it is on the desktop.
   The tablet's own sizes are in its cqw (a hundredth of the tablet's width).

   The radii, inside out, all from Carbon (themes/ink/theme.css, parts/panels.css):
     a panel's face   21  = 24 − its 3px inset, fully round
     a panel          24  = the window radius, = 32 − the 8px it sits from the edge
     the screen       32  (--division-screen-radius)
     the glass        the screen's + the bezel        the band  the glass's + the band  */
.device-band { padding: clamp(72px, 12vh, 140px) 16px clamp(72px, 12vh, 140px); }
.tablet {
  container-type: inline-size;
  position: relative; width: min(1400px, 94%); margin: 0 auto;
}
/* The body: the aluminium band is the border, the black bezel the padding, so the
   bezel's inner corner is the band's less the band — concentric by construction.
   (Sized here, not on .tablet: a container can't measure itself in its own cqw.) */
.tablet__glass {
  --band: 0.15cqw; --bezel: 1cqw;
  --screen-r: calc((100cqw - 2 * (var(--band) + var(--bezel))) * 32 / 1920);
  position: relative; padding: var(--bezel);
  border: var(--band) solid transparent;
  border-radius: calc(var(--screen-r) + var(--bezel) + var(--band));
  background:
    radial-gradient(120% 140% at 30% 0%, #1b1c1f 0%, #070708 55%, #000 100%) padding-box,
    linear-gradient(180deg, #d9dce1 0%, #9ea3ab 18%, #6d727a 52%, #8b9098 85%, #c4c8ce 100%) border-box;
  box-shadow: 0 3cqw 6cqw -1cqw rgba(0, 0, 0, 0.55), 0 1cqw 2cqw rgba(0, 0, 0, 0.35);
}
/* the front camera, centred in the long top bezel, as on a tablet held landscape */
.tablet__glass::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--bezel) / 2); width: 0.5cqw; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #34405a 0 18%, #0c0f15 45%, #000 70%);
  box-shadow: 0 0 0 0.08cqw #15161a;
}
.tablet__screen {
  container-type: inline-size;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--screen-r);   /* 32 of 1920, worked out on the glass */
  background: #c9d3e6 url("/assets/img/winter-mountain.jpg") center / cover no-repeat;
}
/* the glass over the screen: a faint sheen, under nothing a person touches */
.tablet__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%);
}

/* ── The stage ───────────────────────────────────────────────────────────────
   The focused window in front, 1440 × 900 at (240, 62) on the 1920 × 1080 screen —
   centred in the room above the panels, and where the shots were taken, so what
   shows through its glass is the tablet's own wallpaper to the pixel. The programs
   before it stand behind it at the same full size, set back — smaller and dimmer —
   one to the left and one to the right, peeking past its edges. A window is never
   squeezed, so every program shows the layout it really has at full size. It starts
   on the empty desktop; a program opens in front, grown up out of the panels; when
   another is brought forward only the windows concerned move — the front one steps
   back into the free side, or the side of the one used longest ago, which closes.
   In cqw against the 1920 × 1080 screen (1cqw = 19.2 design px). */
.stage { position: absolute; inset: 0; }
.stage__screen { position: absolute; inset: 0; }
.stage__window {
  position: absolute; margin: 0; z-index: 1;
  left: 12.5cqw; top: 3.2292cqw; width: 75cqw; height: 46.875cqw;
  /* closed: shrunk down into the middle of the panels */
  opacity: 0; transform: translateY(30cqw) scale(.3); transform-origin: 50% 50%; pointer-events: none;
  transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1), opacity .45s ease, filter .65s ease;
}
/* every window keeps Carbon's 24px corner */
.stage__window .shot {
  width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border: 0; background: transparent;
  border-radius: 1.25cqw; box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.45);
}
.stage__window[data-pos="focus"] { z-index: 3; opacity: 1; transform: none; pointer-events: auto; }
.stage__window[data-pos="back-left"], .stage__window[data-pos="back-right"] {
  z-index: 2; opacity: .55; pointer-events: auto; cursor: pointer; filter: saturate(.8);
}
.stage__window[data-pos="back-left"]  { transform: translateX(-21cqw) scale(.72); }
.stage__window[data-pos="back-right"] { transform: translateX(21cqw) scale(.72); }
.stage__window[data-pos="back-left"]:hover, .stage__window[data-pos="back-right"]:hover { opacity: .8; }
.stage button:focus-visible, .stage a:focus-visible { outline: 2px solid #3584e4; outline-offset: 2px; }

/* ── The lock screen ─────────────────────────────────────────────────────────
   Carbon's (themes/parts/lockscreen.css, with view.rs for the tree), in cqw against the
   1920 screen: light ink (the theme's text) on dark glass (its depth at 55%) over the
   login wallpaper, the black mountain. Phases, as the real one moves through them:
   "first" (the clock), "sign" (one account, so the sign-in straight away; it rises in,
   240ms), "busy" (the password handed over: the bar goes), then "open" (the lock lifts
   off and the desktop is underneath). While it is up the panels are not there. */
.ls {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  color: #f6f6f6; font-family: "Inter", system-ui, sans-serif;
  background: #0a0b0d url("/assets/img/mountain-landscape.jpg") center / cover no-repeat;
  transition: opacity .7s ease, transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls.open { opacity: 0; transform: translateY(-4cqw); pointer-events: none; }
.ls svg { display: block; }
.ls-chrome { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
.ls-top { display: flex; align-items: flex-start; padding: 0.8333cqw 1.0417cqw 0; }
.ls-tray-left, .ls-tray-right { flex: 1 1 0; display: flex; min-width: 0; }
.ls-tray-right { justify-content: flex-end; }
.ls-chip {
  display: flex; align-items: center; height: 1.875cqw; padding: 0 0.8333cqw; gap: 0.625cqw;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(246, 246, 246, 0.14); border-radius: 0.9375cqw;
}
.ls-controls { gap: 0.9375cqw; }
.ls-batt-pct { font-size: 0.7292cqw; color: rgba(246, 246, 246, 0.9); }
.ls-battery { width: 1.0417cqw; height: 1.0417cqw; color: rgba(246, 246, 246, 0.9); }
.ls-wifi, .ls-tray-icon { width: 0.9896cqw; height: 0.9896cqw; color: rgba(246, 246, 246, 0.9); }
.ls-brand { display: flex; gap: 0.052cqw; padding-top: 0.5208cqw; }
.ls-brand-a, .ls-brand-b { font-size: 0.677cqw; letter-spacing: 0.156cqw; }
.ls-brand-a { font-weight: 700; color: rgba(246, 246, 246, 0.72); }
.ls-brand-b { color: rgba(246, 246, 246, 0.45); }

.ls-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(3cqw); pointer-events: none;
  transition: opacity .24s ease, transform .24s cubic-bezier(0.22, 1, 0.36, 1);
}
.ls.phase-first .ls-first, .ls.phase-sign .ls-signin, .ls.busy .ls-signin { opacity: 1; transform: none; }
/* the clock dead centre */
.ls-time { display: flex; flex-direction: column; align-items: center; }
.ls-clock { display: flex; align-items: center; gap: 0.104cqw; }
.ls-clock-h, .ls-clock-m { font-size: 6.6667cqw; line-height: 1; }
.ls-clock-colon { font-size: 3.4896cqw; color: rgba(246, 246, 246, 0.72); }
.ls-date { padding-top: 1.1458cqw; font-size: 1.7708cqw; color: rgba(246, 246, 246, 0.96); }
.ls-weather { display: flex; align-items: center; gap: 0.573cqw; padding-top: 0.9375cqw; }
.ls-wx-icon { width: 1.3542cqw; height: 1.3542cqw; color: rgba(246, 246, 246, 0.86); }
.ls-wx-temp, .ls-wx-dot, .ls-wx-desc { font-size: 1.1458cqw; }
.ls-wx-temp { color: rgba(246, 246, 246, 0.86); }
.ls-wx-dot { color: rgba(246, 246, 246, 0.45); }
.ls-wx-desc { color: rgba(246, 246, 246, 0.74); }
/* sign in: face, name, and one bar */
.ls-sign { display: flex; flex-direction: column; align-items: center; gap: 1.0417cqw; }
.ls-face.big {
  display: flex; width: 8.3333cqw; height: 8.3333cqw; border-radius: 50%;
  border: 1px solid rgba(246, 246, 246, 0.3);
}
.ls-face-empty { flex-grow: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(246, 246, 246, 0.16); }
.ls-face-glyph { width: 4.0104cqw; height: 4.0104cqw; color: rgba(246, 246, 246, 0.66); }
.ls-sign-name { font-size: 1.0938cqw; color: rgba(246, 246, 246, 0.96); }
.ls-bar {
  display: flex; align-items: center; width: 18.2292cqw; height: 2.1875cqw; padding: 0 0.2083cqw; gap: 0.4167cqw;
  background: rgba(246, 246, 246, 0.17); border: 1px solid rgba(246, 246, 246, 0.4); border-radius: 1.0938cqw;
  transition: background .3s ease, border-color .3s ease, opacity .3s ease;
}
.ls-back { display: flex; align-items: center; justify-content: center; width: 1.6667cqw; height: 1.6667cqw; flex-shrink: 0; border-radius: 50%; background: rgba(246, 246, 246, 0.26); }
.ls-back-icon { width: 1.0417cqw; height: 1.0417cqw; }
.ls-field { flex-grow: 1; font-size: 0.7813cqw; letter-spacing: 0.15cqw; white-space: nowrap; overflow: hidden; }
.ls-field::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 0.1cqw; vertical-align: -0.15em; background: #f6f6f6; animation: ls-caret 1s steps(1) infinite; }
.ls-reveal { display: flex; align-items: center; justify-content: center; width: 1.7708cqw; height: 1.6667cqw; flex-shrink: 0; color: rgba(246, 246, 246, 0.62); }
.ls-reveal-icon { width: 0.7292cqw; height: 0.7292cqw; }
/* the password is handed over: the bar is finished, and goes */
.ls.busy .ls-bar { background: transparent; border-color: transparent; }
.ls.busy .ls-bar > * { opacity: 0; transition: opacity .25s ease; }
.ls-bottom { position: absolute; bottom: 1.875cqw; left: 0; right: 0; display: flex; justify-content: center; }
.ls-handle { display: flex; flex-direction: column; align-items: center; gap: 0.4167cqw; color: rgba(246, 246, 246, 0.55); }
.ls-grip { width: 2.8125cqw; height: 0.2083cqw; border-radius: 0.104cqw; background: rgba(246, 246, 246, 0.34); }
.ls-handle-icon { width: 1.1458cqw; height: 1.1458cqw; }
@keyframes ls-caret { 50% { opacity: 0; } }
/* while the lock is up the desktop's panels are not there */
.desk-panels { transition: opacity .5s ease .2s; }
.tablet__screen.is-locked .desk-panels { opacity: 0; }

/* ── The panels ──────────────────────────────────────────────────────────────
   As the desktop lays them, in design px on the 1920 screen: 8 in from each edge,
   weather and workspaces left, the mark and the apps in the middle, the clock right.
   An island is 48 tall, the panels' fill with a 5% hairline rim, rounded 24 — the
   screen's 32 less the 8 it stands off, so its corner nests in the screen's. Its face
   is inset 3 and fully round (21). An app is 42, the whole face, with a 30 icon. The
   open app's mark is 4 thick — bolder than the desktop's 2, to read at this size —
   and drains from blue to grey as the five-second count runs down. */
.desk-panels {
  position: absolute; left: 0.4167cqw; right: 0.4167cqw; bottom: 0.4167cqw; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.desk-panels__side, .desk-panels__center { display: flex; align-items: center; gap: 0.4167cqw; }
.desk-panels__right { justify-content: flex-end; }
.island {
  display: flex; align-items: center; height: 2.5cqw; padding: 0.15625cqw;
  background: rgba(15, 15, 16, 0.9); color: #f6f6f6;
  border: 1px solid rgba(246, 246, 246, 0.05); border-radius: 1.25cqw; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.island--mark { width: 2.5cqw; justify-content: center; }
.island--mark img { width: 1.25cqw; height: 1.25cqw; transition: transform .15s ease; }
.island--mark:hover img { transform: scale(1.08); }
.island--apps { gap: 0.104cqw; }
.app {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 2.1875cqw; height: 2.1875cqw; padding: 0; border: 0; border-radius: 1.09375cqw;
  background: transparent; cursor: pointer;
}
.app:hover { background: rgba(246, 246, 246, 0.08); }
.app img { width: 1.5625cqw; height: 1.5625cqw; transition: transform .15s ease; }
.app:hover img { transform: scale(1.08); }
.app:active img { transform: scale(0.88); }
.app__focus {
  position: absolute; left: 50%; bottom: 0.052cqw; width: 1.04cqw; height: 0.2083cqw; margin-left: -0.52cqw;
  border-radius: 0.2083cqw; overflow: hidden; opacity: 0; background: rgba(255, 255, 255, 0.18);
}
.app[aria-selected="true"] .app__focus { opacity: 1; }
.app__focus::after {
  content: ""; position: absolute; inset: 0; background: #3584e4;
  transform-origin: left center; transform: scaleX(var(--count, 1));
}
.island--weather { gap: 0.4167cqw; padding: 0 0.73cqw 0 0.625cqw; }
.island--weather svg { width: 1.04cqw; height: 1.04cqw; }
.island--workspaces { gap: 0.3125cqw; padding: 0 0.625cqw; }
.ws { width: 0.729cqw; height: 0.729cqw; border-radius: 50%; border: 0.104cqw solid #5d5d60; }
.ws--on { border-color: #3584e4; background: radial-gradient(circle, #3584e4 0 32%, transparent 36%); }
.island--clock { padding: 0 0.73cqw; }
.island__two { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.island__two--left { align-items: flex-start; }
.island__two b { font-size: 0.677cqw; font-weight: 500; }
.island__two small { font-size: 0.573cqw; color: #a8a8a8; }

@media (prefers-reduced-motion: reduce) { .stage__window { transition: none; } }

/* ── Stats strip ────────────────────────────────────────────────────────────*/
.stats { display: flex; gap: clamp(32px, 6vw, 80px); flex-wrap: wrap; justify-content: center; }
.stat { text-align: center; }
.stat__value { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; }
.stat__label {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Centered section head ──────────────────────────────────────────────────*/
.head { text-align: center; max-width: 700px; margin: 0 auto; }
.head .h2 { margin-bottom: 24px; }
.head .lead { max-width: 520px; margin: 0 auto; }
.head--compact { margin-bottom: 72px; }
.head--compact .h3 { margin-bottom: 14px; }
.head--compact .lead { font-size: 16px; max-width: 480px; }

/* ── Feature grid ───────────────────────────────────────────────────────────*/
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px; }
.feature { text-align: center; }
.feature__icon { color: var(--text); margin-bottom: 14px; display: flex; justify-content: center; }
.feature__icon svg { width: 20px; height: 20px; }
.feature__title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 8px; }
.feature__desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ── Cards — used for the parts of the system ───────────────────────────────*/
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  display: block;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  transition: border-color .2s ease;
}
a.card:hover { border-color: rgba(53, 132, 228, 0.6); }
.card__name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.card__desc { margin-top: 8px; font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ── Page header — the opening block on every inner page ────────────────────*/
.page-head { margin-bottom: 56px; max-width: 720px; }
/* When the header carries an argument rather than a single line, it runs the
   full measure. A paragraph caged in a narrow column inside a wide band leaves
   half the row empty for no reason. */
.page-head--wide { max-width: none; }
.page-head .lead + .lead { margin-top: 14px; }
.page-head .badge { margin-bottom: 14px; }
.page-head .h1 { font-size: clamp(28px, 5vw, 48px); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; }
.page-head .lead { line-height: 1.7; }

/* ── Rows — a hairline-separated list of term + explanation ─────────────────*/
.rows { border-top: 1px solid var(--border); }
.row {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border);
}
.row__term { font-weight: 600; font-size: 15px; flex: 0 0 180px; letter-spacing: -0.01em; }
.row__desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.row__meta { margin-left: auto; font-size: 13px; color: var(--text-faint); white-space: nowrap; }

/* ── Article cards — dated entries in the archive ───────────────────────────*/
.card__date { font-size: 12px; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.3; }
.card__arrow { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text-faint); transition: color .15s; }
a.card:hover .card__arrow { color: var(--text); }

/* ── Choice cards ───────────────────────────────────────────────────────────
   The desktop's own pattern: a square frame, a centred glyph, the name beneath.
   Selection is carried by the stroke and nothing else — the card does not lift,
   grow or change its fill, because a card that moves when you pick it makes the
   row unreadable. Radii stay concentric: 16 on the card, 12 on the panel's own
   inner edge. */
.pieces {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.piece {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 14px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.piece:hover { background: var(--bg-card-hover); color: var(--text); }
/* One accent, and it means "this is the one you are reading about". */
.piece.is-on { border-color: var(--accent); color: var(--text); }
.piece__icon { display: grid; place-items: center; }
.piece__icon svg { width: 34px; height: 34px; }
.piece__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.3;
}

/* The panel that explains whichever card is selected. It holds a fixed height
   so the page does not jump as you click along the row, and the text runs the
   full width of the panel rather than sitting in a narrow column inside it. */
.piecebox {
  margin-top: 12px;
  padding: 30px 34px;
  border-radius: 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.piecebox__name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.piecebox__desc {
  margin-top: 14px;
  max-width: none;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.75;
}
.piecebox__desc[hidden] { display: none; }

@media (max-width: 900px) {
  .pieces { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .pieces { grid-template-columns: repeat(2, 1fr); }
}

/* ── Prose (inner pages) ────────────────────────────────────────────────────*/
.prose { max-width: 68ch; }
.prose .command { margin: 24px 0; }
.prose code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--bg-card);
  border-radius: 5px;
  padding: 0.12em 0.4em;
}
.prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 12px; }
.prose h3 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
.prose p { margin-bottom: 16px; color: var(--text-muted); line-height: 1.75; }
.prose ul { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted); }
.prose li { margin-bottom: 8px; line-height: 1.75; }
.prose strong { color: var(--text); font-weight: 600; }

/* ── Command block — the one fixed-width face on the site ───────────────────*/
.command {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.8;
  overflow-x: auto;
  white-space: pre;
}
.command .cue { color: #555; user-select: none; }

/* ── Footer ─────────────────────────────────────────────────────────────────*/
.footer { margin-top: auto; background: var(--bg-alt); border-top: 1px solid var(--border); }
.footer__inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 40px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-faint);
}
.footer__links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__links .footer__fund { padding: 8px 18px; border-radius: 999px; background: #3584e4; color: #fff; font-weight: 600; }
.footer__links .footer__fund:hover { background: #4a93ea; color: #fff; }
.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: var(--text); }

/* ── Responsive ─────────────────────────────────────────────────────────────*/
@media (max-width: 680px) {
  .features { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .showcase { justify-content: center; }
  .showcase__text { text-align: center; }
  .showcase--flip .showcase__visual { order: 0; }
  .section { padding-left: 24px; padding-right: 24px; }
  .row { flex-direction: column; gap: 8px; }
  .row__term { flex: none; }
  .row__meta { margin-left: 0; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ── One app, many faces ─────────────────────────────────────────────────────
   The same Files window under seven themes: the shots stacked, the chosen one shown,
   a crossfade between. The picker underneath names each theme in its own words. */
.faces { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }
.faces__screen {
  position: relative; aspect-ratio: 16 / 9; margin-top: 40px; overflow: hidden;
  border-radius: clamp(10px, 1.7vw, 22px);
  box-shadow: none;
  background: #0a0b0e;
}
.faces__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.faces__shot.is-on { opacity: 1; }
.faces__picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 20px; }
.faces__pick {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font: inherit;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.faces__pick b { font-size: 15px; font-weight: 600; color: var(--text); }
.faces__pick span { font-size: 13px; line-height: 1.45; }
.faces__pick:hover { background: var(--bg-card); }
.faces__pick[aria-selected="true"] { background: var(--bg-card); border-color: #3584e4; }
.faces__pick:focus-visible { outline: 2px solid #3584e4; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .faces__shot { transition: none; } }
/* the theming section: black, between the grey "Not a Distribution" band and the layouts */
.faces-band {
  background: #0a0b0e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.faces-band .faces__pick:hover, .faces-band .faces__pick[aria-selected="true"] { background: rgba(255, 255, 255, 0.05); }
/* the theming section's heading and words get room to breathe */
.faces .head { max-width: 920px; }
.faces .head .h2 { max-width: none; }
.faces__lead { max-width: 1180px; margin: 56px auto 8px; text-align: center; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.7; color: #c3c7ce; }
.faces__picker { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .faces__picker { grid-template-columns: 1fr; } }
.faces__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 clamp(16px, 2.2vw, 32px); }
.faces__mark { display: block; width: clamp(76px, 7vw, 112px); height: auto; }
/* Square corners, as Studio and Ex95 draw their screens; Carbon rounds its screen
   (32 of 1920), so the frame takes that corner while Carbon is the face shown. */
.faces__screen { border-radius: 0; transition: border-radius .6s ease; }
.faces__screen:has(.faces__shot--round.is-on) { border-radius: 1.6667% / 2.963%; }
.faces .head--compact { margin-bottom: 0; }
/* Studio's screen is near-black on this grey: a hairline edge keeps it from melting in */
.faces__screen { transition: border-radius .6s ease, box-shadow .6s ease; }
.faces__screen:has(.faces__shot--edged.is-on) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }

/* ── The lower page: image-led bands, each its own colour ──────────────────── */
.split-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.split-head .lead { max-width: 640px; margin: 18px auto 0; font-size: 18px; line-height: 1.7; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip .split__text { order: 2; }
.split__text .h2 { margin: 10px 0 20px; }
.split__text p { font-size: 17px; line-height: 1.75; color: var(--text-muted); margin-top: 14px; max-width: 46ch; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #8fb4ec; }
.split__shot { margin: 0; }
.split__shot img { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1.4vw, 18px); }
@media (max-width: 880px) { .split, .split--flip { grid-template-columns: 1fr; } .split--flip .split__text { order: 0; } }

/* window modes band: spacing (its colour is set further down) */
.band-layouts .section { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.layout-shot { margin: 0; }
.layout-shot img { display: block; width: 100%; height: auto; border-radius: clamp(6px, 1vw, 12px); }
.layout-shot figcaption { margin-top: 12px; font-size: 15px; color: var(--text-muted); }
.layout-shot figcaption b { color: var(--text); font-weight: 600; margin-right: 8px; }
@media (max-width: 700px) { .layouts { grid-template-columns: 1fr; } }

/* stays how you left it: a light band, dark ink — a break from white on black */
.band-light { background: linear-gradient(180deg, #eef1f5, #e2e7ee); color: #171b23; }
.band-light .h2 { color: #10141c; }
.band-light .split__text p { color: #4a5263; }
.band-light .kicker { color: #2f6fd0; }


/* the shell: deep ink blue, a terminal card in Carbon's own look */
.band-shell { background: linear-gradient(180deg, #1d1c1f, #151417); border-top: 1px solid rgba(255,255,255,.05); }
.term { border-radius: 18px; background: rgba(12, 13, 14, 0.92); border: 1px solid rgba(246, 246, 246, 0.08); overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(246, 246, 246, 0.06); }
.term__bar span { width: 11px; height: 11px; border-radius: 50%; background: #3a3d44; }
.term__bar b { margin-left: 10px; font-size: 13px; font-weight: 500; color: #a8a8a8; }
.term__body { margin: 0; padding: 22px 24px 26px; font: 15px/1.9 "JetBrains Mono", ui-monospace, monospace; color: #f6f6f6; white-space: pre-wrap; }
.term__body .p { color: #4ec04e; }
.term__body .o { color: #d6d6d6; }
.term__body .c { color: #b8b8b8; }
.term__body .cur { display: inline-block; width: 9px; height: 1.1em; vertical-align: -0.18em; background: #f6f6f6; animation: ls-caret 1s steps(1) infinite; }

/* the hero: the words on the left, the tablet on the right */
.hero-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); align-items: center;
  max-width: 1380px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.hero-split__text .badge { margin-bottom: 22px; }
.hero-split__text .home-title { text-align: left; margin-bottom: 18px; }
.hero-split__text .lead { max-width: 46ch; margin-bottom: 32px; font-size: 18px; line-height: 1.65; }
.hero-split__device .tablet { width: 122%; max-width: none; margin-right: -22%; }   /* the tablet grows past its column; the words are untouched */
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__text { text-align: center; }
  .hero-split__text .home-title { text-align: center; }
  .hero-split__text .lead { margin-left: auto; margin-right: auto; }
  .hero-split__text .buttons { justify-content: center; }
}
/* The tablet turned a little toward the words, as if it stood on the desk beside them,
   and never quite still: it drifts slowly, turning and lifting, the way a thing held in
   the hand moves. The screen's glare slides the other way, so the glass reads as glass. */
.hero-split__device { perspective: 2200px; }
.hero-split__device .tablet {
  transform-origin: 60% 50%;
  animation: tablet-drift 16s ease-in-out infinite;
  will-change: transform;
}
@keyframes tablet-drift {
  0%   { transform: translateY(0)      rotateY(-15deg) rotateX(5deg)   rotateZ(1deg); }
  25%  { transform: translateY(-10px)  rotateY(-10deg) rotateX(3deg)   rotateZ(0.4deg); }
  50%  { transform: translateY(-4px)   rotateY(-13deg) rotateX(6.5deg) rotateZ(1.3deg); }
  75%  { transform: translateY(-12px)  rotateY(-17deg) rotateX(4deg)   rotateZ(0.7deg); }
  100% { transform: translateY(0)      rotateY(-15deg) rotateX(5deg)   rotateZ(1deg); }
}
.hero-split__device .tablet__screen::after {
  background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.09) 38%, rgba(255,255,255,0) 56%);
  background-size: 260% 100%;
  animation: tablet-glare 16s ease-in-out infinite;
}
@keyframes tablet-glare {
  0%, 100% { background-position: 70% 0; }
  25%      { background-position: 30% 0; }
  50%      { background-position: 55% 0; }
  75%      { background-position: 90% 0; }
}
@media (max-width: 960px) { .hero-split__device .tablet { animation: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-split__device .tablet { animation: none; transform: rotateY(-14deg) rotateX(5deg) rotateZ(1deg); }
  .hero-split__device .tablet__screen::after { animation: none; }
}

/* four layouts, one screen: the shots stacked, a switcher of glass pills under it */
.layouts-stage { max-width: 1180px; margin: 0 auto; }
.layouts__screen { margin-top: 0; border-radius: 1.6667% / 2.963%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.layouts__switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.layouts__switch .faces__pick { background: rgba(12, 14, 20, 0.55); border-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); }
.layouts__switch .faces__pick[aria-selected="true"] { background: rgba(53, 132, 228, 0.14); border-color: #3584e4; }
@media (max-width: 700px) { .layouts__switch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ── Feature checklist: a ledger and a drawing that changes with it ─────────
   Left: one panel of fixed size — the feature's vector drawing, its number, name and
   line, and a bar running out as its time goes. Right: the ledger, rows of fixed
   height (they never open), the row in hand lit. site.js sets .is-on and --left. */
.band-checklist { background: linear-gradient(180deg, #17181b 0%, #111215 100%); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.band-checklist .section { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.checklist__top { margin-bottom: 40px; }
.checklist__top .h2 { margin-top: 10px; }
.checklist { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }

.ck-stage {
  position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #1a1c20 0%, #141518 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.ck-art { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; }
.ck-fig { position: absolute; inset: 6% 6% 4%; width: 88%; height: 90%; opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .45s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1); }
.ck-fig.is-on { opacity: 1; transform: none; }
.ck-copy { display: flex; flex-direction: column; gap: 6px; padding: 26px 30px 30px; min-height: 150px; }
.ck-copy__num { font: 500 13px/1.4 "JetBrains Mono", ui-monospace, monospace; color: #3584e4; }
.ck-copy__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.ck-copy__text { font-size: 16px; line-height: 1.65; color: var(--text-muted); max-width: 52ch; }
.ck-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.ck-bar::after { content: ""; position: absolute; inset: 0; background: #3584e4; transform-origin: left; transform: scaleX(var(--left, 1)); }
.checklist.is-chosen .ck-bar { display: none; }

/* the ledger */
.checklist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: ck; }
.check {
  counter-increment: ck; display: flex; align-items: center; gap: 18px; height: 58px; padding: 0 4px; cursor: pointer; user-select: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07); outline: none;
}
.check:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.check::before { content: counter(ck, decimal-leading-zero); flex-shrink: 0; width: 26px; font: 500 13px/1 "JetBrains Mono", ui-monospace, monospace; color: #5d6168; transition: color .35s ease; }
.check__title { flex-grow: 1; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #9ba0a8; transition: color .35s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check__mark { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  color: transparent; border: 1px solid rgba(255, 255, 255, 0.12); transition: all .35s ease; }
.check__mark svg { width: 15px; height: 15px; }
.check:hover .check__title { color: #d5d9df; }
.check.is-on::before { color: #3584e4; }
.check.is-on .check__title { color: var(--text); }
.check.is-on .check__mark { color: #fff; background: #3584e4; border-color: #3584e4; }
.check:focus-visible { outline: 2px solid #3584e4; outline-offset: 2px; border-radius: 8px; }

/* a little life in the drawings, only on the one shown */
.ck-fig.is-on .f-float-a { animation: f-bob 6s ease-in-out infinite; }
.ck-fig.is-on .f-float-b { animation: f-bob 6s ease-in-out -2s infinite; }
.ck-fig.is-on .f-float-c { animation: f-bob 6s ease-in-out -4s infinite; }
.ck-fig.is-on .f-boot { animation: f-bob 2.4s ease-in-out infinite; }
.ck-fig.is-on .f-lift { animation: f-lift 3.6s ease-in-out infinite; }
.ck-fig.is-on .f-arrow { animation: f-lift 3.6s ease-in-out infinite; }
.ck-fig.is-on .f-row { animation: f-in .5s ease both; }
.ck-fig.is-on .f-row-2 { animation-delay: .12s; } .ck-fig.is-on .f-row-3 { animation-delay: .24s; }
.ck-fig.is-on .f-knob { animation: f-knob 3s ease-in-out infinite; }
.ck-fig.is-on .f-flow, .ck-fig.is-on .f-pass { stroke-dasharray: 8 8; animation: f-dash 1.2s linear infinite; }
.ck-fig.is-on .f-flow { stroke: #3584e4; }
.ck-fig.is-on .f-scan { animation: f-scan 2.4s ease-in-out infinite; }
.ck-fig.is-on .f-tick { stroke-dasharray: 90; animation: f-tick 2.4s ease-in-out infinite; }
.ck-fig.is-on .a-deny { animation: f-ring 2.4s ease-in-out infinite; }
@keyframes f-ring { 0%, 100% { stroke: rgba(156,196,255,0); stroke-width: 0; } 50% { stroke: rgba(156,196,255,.6); stroke-width: 4; } }
.ck-fig.is-on .f-caret { animation: ls-caret 1s steps(1) infinite; }
@keyframes f-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes f-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes f-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes f-knob { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(-28px); } }
@keyframes f-dash { to { stroke-dashoffset: -32; } }
@keyframes f-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(166px); } }
@keyframes f-tick { 0%, 20% { stroke-dashoffset: 90; } 50%, 100% { stroke-dashoffset: 0; } }

@media (max-width: 900px) { .checklist { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ck-fig, .ck-fig * { animation: none !important; transition: none !important; } }
/* factory reset: your files are wiped off by a sweep, then come back to start again */
.ck-fig.is-on .f-erase { animation: f-erase 4s ease-in-out infinite; }
.ck-fig.is-on .f-wipe { animation: f-wipe 4s ease-in-out infinite; }
@keyframes f-erase { 0%, 15% { clip-path: inset(0 0 0 0) fill-box; } 55%, 80% { clip-path: inset(0 0 0 100%) fill-box; } 100% { clip-path: inset(0 0 0 0) fill-box; } }
@keyframes f-wipe { 0%, 15% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 55% { transform: translateX(272px); opacity: 1; } 60%, 100% { transform: translateX(272px); opacity: 0; } }
/* GPU driver: NVIDIA's download fills, then holds */
.ck-fig.is-on .f-dl { transform-box: fill-box; transform-origin: left; animation: f-dl 3.6s ease-in-out infinite; }
@keyframes f-dl { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
/* immutable updates: the new image slides in to run, the last moves aside to be kept */
.u-a { transform: translateX(70px); } .u-b { transform: translateX(260px); } .u-c { transform: translateX(480px); opacity: 0; }
.u-a .u-on { opacity: 0; } .u-b .u-on { opacity: 1; } .u-c .u-on { opacity: 1; }
.ck-fig.is-on .u-all { animation: u-all 5s ease-in-out infinite; }
.ck-fig.is-on .u-a { animation: u-a 5s ease-in-out infinite; }
.ck-fig.is-on .u-b { animation: u-b 5s ease-in-out infinite; }
.ck-fig.is-on .u-b .u-on { animation: u-b-on 5s ease-in-out infinite; }
.ck-fig.is-on .u-c { animation: u-c 5s ease-in-out infinite; }
@keyframes u-all { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes u-a { 0%, 28% { transform: translateX(70px); opacity: 1; } 62%, 100% { transform: translateX(-170px); opacity: 0; } }
@keyframes u-b { 0%, 28% { transform: translateX(260px); } 62%, 100% { transform: translateX(70px); } }
@keyframes u-b-on { 0%, 28% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes u-c { 0%, 28% { transform: translateX(480px); opacity: 0; } 62%, 100% { transform: translateX(260px); opacity: 1; } }

/* the mark before the name: the animated DivisionOS mark (objects/logo), in Carbon blue */
.home-title { display: flex; align-items: center; gap: 0.12em; }
.home-title__mark { width: 1.08em; height: 1.08em; flex-shrink: 0; margin-left: -0.06em; }
@media (max-width: 960px) { .home-title { justify-content: center; } }

/* ── Humans aren't computers: the philosophy and the real dialogs ─────────────
   The demo reuses the checklist's panel and ledger; rows add where the task lives.
   data-look="3": the words centred over the demo, which stands flat so its drawings stay sharp. */
.band-noterm { position: relative; overflow: hidden; background: linear-gradient(180deg, #1b1c1f 0%, #141517 100%); border-top: 1px solid rgba(255,255,255,.06); }
.band-noterm .section { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(72px, 9vw, 120px); }
.noterm__title { font-size: clamp(38px, 4.6vw, 70px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--text); margin: 12px 0 22px; }
.noterm__line { font-size: clamp(17px, 1.55vw, 22px); line-height: 1.55; color: #dfe2e7; max-width: none; }
@media (min-width: 1000px) { .noterm__line { white-space: nowrap; } }
.noterm__quote { margin-top: 22px; font-size: 15px; line-height: 1.7; color: var(--text-muted); padding-left: 18px; border-left: 2px solid #3584e4; max-width: 40em; }
.noterm__demo { position: relative; margin-top: 56px; }
.check__where { flex-shrink: 0; font-size: 13px; color: #7d838c; margin-right: 6px; white-space: nowrap; }
.check.is-on .check__where { color: #9cc4ff; }


/* 3 · Dimensional — the demo stands in space: tilted, with layers behind it, drifting */
[data-look="3"] .noterm__say { text-align: center; } [data-look="3"] .noterm__line, [data-look="3"] .noterm__quote { margin-left: auto; margin-right: auto; }
[data-look="3"] .noterm__quote { border-left: 0; padding-left: 0; }
[data-look="3"] .noterm__demo { margin-top: 72px; }
[data-look="3"] .noterm__demo .checklist { position: relative; }

  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }






/* the Manage shares and Store drawings: Added lights, Get turns to Open as the bar fills */
.s-open { opacity: 0; }
.ck-fig.is-on .s-bar { transform-box: fill-box; transform-origin: left; animation: f-dl 3.6s ease-in-out infinite; }
.ck-fig.is-on .s-get { animation: s-get 3.6s steps(1) infinite; }
.ck-fig.is-on .s-open { animation: s-open 3.6s steps(1) infinite; }
@keyframes s-get { 0% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes s-open { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
.ck-fig.is-on .p-flip circle { animation: f-knob-r 3s ease-in-out infinite; }
.ck-fig.is-on .p-flip rect { animation: f-sw-bg 3s ease-in-out infinite; }
@keyframes f-knob-r { 0%, 30% { transform: translateX(0); } 45%, 85% { transform: translateX(16px); } 100% { transform: translateX(0); } }
@keyframes f-sw-bg { 0%, 30% { fill: #3a3e46; } 45%, 85% { fill: #3584e4; } 100% { fill: #3a3e46; } }
.ck-fig.is-on .r-found { animation: f-in .6s ease .6s both; }
/* Humans aren't computers: a smaller panel (16:9 drawing, tighter words) beside a nine-row
   ledger, so the two stand the same height; the panel tilts, nothing moves behind it */
.noterm__demo .checklist { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
.noterm__demo .ck-art { aspect-ratio: auto; flex: 1 1 auto; min-height: 240px; }
.noterm__demo .ck-copy { padding: 20px 26px 24px; min-height: 0; }
.noterm__demo .ck-copy__title { font-size: 21px; }
.noterm__demo .ck-copy__text { font-size: 15px; }
.noterm__demo .check { height: 56px; }
/* connect and share: the pointer comes to a share, presses it, and it connects */
.c-done { opacity: 0; } .c-cursor { transform: translate(380px, 250px); }
.ck-fig.is-on .c-cursor { animation: c-move 4.5s ease-in-out infinite; }
.ck-fig.is-on .c-pick .c-bg { animation: c-press 4.5s ease-in-out infinite; }
.ck-fig.is-on .c-done { animation: c-done 4.5s ease-in-out infinite; }
@keyframes c-move { 0% { transform: translate(380px, 250px); } 35%, 100% { transform: translate(236px, 140px); } }
@keyframes c-press { 0%, 36% { fill: #33363c; } 40% { fill: #2a3a55; } 46%, 100% { fill: #3584e4; fill-opacity: .18; } }
@keyframes c-done { 0%, 44% { opacity: 0; } 52%, 100% { opacity: 1; } }
.ck-fig.is-on .c-pick .c-sub { animation: c-sub 4.5s ease-in-out infinite; }
@keyframes c-sub { 0%, 44% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* choose who gets in: one pass is clicked round its three states */
.a-s2, .a-s3 { opacity: 0; } .a-cursor { transform: translate(250px, 150px); }
.ck-fig.is-on .a-s1 { animation: a-s1 6s steps(1) infinite; }
.ck-fig.is-on .a-s2 { animation: a-s2 6s steps(1) infinite; }
.ck-fig.is-on .a-s3 { animation: a-s3 6s steps(1) infinite; }
.ck-fig.is-on .a-cursor { animation: a-tap 2s ease-in-out infinite; }
@keyframes a-s1 { 0% { opacity: 1; } 33.3% { opacity: 0; } 100% { opacity: 0; } }
@keyframes a-s2 { 0% { opacity: 0; } 33.3% { opacity: 1; } 66.6% { opacity: 0; } }
@keyframes a-s3 { 0% { opacity: 0; } 66.6% { opacity: 1; } 100% { opacity: 1; } }
@keyframes a-tap { 0%, 80%, 100% { transform: translate(250px, 150px) scale(1); } 88% { transform: translate(250px, 150px) scale(.85); } }
.p-cursor { transform: translate(358px, 150px); }
.ck-fig.is-on .p-cursor { animation: p-tap 2s ease-in-out infinite; }
@keyframes p-tap { 0%, 80%, 100% { transform: translate(358px, 150px) scale(1); } 88% { transform: translate(358px, 150px) scale(.85); } }
/* window modes: drawn stage (no picture inside), five cards */
.modes__screen { background: #10131a; border-radius: 18px; }
.modes__screen .faces__shot { display: block; }
.modes__switch { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .modes__switch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* live process notifications: the capsule's ring runs as the copy goes */
.ck-fig.is-on .n-ring { animation: n-ring 5s linear infinite; }
.ck-fig.is-on .n-card { animation: f-in .6s ease both; }
@keyframes n-ring { from { stroke-dashoffset: 106.8; } to { stroke-dashoffset: 0; } }
/* the window modes run the full width of the content, like every other section */
#modes .layouts-stage { max-width: none; }
@media (max-width: 960px) { .hero-split__device .tablet { width: 100%; margin-right: 0; } }
.device-band { overflow-x: clip; }
/* the last band, Try it on real hardware: black */
.band-cta { background: #0a0b0e; border-top: 1px solid rgba(255,255,255,.06); }
/* window modes: plain black band */
.band-layouts { background: #0a0b0e; border-top: 1px solid rgba(255,255,255,.06); }

/* ── Goals ────────────────────────────────────────────────────────────────────
   The title with Help fund beside it, the funding as one slim strip beneath; then the
   goals as names on the left and one drawing at a time on the right. */
.band-fund { padding: clamp(44px, 6vh, 72px) 0 clamp(36px, 5vh, 56px); background: linear-gradient(180deg, #1b1c1f, #141517); }
.fund__help { position: relative; flex: none; padding: 18px 40px; font-size: 18px; background: #3584e4; color: #fff; border-color: #3584e4; }
.fund__help:hover { background: #4a93ea; border-color: #4a93ea; color: #fff; }
/* a wave rolls off the button every five seconds */
.fund__help::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid #3584e4; opacity: 0; pointer-events: none; animation: fund-wave 5s ease-out infinite; }
@keyframes fund-wave { 0% { transform: scale(1); opacity: .35; } 33%, 100% { transform: scale(1.15, 1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fund__help::after { animation: none; } }
.band-goals { padding: clamp(36px, 5vh, 60px) 0; background: linear-gradient(180deg, #1b1c1f, #141517); }
.spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 72px); align-items: stretch; }
.spot__item button { all: unset; display: block; cursor: pointer; padding: 13px 0 13px 20px; border-left: 2px solid #2b2e34; font-size: 18px; font-weight: 600; color: #7d838c; transition: color .2s ease, border-color .2s ease; }
.spot__item button:hover, .spot__item button:focus-visible { color: #c9cdd3; }
.spot__item.is-on button { color: var(--text); border-color: #3584e4; }
.spot__line { padding: 0 0 12px 22px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.spot.is-live .spot__line { display: none; }
.spot__stage { display: none; }
.spot.is-live .spot__stage { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); border-radius: 26px; border: 1px solid rgba(255,255,255,.08); background: #0a0b0e; }
.spot__art { width: min(100%, 380px); aspect-ratio: 480 / 300; margin: 0 auto; }
.spot__art img { display: block; width: 100%; height: 100%; }
.spot__say { max-width: 600px; margin: 26px auto 0; min-height: 9.6em; font-size: 17px; line-height: 1.65; color: var(--text-muted); }
.spot__say h3 { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.band-open { padding: clamp(64px, 9vh, 104px) 0; background: #0a0b0e; }
.open { text-align: center; }
.open .h2 { margin: 0 auto 26px; max-width: 900px; }
@media (max-width: 1000px) { .spot { grid-template-columns: 1fr; } }


/* ── Download ─────────────────────────────────────────────────────────────────
   One statement, one button, nothing else competing. */
.dl-one { min-height: 78vh; display: grid; place-items: center; padding: 60px 16px; text-align: center; background: radial-gradient(60% 50% at 50% 40%, rgba(53,132,228,.10), rgba(53,132,228,0) 70%), #0a0b0e; }
.dl-one__mark { width: 1.08em; height: 1.08em; flex-shrink: 0; margin-left: -0.06em; }
.dl-one__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: rgba(53,132,228,.14); color: #8ab8ff; font-size: 14px; font-weight: 600; }
.dl-one__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3584e4; box-shadow: 0 0 0 4px rgba(53,132,228,.2); }
.dl-one__title { display: flex; align-items: center; justify-content: center; gap: 0.12em; margin: 22px 0 16px; font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.dl-one__lead { max-width: 520px; margin: 0 auto 36px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.dl-one__get { display: inline-flex; align-items: center; gap: 10px; padding: 18px 34px; border-radius: 999px; background: #3584e4; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; transition: background .2s ease; }
.dl-one__get:hover { background: #4a93ea; }
.dl-one__get svg { width: 20px; height: 20px; }
.dl-one__note { display: block; margin-top: 20px; font-size: 14px; color: var(--text-muted); }

/* ── Archive and articles ─────────────────────────────────────────────────────
   The newest post large at the top, then topic filters and a search over a tight
   list. An article is one centred column under a wide cover. */
.kind { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #8ab8ff; }
.kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kind--Design { color: #c49cff; } .kind--Desktop { color: #8ab8ff; } .kind--System { color: #6fd17e; } .kind--Apps { color: #f0c55a; }
.arc__date { font-size: 13.5px; color: #7d838c; font-variant-numeric: tabular-nums; }
.arc__lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: 44px; color: inherit; }
.arc__lead[hidden] { display: none; }
.arc__lead-img { display: block; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #141518; }
.arc__lead-img img, .arc__img img { width: 100%; height: 100%; object-fit: cover; }
.arc__lead-text { display: flex; flex-direction: column; align-items: flex-start; }
.arc__lead-title { margin: 14px 0 12px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); transition: color .2s ease; }
.arc__lead-lede { margin-bottom: 16px; font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.arc__lead:hover .arc__lead-title, .arc__row:hover .arc__title { color: #8ab8ff; }
.arc__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }
.arc__kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.arc__kinds button { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; cursor: pointer; }
.arc__kinds button.is-on { color: var(--text); border-color: #3584e4; background: rgba(53,132,228,.12); }
.arc__search { margin-left: auto; width: min(320px, 100%); padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: #0f1013; color: var(--text); font: inherit; font-size: 14.5px; }
.arc__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 150px; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.06); color: inherit; }
.arc__row[hidden] { display: none; }
.arc__img { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #141518; }
.arc__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.arc__title { font-size: 17px; font-weight: 600; color: var(--text); transition: color .2s ease; }
.arc__row .arc__date { text-align: right; }
.arc__none { padding: 30px 0; color: var(--text-muted); }
.art { max-width: var(--col); margin: 0 auto; padding: 36px var(--gutter) 80px; }
.art__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-muted); }
.art__back:hover { color: var(--text); }
.art__back svg { width: 16px; height: 16px; }
.art__head { max-width: 1060px; margin: 40px auto 0; text-align: center; }
.art__head .kind { font-size: 14px; }
.art__kind { margin-top: 10px; }
.art__title { margin: 0 0 18px; font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--text); }
.art__lede { margin: 0 auto; max-width: 720px; text-wrap: balance; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--text-muted); }
.art__meta { margin-top: 22px; font-size: 14px; color: #7d838c; }
.art__cover { max-width: 1060px; margin: 44px auto 0; aspect-ratio: 16 / 8; border-radius: 26px; overflow: hidden; background: #141518; }
.art__cover img { width: 100%; height: 100%; object-fit: cover; }
/* a line drawing is shown whole, never cropped */
.art__cover img[src$=".svg"] { object-fit: contain; padding: 4% 8%; }
.art__body { max-width: 1060px; margin: 56px auto 0; font-size: 18px; line-height: 1.75; color: #c9cdd3; }
.art__body p { margin: 0 0 22px; }
.art__more { max-width: 1060px; margin: 72px auto 0; }
.art__more h2 { margin: 0 0 18px; font-size: 19px; font-weight: 800; }
.art__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.art__grid a { color: inherit; }
.art__grid .arc__img { margin-bottom: 12px; border-radius: 12px; }
.art__grid b { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; transition: color .2s ease; }
.art__grid a:hover b { color: #8ab8ff; }
@media (max-width: 900px) { .arc__lead { grid-template-columns: 1fr; } .arc__row { grid-template-columns: 72px minmax(0, 1fr); } .arc__row .arc__date { display: none; } .art__grid { grid-template-columns: 1fr; } .art__cover { aspect-ratio: 16 / 10; } }

/* ── Rows (Contact) ───────────────────────────────────────────────────────────
   Contact's ways to reach us: wide rows, an icon, a line, and an action at the end. */
.band-give { background: #0a0b0e; }
.band-give .h2 { margin-bottom: 28px; }
.give { display: flex; flex-direction: column; }
.give__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.07); color: inherit; }
.give__row:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }
.give__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); color: #8ab8ff; }
.give__icon svg { width: 22px; height: 22px; }
.give__text b { display: block; font-size: 18px; color: var(--text); }
.give__text span { display: block; margin-top: 2px; font-size: 15px; color: var(--text-muted); }
.give__go { padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(53,132,228,.6); color: #8ab8ff; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.give__row:hover .give__go { background: #3584e4; border-color: #3584e4; color: #fff; }
@media (max-width: 760px) { .give__row { grid-template-columns: 40px minmax(0, 1fr); } .give__go { grid-column: 2; justify-self: start; } }
.contact__foot { margin: 32px 0 0; font-size: 16px; color: var(--text-muted); }

/* ── The system (/division/) as a list and a panel ────────────────────────────
   The same shape as the goals: the pieces down the left, marked by the blue edge
   when chosen, and the chosen one's text in a bordered panel the colour of the page. */
.pieces-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 72px); align-items: stretch; }
.pieces-wrap .pieces { display: flex; flex-direction: column; gap: 0; margin: 0; }
.pieces-wrap .piece { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 15px 0 15px 20px; border: 0; border-left: 2px solid #2b2e34; border-radius: 0; background: none; color: #7d838c; }
.pieces-wrap .piece:hover { background: none; color: #c9cdd3; }
.pieces-wrap .piece.is-on { border-color: #3584e4; color: var(--text); }
.pieces-wrap .piece__icon svg { width: 22px; height: 22px; }
.pieces-wrap .piece__name { font-size: 18px; text-align: left; }
.pieces-wrap .piecebox { margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: none; border: 1px solid rgba(255,255,255,.08); min-height: 0; }
.pieces-wrap .piecebox__name { font-size: 28px; font-weight: 800; }
@media (max-width: 900px) { .pieces-wrap { grid-template-columns: 1fr; } }
.band-fund .h1 + .lead { margin-top: 14px; }
@media (max-width: 640px) { .arc__search { margin-left: 0; width: 100%; } }

/* ── The system pages (/division/) ────────────────────────────────────────────
   The grey head band of Goals and Help fund over the page's own title and opening;
   the article in a bordered panel the colour of the page; then back and next. */
.band-fund .page-head { margin-bottom: 0; max-width: 860px; }
.band-fund .page-head .h1 { margin-bottom: 14px; }
.band-fund .page-head .lead + .lead { margin-top: 14px; }
.band-fund .page-head--wide { max-width: none; }
.doc { max-width: none; padding: clamp(26px, 4vw, 52px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.08); }
.readnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 0; background: #0a0b0e; max-width: none; padding-left: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter))); }
.readnext a { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: inherit; }
.readnext a:last-child { text-align: right; }
.readnext small { display: block; font-size: 13px; color: #7d838c; }
.readnext b { display: block; margin-top: 4px; font-size: 19px; color: var(--text); transition: color .2s ease; }
.readnext a:hover b { color: #8ab8ff; }
.doc > * { max-width: 780px; }

/* ── Help fund (/donate/) ─────────────────────────────────────────────────────
   The mark, the ask and four goal drawings; then the top five beside the give box,
   the cards filling exactly the box's height; then one line, this month's bar and
   every listed supporter, names set off by slashes. */
.hf-head { background: #0a0b0e; text-align: center; }
.hf-head .section { padding-bottom: clamp(48px, 7vh, 80px); }
.hf-head__mark { display: block; width: clamp(88px, 10vw, 128px); height: auto; margin: 0 auto 26px; }
.hf-head .lead { max-width: 700px; margin: 14px auto 0; }
.hf-head__draw { display: flex; justify-content: center; gap: clamp(12px, 2.4vw, 36px); margin-top: 44px; }
.hf-head__draw img { width: clamp(145px, 19.5vw, 280px); height: auto; opacity: .9; }
.hf-give { background: #111216; }
.hf-give .section { padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(64px, 9vh, 104px); }
.hf-give__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 72px); align-items: stretch; }
.hf-tops { display: flex; flex-direction: column; gap: 8px; }
.hf-top { flex: 0 0 calc((100% - 72px) / 10); display: flex; align-items: center; gap: 14px; padding: 8px 20px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); }
.hf-top em { width: 20px; font-style: normal; font-size: 14px; font-weight: 700; color: #7d838c; text-align: center; }
.hf-top:first-child em { color: #8ab8ff; }
.hf-top i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 14px; color: #fff; }
.hf-top span { min-width: 0; }
.hf-top b { display: block; font-size: 15px; color: var(--text); }
.hf-top small { display: block; margin-top: 1px; font-size: 12.5px; color: #7d838c; }
.hf-top strong { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hf-top.is-empty { border-style: dashed; border-color: rgba(255,255,255,.06); }
.hf-top.is-empty em { color: #3e434b; }
.hf-top.is-empty i { background: rgba(255,255,255,.04); }
.hf-top.is-empty span { width: 34%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.04); }
.hf-box { background: #0a0b0e; display: flex; flex-direction: column; justify-content: center; min-height: 760px; padding: clamp(26px, 3vw, 40px); border-radius: 28px; border: 1px solid rgba(255,255,255,.08); text-align: center; }
.hf-box h2 { margin: 0 0 22px; font-size: 26px; font-weight: 800; }
.hf-choose h2 { margin-bottom: 30px; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.02em; }
.hf-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #0f1013; border: 1px solid rgba(255,255,255,.07); }
.hf-seg button { padding: 10px 24px; border-radius: 999px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hf-seg button.is-on { background: #23262c; color: var(--text); }
.hf-amts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hf-amts button { padding: 16px 0; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: none; color: var(--text); font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.hf-amts button.is-on { border-color: #3584e4; background: rgba(53,132,228,.12); }
.hf-other { display: none; margin-top: 10px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 14px; border: 1px solid #3584e4; }
.hf-other.is-on { display: flex; }
.hf-other span { font-size: 19px; font-weight: 700; color: var(--text-muted); }
.hf-other input { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 19px; font-weight: 700; outline: none; }
.hf-optin { display: inline-flex; gap: 10px; align-items: center; margin-top: 34px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text); }
.hf-optin input { appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1.5px solid #5a5f68; display: grid; place-items: center; cursor: pointer; }
.hf-optin input:checked { background: #3584e4; border-color: #3584e4; }
.hf-optin input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.hf-name { display: none; margin: 12px auto 0; width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: #0f1013; color: var(--text); font: inherit; font-size: 15px; text-align: center; }
.hf-name.is-on { display: block; }
.hf-go { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 22px; padding: 18px 24px; border-radius: 999px; border: 0; background: #3584e4; color: #fff; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.hf-choose .hf-go { margin-top: 30px; }
.hf-go:hover { background: #4a93ea; }
.hf-go:disabled { opacity: .4; cursor: default; }
.hf-fine { margin: 16px 0 0; font-size: 13.5px; color: #7d838c; }
.hf-pay, .hf-soon { display: none; text-align: left; }
.hf-box.is-paying .hf-choose, .hf-box.is-soon .hf-choose { display: none; }
.hf-box.is-paying .hf-pay { display: block; }
.hf-box.is-soon .hf-soon { display: block; text-align: center; }
.hf-soon p { margin: 0 auto; max-width: 380px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.hf-soon a { color: #8ab8ff; }
.hf-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 14.5px; cursor: pointer; }
.hf-back svg { width: 16px; height: 16px; }
.hf-back:hover { color: var(--text); }
.hf-summary { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.07); color: var(--text-muted); }
.hf-summary b { font-size: 24px; font-weight: 800; color: var(--text); }
.hf-field + .hf-field { margin-top: 14px; }
.hf-terms { margin: 16px 0 0; font-size: 14.5px; color: var(--text-muted); text-align: center; text-wrap: balance; }
.hf-error { margin: 14px 0 0; font-size: 14.5px; color: #ff8a8a; }
.hf-pay .hf-fine { text-align: center; }
.hf-all { background: var(--bg); text-align: center; }
.hf-all .section { padding-top: clamp(64px, 9vh, 104px); padding-bottom: clamp(72px, 10vh, 112px); }
.hf-total { margin: 0 0 30px; font-size: clamp(28px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: #9aa0a8; }
.hf-total b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hf-month { position: relative; max-width: 760px; height: 8px; margin: 0 auto 72px; border-radius: 4px; background: #2b2e34; overflow: hidden; }
.hf-month i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: #3584e4; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.hf-all h3 { margin: 48px 0 18px; font-size: 13.5px; font-weight: 700; color: #8ab8ff; }
.hf-names[hidden], .hf-all h3[hidden] { display: none; }
.hf-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: #c9cdd3; }
.hf-names span:not(:last-child)::after { content: "/"; padding: 0 14px; color: #3a3d44; font-weight: 400; }
.hf-names--once { color: #7d838c; font-weight: 500; }
.hf-quiet { margin: 44px 0 0; font-size: 14.5px; color: #7d838c; }
.hf-manage { display: inline-block; margin-top: 110px; font-size: 13.5px; color: #7d838c; text-decoration: underline; text-decoration-color: rgba(125,131,140,.4); text-underline-offset: 3px; }
.hf-manage:hover { color: var(--text); }
@media (max-width: 900px) { .hf-give__grid { grid-template-columns: 1fr; } .hf-box { min-height: 0; } .hf-head__draw img:nth-child(n+3) { display: none; } }
@media (max-width: 560px) { .hf-amts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hf-top { padding: 12px 14px; gap: 12px; } }

/* The Goals page's head, in the Help fund page's look */
.gl-head .section { padding-bottom: clamp(48px, 7vh, 80px); }
.gl-head .lead { margin-bottom: 40px; }
.gl-total { margin: 0 0 22px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.025em; color: #9aa0a8; }
.gl-total b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.gl-month { max-width: 560px; margin-bottom: 40px; }

/* An article's marks: headings, pull quotes, code, and the object filename figure */
.art__body h2 { margin: 52px 0 16px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.art__body strong { color: var(--text); font-weight: 700; }
.art__body code, .obj code { padding: 2px 7px; border-radius: 6px; background: #1c1e22; border: 1px solid rgba(255,255,255,.06); font: 0.86em/1.5 "JetBrains Mono", ui-monospace, monospace; color: #dfe2e7; white-space: nowrap; }
.art__body blockquote { margin: 40px 0; padding: 4px 0 4px 26px; border-left: 3px solid #3584e4; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: var(--text); }
.obj { margin: 40px 0 44px; padding: clamp(20px, 3vw, 34px); border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #0f1013; overflow-x: auto; }
.obj__grid { display: grid; grid-template-columns: auto repeat(4, auto); justify-content: start; row-gap: 0; min-width: 640px; font: 600 clamp(12px, 1.25vw, 15.5px)/2 "JetBrains Mono", ui-monospace, monospace; }
.obj__pre { padding-right: 6px; color: #5a5f68; font-weight: 500; }
.obj__f { padding: 0 8px; white-space: nowrap; }
.obj__f i { font-style: normal; color: #5a5f68; padding-left: 8px; }
.obj__f--name { color: #c9cdd3; } .obj__f--col { color: #9aa0a8; } .obj__f--hash { color: #7d838c; }
.obj__f--id { color: #8ab8ff; background: rgba(53,132,228,.10); }
.obj__br { height: 12px; margin: 2px 8px 0; border: 1.5px solid #3a3d44; border-top: 0; border-radius: 0 0 8px 8px; padding: 0; background: none; }
.obj__br.obj__f--id { border-color: #3584e4; }
.obj__lab { padding-top: 10px; white-space: normal; font-family: Inter, system-ui, sans-serif; line-height: 1.45; background: none; }
.obj__lab b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.obj__lab.obj__f--id b { color: #8ab8ff; }
.obj__lab small { display: block; margin-top: 2px; max-width: 220px; font-size: 13px; font-weight: 400; color: var(--text-muted); }
.obj__lab code { font-size: 12px; }
.obj figcaption { margin-top: 34px; text-align: center; font-size: 14px; color: var(--text-muted); }

/* The Bundles article's three other drawings */
.fig2, .fig3, .fig4 { margin: 40px 0 44px; padding: clamp(20px, 3vw, 34px); border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #0f1013; }
.fig2 figcaption, .fig3 figcaption, .fig4 figcaption { margin-top: 26px; text-align: center; font-size: 14px; color: var(--text-muted); }
.fig2 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 22px; }
.fig2 figcaption { grid-column: 1 / -1; }
.fig2__card { padding: 20px 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); }
.fig2__card small { display: block; font-size: 13px; color: #7d838c; }
.fig2__card b { display: block; margin: 8px 0 14px; }
.fig2__card b code { font-size: 15px; }
.fig2__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fig2__card li { display: flex; align-items: center; gap: 10px; }
.fig2__card em { font-style: normal; font-size: 12.5px; color: #f0a35a; }
.fig2__card--bad { border-color: rgba(240,163,90,.35); }
.fig2__card s { text-decoration-color: #f0a35a; }
.fig2__eq { font-size: 28px; font-weight: 800; color: #5a5f68; }
.fig3 > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.fig3 > div:first-child { border-top: 0; }
.fig3__k { font-size: 13.5px; color: #7d838c; }
.fig3 code { font-size: 14.5px; }
.fig3 mark { background: none; color: #8ab8ff; }
.fig3 ins { text-decoration: none; padding: 1px 4px; border-radius: 4px; background: rgba(240,163,90,.16); color: #f5c26b; }
.fig4 { text-align: center; }
.fig4__obj { display: inline-block; padding: 16px 22px; border-radius: 16px; border: 1px solid #3584e4; background: rgba(53,132,228,.06); }
.fig4__obj small { display: block; margin-bottom: 8px; font-size: 13px; color: #7d838c; }
.fig4__obj code b { color: #8ab8ff; font-weight: 600; }
.fig4__patch { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: #6fd17e; }
.fig4__lines { display: block; width: 70%; height: 46px; margin: 0 auto; }
.fig4__bundles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 70%; margin: 0 auto; }
.fig4__bundles span { padding: 10px 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: #c9cdd3; }
.fig4__bundles small { display: block; margin-top: 2px; font-size: 11.5px; color: #7d838c; }
@media (max-width: 760px) { .fig2 { grid-template-columns: 1fr; gap: 12px; } .fig2__eq { text-align: center; } .fig3 > div { grid-template-columns: 1fr; gap: 4px; } .fig4__lines { display: none; } .fig4__bundles { width: 100%; grid-template-columns: 1fr 1fr; margin-top: 16px; } }

/* ── Thank you (/donate/thanks/) ── */
.ty { flex: 1 0 auto; background: var(--bg); text-align: center; }
.ty .section { padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(64px, 10vh, 112px); }
.ty__mark { display: block; width: clamp(72px, 8vw, 104px); height: auto; margin: 0 auto 26px; }
.ty__done, .ty__failed { display: none; }
.ty.is-ready .ty__done, .ty.is-failed .ty__failed { display: block; animation: ty-in .5s ease both; }
@keyframes ty-in { from { opacity: 0; transform: translateY(8px); } }
.ty .lead { max-width: 620px; margin: 14px auto 0; }
.ty__mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); gap: 18px; max-width: 1180px; margin: 52px auto 0; }
.ty__goals { display: flex; flex-direction: column; gap: 18px; }
.ty__goals a { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: #111216; color: var(--text); text-decoration: none; transition: border-color .2s ease; }
.ty__goals a:hover { border-color: rgba(255,255,255,.18); }
.ty__goals img { width: 100%; height: 96px; object-fit: contain; }
.ty__goals b { display: block; margin-top: 16px; font-size: 15.5px; font-weight: 600; }
.ty__receipt { margin: 0; padding: 26px 30px 0; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #111216; text-align: left; }
.ty__receipt h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.ty__rows { margin: 0; }
.ty__rows div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ty__rows div:first-child { border-top: 0; }
.ty__rows dt { color: var(--text-muted); font-size: 15px; }
.ty__rows dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; text-align: right; }
.ty__rows dd b { color: #8ab8ff; }
.ty__link { margin: 4px -30px 0; padding: 16px 30px 18px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(53,132,228,.06); border-radius: 0 0 22px 22px; }
.ty__link[hidden] { display: none; }
.ty__link span { font-size: 14px; color: var(--text-muted); }
.ty__link div { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ty__link a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: #8ab8ff; text-decoration: none; }
.ty__link button { flex: none; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ty__link button:hover { border-color: rgba(255,255,255,.3); }
.ty__fine { margin: 16px 0 0; font-size: 13.5px; color: #7d838c; }
.ty__failed .lead { max-width: 520px; }
.ty__go [hidden] { display: none; }
.ty__page { background: #3584e4; color: #fff; }
.ty__go { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 900px) { .ty__mid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty__receipt { grid-column: 1 / -1; order: -1; } .ty__goals { display: contents; } }
@media (prefers-reduced-motion: reduce) { .ty.is-ready .ty__done, .ty.is-failed .ty__failed { animation: none; } }

/* ── A supporter's achievements (/supporter/) ── */
.sp { flex: 1 0 auto; background: var(--bg); text-align: center; }
.sp .section { padding-top: clamp(56px, 9vh, 96px); padding-bottom: clamp(64px, 10vh, 112px); }
.sp__mark { display: block; width: 56px; height: auto; margin: 0 auto 18px; }
.sp__done, .sp__failed { display: none; }
.sp.is-ready .sp__done, .sp.is-failed .sp__failed { display: block; animation: ty-in .5s ease both; }
.sp .lead { margin: 10px auto 0; }
.sp__list { max-width: 760px; margin: 44px auto 0; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #111216; overflow: hidden; text-align: left; }
.sp__row { display: flex; align-items: center; gap: 18px; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.05); }
.sp__row:first-child { border-top: 0; }
.sp__ic { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 12px; background: rgba(53,132,228,.15); color: #8ab8ff; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp__row div { flex: 1; min-width: 0; }
.sp__row b { display: block; font-size: 16.5px; color: var(--text); }
.sp__row small { font-size: 13.5px; color: var(--text-muted); }
.sp__row em { font-style: normal; font-size: 13.5px; color: var(--text-muted); text-align: right; }
.sp__row.is-off { opacity: .45; }
.sp__row.is-off .sp__ic { background: #1b1d22; color: var(--text-muted); }
.sp__go { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.sp__give { background: #3584e4; color: #fff; }
.sp__go button { font: inherit; cursor: pointer; }
@media (max-width: 560px) { .sp__row em { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp.is-ready .sp__done, .sp.is-failed .sp__failed { animation: none; } }