/* PocketMika: what every page of the site shares. The tokens (the app's own colours, light and dark: Kit.java), the
   type scale, the buttons, the bubble before its script runs, the header with its menu, the footer, and the focus
   ring. Linked by index.html, help.html, privacy.html, terms.html, delete.html and 404.html, before each page's own
   styles. js/site.js is its script. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #0f1012;
  --ink-2: #5a5e65;
  --ink-3: #8b8f96;      /* only the grey second line of a couplet, and other type of 24 px or more */
  --ink-dim: #6b7078;    /* small quiet text: fine print, labels, placeholders */
  --ink-4: #c4c7cc;      /* unlit words, rails, tracks. Never text */
  --stage: #f3f4f5;
  --stage-2: #e6e8eb;
  --card: #ffffff;
  --said: rgba(255, 255, 255, .55);
  --line: #e4e6e9;
  --btn: #111214;
  --btn-ink: #ffffff;
  --btn-hover: #2c2f34;
  --ghost: rgba(15, 16, 18, .06);
  --ghost-hover: rgba(15, 16, 18, .1);
  --live: #ff4a2e;
  --focus: #2f6bff;
  --tab: #ffffff;        /* a tabs' marker: lighter than its --stage-2 track in both schemes */
  --save: #cf3473;       /* the one "Save 33%" pill: Candy's own deep colour, white on it reads */
  --apricot: #ffe9da;
  --apricot-ink: #a3410b;
  --mint: #ddf2e6;
  --mint-ink: #12663f;
  --sky: #e2ebfd;
  --sky-ink: #1f4fc2;
  --butter: #fff0c4;
  --butter-ink: #735300;
  --lilac: #efe9ff;
  --lilac-ink: #5b3cc4;
  --phone: #16171a;
  --screen: #ffffff;
  --screen-2: #f1f2f4;
  --kbd: #e5e7ea;
  --key: #ffffff;
  --key-ink: #3a3d42;
  --msg-in: #eef0f2;
  --msg-out: #0f1012;
  --msg-out-ink: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 16, 18, .06), 0 2px 10px rgba(15, 16, 18, .04);
  --shadow-md: 0 2px 4px rgba(15, 16, 18, .05), 0 14px 34px rgba(15, 16, 18, .08);
  --shadow-lg: 0 6px 14px rgba(15, 16, 18, .08), 0 34px 70px rgba(15, 16, 18, .16);
  --r-s: 12px;           /* small wells */
  --r-m: 20px;           /* any inner surface */
  --r-l: 32px;           /* every set: stages, card sets */
  --r-stage: var(--r-l);
  --r-card: 22px;        /* the mini cards' wells, and nothing new */
  --f-display: "Funnel Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-text: "Funnel Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --maxw: 1280px;
  --sec: clamp(104px, 13vw, 200px);
  --head-h: 72px;        /* the header's height: 56 px where its links fold into the menu */
  /* Motion. A plain curve first, for a browser without linear(); the springs themselves just below. The fades are
     the films' own pair: in is 1 - (1 - a)^3, out is b^2. */
  --spring: cubic-bezier(.2, .9, .3, 1); --spring-dur: 300ms;
  --spring-firm: cubic-bezier(.16, 1, .3, 1); --spring-firm-dur: 400ms;
  --spring-smooth: cubic-bezier(.16, 1, .3, 1); --spring-smooth-dur: 750ms;
  --spring-press: cubic-bezier(.2, .8, .3, 1); --spring-press-dur: 190ms;
  --fade-in: cubic-bezier(.33, 1, .68, 1);
  --fade-out: cubic-bezier(.11, 0, .5, 0);
}
/* The page's springs, sampled for CSS from the engine the demos run (index.html, M.S): snappy (the default: the
   release of a press, a row opening), firm (going back: a row closing), smooth (blocks arriving, the slow layer) and
   press (a finger going down). */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.0184, 0.0657, 0.1322, 0.2101, 0.2935, 0.3779, 0.4601, 0.5378, 0.6097, 0.6748, 0.7329, 0.7838, 0.8279, 0.8654, 0.8971, 0.9234, 0.9449, 0.9622, 0.976, 0.9867, 0.9949, 1.0009, 1.0052, 1.0081, 1.0099, 1.0108, 1.0111, 1.0109, 1.0104, 1.0097, 1.0088, 1.0079, 1.007, 1.0061, 1.0052, 1.0044, 1.0037, 1.003, 1.0024, 1); --spring-dur: 430ms;
    --spring-firm: linear(0, 0.0198, 0.069, 0.1355, 0.2109, 0.2893, 0.3667, 0.4406, 0.5096, 0.5727, 0.6296, 0.6805, 0.7255, 0.765, 0.7995, 0.8294, 0.8552, 0.8774, 0.8964, 0.9126, 0.9265, 0.9382, 0.9481, 0.9566, 0.9636, 0.9696, 0.9746, 0.9788, 0.9824, 0.9853, 0.9878, 0.9899, 0.9916, 0.993, 0.9942, 0.9952, 0.996, 0.9967, 0.9973, 0.9978, 1);
    --spring-smooth: linear(0, 0.0195, 0.0681, 0.134, 0.2086, 0.2864, 0.3633, 0.4369, 0.5057, 0.5687, 0.6256, 0.6766, 0.7218, 0.7615, 0.7961, 0.8263, 0.8524, 0.8748, 0.8941, 0.9105, 0.9246, 0.9365, 0.9467, 0.9552, 0.9625, 0.9686, 0.9737, 0.9781, 0.9817, 0.9847, 0.9873, 0.9894, 0.9912, 0.9927, 0.9939, 0.995, 0.9958, 0.9965, 0.9971, 0.9976, 1);
    --spring-press: linear(0, .05, .158, .287, .413, .528, .626, .708, .774, .827, .868, .9, .925, .944, .958, .969, .977, .983, .987, .991, .993, .995, .996, .997, 1);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0c0d0e;
    --ink: #f2f3f4;
    --ink-2: #a4a9b0;
    --ink-3: #6f747c;
    --ink-dim: #8a9099;
    --ink-4: #3b3f44;
    --stage: #17191b;
    --stage-2: #24272b;
    --card: #1f2225;
    --said: rgba(255, 255, 255, .035);
    --line: #2a2e32;
    --btn: #f2f3f4;
    --btn-ink: #0f1012;
    --btn-hover: #d5d8dc;
    --ghost: rgba(242, 243, 244, .08);
    --ghost-hover: rgba(242, 243, 244, .14);
    --live: #ff5a40;
    --focus: #7ea5ff;
    --tab: #3b3f44;
    --apricot: #3a2418;
    --apricot-ink: #ffb389;
    --mint: #15301f;
    --mint-ink: #86dbad;
    --sky: #182644;
    --sky-ink: #a6c1ff;
    --butter: #332a0f;
    --butter-ink: #f0cf6a;
    --lilac: #2a2140;
    --lilac-ink: #c9b8ff;
    --phone: #2a2d31;
    --screen: #111315;
    --screen-2: #1c1f22;
    --kbd: #1b1e21;
    --key: #2c3035;
    --key-ink: #d3d6da;
    --msg-in: #23272b;
    --msg-out: #f2f3f4;
    --msg-out-ink: #0f1012;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .45);
    --shadow-lg: 0 6px 14px rgba(0, 0, 0, .45), 0 34px 70px rgba(0, 0, 0, .6);
  }
}
@media (max-width: 1039px) { :root { --head-h: 56px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 500; text-wrap: balance; }
strong, b:not(:empty) { font-weight: 600; }   /* bold is 600 everywhere. (An empty b is a drawing, a film's dot: it has no weight to set.) */
main { scroll-margin-top: var(--head-h); }    /* "Skip to content" and the lockup's link land with the bar clear of the page's top */
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type: one scale ----------
   Display is the h1 and every h2: one size for every couplet, two short sentences on two lines, the second grey
   (.line, .line.dim). .doc-title is the one extra, for the reading column of the document pages and the 404. */
.h1, .h2 { font-size: clamp(2.5rem, 1.35rem + 4.3vw, 4.75rem); line-height: 1; letter-spacing: -0.024em; }
.h3 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -0.014em; }
.doc-title { font-size: clamp(2.25rem, 1.5rem + 3.3vw, 3.25rem); line-height: 1.04; letter-spacing: -0.02em; }
.t-h4 { font: 500 clamp(1.25rem, 1.2rem + .2vw, 1.375rem)/1.2 var(--f-display); letter-spacing: -0.01em; text-wrap: balance; }
.t-figure { font: 500 clamp(2rem, 1.7rem + 1.2vw, 2.75rem)/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.line { display: block; }
.dim { color: var(--ink-3); }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.t-small { font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.t-label { font: 600 .8125rem/1 var(--f-text); color: var(--ink-2); }
.t-fine { font-size: .875rem; line-height: 1.45; color: var(--ink-dim); }
.t-badge { font: 600 .75rem/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Give: what can be pressed sinks under the finger and springs back ----------
   Down on the press spring, with the pressed colour in 60 ms; back up on the snappy one. js/site.js holds .is-down
   for as long as the finger is down (and 90 ms at least, so a quick tap still shows); :active is the same thing
   without the script. Hover is a colour wash, for a real pointer only, and nothing else. .is-let-go is a touch the
   browser took for a scroll: it comes back quickly and without a bounce. */
.btn, .menu-btn, .nav .link, .brand vk-orb, .text-link, .foot-group a {
  transition: transform var(--spring-dur) var(--spring), background-color .12s var(--fade-in), color .12s var(--fade-in);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:active, .btn.is-down, .menu-btn:active, .menu-btn.is-down, .nav .link:active, .nav .link.is-down, .brand:active vk-orb, .brand.is-down vk-orb {
  transition-duration: var(--spring-press-dur), .06s, .06s; transition-timing-function: var(--spring-press), var(--fade-in), var(--fade-in);
}
.is-let-go, .is-let-go vk-orb { transition-duration: .14s !important; transition-timing-function: var(--fade-out) !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3.5rem; padding: 0 28px; border: 0; border-radius: 999px;
  font: 600 1rem/1 var(--f-text); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:active, .btn.is-down { transform: scale(.96); }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:active, .btn-primary.is-down { background: var(--btn-hover); }
.btn-ghost { padding-inline: 24px; background: var(--ghost); color: var(--ink); }
.btn-ghost:active, .btn-ghost.is-down { background: var(--ghost-hover); }
.btn-sm { min-height: 2.75rem; padding-inline: 18px; font-size: .9375rem; }
.btn-sm:active, .btn-sm.is-down { transform: scale(.95); }
/* a link that is not a button: quiet, with a chevron (the icon family: a 24 box, a 2 px round stroke, currentColor) */
.text-link { display: inline-flex; align-items: center; gap: 2px; min-height: 2.75rem; font: 600 .9375rem/1.4 var(--f-text); color: var(--ink-2); text-decoration: none; }
.text-link::after {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.text-link:active, .text-link.is-down { color: var(--ink); }
/* a link inside a sentence (an answer, a document's paragraph, the legal line): it keeps its underline and takes the
   full ink under a press, and under a real pointer */
:where(p, li) > a:not(.btn):not(.brand) { transition: color .12s var(--fade-in); -webkit-tap-highlight-color: transparent; }
:where(p, li) > a:not(.btn):not(.brand):active, :where(p, li) > a:not(.btn):not(.brand).is-down { color: var(--ink); transition-duration: .06s; }
/* a numbered pin: the legend's, and the steps of the document pages */
.pin { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 600 .9375rem/1 var(--f-text); flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--btn-hover); }
  .btn-ghost:hover { background: var(--ghost-hover); }
  .text-link:hover, :where(p, li) > a:not(.btn):not(.brand):hover { color: var(--ink); }
}

/* ---------- The bubble (js/orb.js) and the lockup ---------- */
/* its size and its still ink before the script runs, and if it never does (js/README.md, "Critical CSS"). Under the
   still, --ball: the bubble's own colour to just short of its edge, where the still covers all of it. If the
   picture never comes (a deploy without img/orb/) the bubble is a plain ball with its eyes, and not white eyes on
   a white page. */
:root { --ball: radial-gradient(closest-side, #ff3d8b 93%, rgba(255, 61, 139, 0) 97%); }
vk-orb { display: inline-block; flex: none; width: var(--orb-size, 44px); height: var(--orb-size, 44px); border-radius: 999px; vertical-align: middle; background: url(/img/orb/candy.webp) center / 100% 100% no-repeat, var(--ball); }
vk-orb[kind=home] { background-image: url(/img/orb/candy-ball.webp), var(--ball); }
/* and its two bar eyes, until the script makes it a bubble with eyes of its own: 34 x 80 of the face's 320, 37 either
   side of its middle (PetFace.java). Not for one given other eyes; :where, so a rule that places a bubble still does.
   On the four document pages, which load no bubble script, this is the logo for good. */
:where(vk-orb:not(:defined)) { position: relative; }
vk-orb:not(:defined):not([eyes])::before, vk-orb:not(:defined):not([eyes])::after { content: ""; position: absolute; left: 33.125%; top: 37.5%; width: 10.625%; height: 25%; border-radius: 999px; background: #fff; }
vk-orb:not(:defined):not([eyes])::after { left: 56.25%; }
vk-orb:focus-visible { outline-offset: 6px; border-radius: 999px; }
/* On the dark page the phone pools a standing bubble's own colour under it, in place of a dark shadow
   (BubbleHomeActivity). A lit stage keeps its own shadow in both schemes. */
@media (prefers-color-scheme: dark) {
  vk-orb[kind=home] { --orb-pool: var(--orb-body); --orb-floor: .3; }
  [data-set="stage"] vk-orb[kind=home] { --orb-pool: var(--orb-shadow); --orb-floor: inherit; }
}
/* the lockup: Mika and the wordmark. The bubble is sized here and has no size attribute, so its script keeps to
   this box when the breakpoint changes it. Pressed, it gives; it never speaks, hops or throws a heart. */
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font: 600 clamp(1.25rem, 1.2rem + .2vw, 1.375rem)/1 var(--f-display); letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent; }
.brand vk-orb { --orb-size: 30px; }
.brand:active vk-orb, .brand.is-down vk-orb { transform: scale(.86); }
@media (max-width: 1039px) {
  .brand { gap: 8px; }
  .brand vk-orb { --orb-size: 28px; }
}

/* ---------- Skip link ---------- */
.skip { position: absolute; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); top: calc((var(--head-h) - 2.75rem) / 2); z-index: 60; }   /* over the lockup, when the keyboard reaches it */
.skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header ----------
   One bar for the whole site: opaque, the page's own colour, so it never takes a colour from what passes under it.
   A hairline arrives under it once the page has moved (.scrolled, js/site.js), inside the bar's own height. */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--head-h); background: var(--bg); }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .12s var(--fade-in); pointer-events: none; }
.site-head.scrolled::after { opacity: 1; }
.head-inner { max-width: var(--maxw); height: 100%; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-in { display: flex; align-items: center; gap: 4px; }
.nav .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font: 600 .9375rem/1 var(--f-text); white-space: nowrap; }
.nav .link[aria-current="page"] { color: var(--ink); }
.nav .link:active, .nav .link.is-down { transform: scale(.95); background: var(--ghost); color: var(--ink); }
.nav .btn { margin-left: 8px; }
.nav-fine { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nav .link:hover { background: var(--ghost); color: var(--ink); }
  .menu-btn:hover { background: var(--ghost-hover); }
}
/* the menu button: the app's own round button at the top right. Two lines that turn into a cross about their shared
   centre. Written hidden: js/site.js shows it, and with scripts off the footer carries every link. */
.menu-btn { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: var(--ghost); color: var(--ink); cursor: pointer; }
.menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transform: translateY(-4px); transition: transform var(--spring-dur) var(--spring); }
.menu-btn::after { transform: translateY(4px); }
.menu-btn:active, .menu-btn.is-down { transform: scale(.88); background: var(--ghost-hover); }
.menu-open .menu-btn::before { transform: rotate(45deg); }
.menu-open .menu-btn::after { transform: rotate(-45deg); }
@media (min-width: 1040px) { .menu-btn { display: none; } }
/* Under 1040 px the links are the menu: a panel of the page's colour that opens under the bar as a row does.
   Height from nothing on the snappy spring (--menu-h, measured once at the tap) and back on the firm one; what is
   in it fades in after 50 ms and is gone in 100. No scrim, nothing slides in from anywhere. The panel only opens
   and clips; what is in it is never taller than the window under the bar, and scrolls inside itself when the
   rows need more than that (a short phone, large text, a phone on its side). */
@media (max-width: 1039px) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; height: 0; overflow: hidden; visibility: hidden; background: var(--bg); border-bottom: 1px solid var(--line);
    transition: height var(--spring-firm-dur) var(--spring-firm), visibility 0s linear var(--spring-firm-dur); }
  .nav-in { display: block; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) 20px; opacity: 0; transition: opacity .1s var(--fade-out);
    max-height: calc(100vh - var(--head-h) - 1px); max-height: calc(100dvh - var(--head-h) - 1px); overflow: hidden auto; overscroll-behavior: contain; }
  .menu-open .nav { height: var(--menu-h, auto); max-height: calc(100vh - var(--head-h)); max-height: calc(100dvh - var(--head-h)); visibility: visible; transition: height var(--spring-dur) var(--spring), visibility 0s; }
  .menu-open .nav-in { opacity: 1; transition: opacity .2s var(--fade-in) .05s; }
  /* a row: its words on the page's measure, its box 12 px wider each side, for the wash under a press and for the
     focus ring; a hairline between rows, on the measure */
  .nav .link { position: relative; display: flex; min-height: 3.5rem; margin-inline: -12px; border-radius: var(--r-s); color: var(--ink); font: 500 clamp(1.25rem, 1.2rem + .2vw, 1.375rem)/1.2 var(--f-display); letter-spacing: -0.01em; }
  .nav .link + .link::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line); }
  .nav .link:focus-visible { outline-offset: -2px; }
  .nav .link:active, .nav .link.is-down { transform: scale(.985); }   /* a block wider than 320 px gives less */
  .nav .btn { display: flex; min-height: 3.5rem; margin: 16px 0 0; padding-inline: 28px; font-size: 1rem; }
  .nav .btn:active, .nav .btn.is-down { transform: scale(.985); }
  .nav-fine { display: block; margin-top: 12px; text-align: center; text-wrap: balance; }
  html.menu-open { overflow: hidden; padding-right: var(--sbw, 0px); }   /* --sbw: the scrollbar's width, where a browser gives it one, so nothing shifts as the page is held */
}
/* a phone on its side: the bar goes with the page */
@media (max-height: 480px) {
  .site-head { position: relative; top: 0; }
}

/* ---------- Footer ----------
   The lockup and its line, then every link in three plain groups. On a phone: Product at the left, Help above
   Legal at the right. Nothing here moves but the logo, and the footer does not arrive. */
.site-foot { margin-top: var(--sec); border-top: 1px solid var(--line); padding-block: 64px calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, max-content); grid-template-areas: "brand product help legal"; column-gap: clamp(40px, 5.6vw, 80px); align-items: start; }
.foot-brand { grid-area: brand; }
.foot-brand p { margin-top: 8px; color: var(--ink-2); }
.foot-product { grid-area: product; }
.foot-help { grid-area: help; }
.foot-legal-links { grid-area: legal; }
.foot-group h2 { display: flex; align-items: center; min-height: 44px; font: 600 .8125rem/1 var(--f-text); color: var(--ink-dim); }
.foot-group ul { margin: 0; padding: 0; list-style: none; }
.foot-group a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.foot-group a:active, .foot-group a.is-down { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .foot-group a:hover { color: var(--ink); } }
.foot-legal { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .site-foot { padding-top: 48px; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "brand brand brand" "product help legal"; column-gap: 24px; row-gap: 28px; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); grid-template-areas: "brand brand" "product help" "product legal"; column-gap: 20px; row-gap: 0; }
  .foot-group a { white-space: normal; overflow-wrap: anywhere; }   /* the address fits a 360 px phone on one line; on a narrower one it breaks and does not run off */
  .foot-brand { margin-bottom: 28px; }
  .foot-legal-links { margin-top: 24px; }
  .foot-legal { margin-top: 40px; flex-direction: column; }
}

/* ---------- Focus ----------
   A 2 px ring, 2 px out, following the element's own shape, on everything that takes focus; never removed. Inside
   a lit stage, which may be any tone, it is written white, ink, white. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-set="stage"] :focus-visible { outline-color: #0f1012; box-shadow: 0 0 0 6px #fff; }

/* ---------- Forced colours ----------
   The ink, its eyes and the pixel art keep their own colours; every surface gets an edge the system can draw. The
   mode takes every background colour away, so what is drawn with one is given a system colour, which it keeps:
   the bar's hairline, the menu button's two lines, the lines between the menu's rows, a text link's chevron.
   (A component built later adds itself here, or in its own page's block: an edge for a surface, a system colour
   for anything drawn with a background.) */
@media (forced-colors: active) {
  vk-orb, canvas { forced-color-adjust: none; }
  .btn, .menu-btn, .pin, .stage, [data-set] { outline: 1px solid transparent; outline-offset: -1px; }
  .site-head::after { opacity: 1; background: CanvasText; }
  .menu-btn::before, .menu-btn::after { background: ButtonText; }
  .nav .link + .link::before { background: CanvasText; }
  .text-link::after { background: LinkText; }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* a press still shows its colour; nothing changes size */
  .btn:active, .btn.is-down, .menu-btn:active, .menu-btn.is-down, .nav .link:active, .nav .link.is-down, .brand:active vk-orb, .brand.is-down vk-orb { transform: none !important; }
}