/* loheden.com, the one stylesheet (the loheden-design skill and its web.md).

   The colours come from the logo, a white lynx drawn on black: warm ink and birch white, so the
   frame stays quiet and the product icons and Therese's photographs carry the colour. Each product's
   own colour appears only in the drawing of that product's screen. Type comes from the role classes
   below and nowhere else; spacing from the steps 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 112, 128 px. */

/* Schibsted Grotesk, one family for everything (the owner's typography rule, 2026-10-07).
   Self-hosted, never loaded from a third-party server: a request to fonts.googleapis.com hands every
   visitor's IP address to Google before they have consented to anything. SIL Open Font License 1.1,
   the authors' own unmodified WOFF2 files from release 1.100 with OFL.txt beside them in
   static/fonts/schibsted-grotesk/. Only Regular, Medium and SemiBold ship. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url("/static/fonts/schibsted-grotesk/SchibstedGrotesk-Regular.12804c89cc48.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url("/static/fonts/schibsted-grotesk/SchibstedGrotesk-Medium.d8ff08ec1c17.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url("/static/fonts/schibsted-grotesk/SchibstedGrotesk-SemiBold.fcd8cd302dad.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Tokens */

:root {
  color-scheme: light;
  --paper: #fbfaf8;
  --wash: #f2f0ec;
  --raised: #ffffff;
  --line: #e4e0d9;
  --field: #8a847b;
  --heading: #161412;
  --text: #3d3934;
  --muted: #67615a;
  --accent: #161412;
  --accent-hover: #3a3631;
  --accent-ink: #ffffff;
  /* The cube's faces, and how much of its light (scripts/cube.py) each look shows: on the light page
     a black box that takes half the light and no sheen; on the dark one a box of very nearly the
     page's own colour that shows itself by its light and sheen as it rolls (the owner, 2026-10-22). */
  --cube-face: #0b0a09;
  --cube-shade: 0.5;
  --cube-sheen: 0;
  --tint: rgb(22 20 18 / 0.06);
  --tint-strong: rgb(22 20 18 / 0.1);
  --shadow-device: 0 1px 2px rgb(22 20 18 / 0.06), 0 24px 60px -24px rgb(22 20 18 / 0.28);
  --shadow-panel: 0 18px 50px -20px rgb(22 20 18 / 0.35);
  /* The products' own colours, used only in the drawings of their screens. */
  --prokoll: #b42318;
  --therese: #0c6a5a;
  --aso: #6d34d8;
  --lytics: #3b5bdb;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.6, 1);
  --w-site: 70rem;
  --w-wide: 75rem;
  --w-head: 46rem;
  --w-text: 40rem;
  --gutter: 20px;
  --bar: 64px;
}

/* The look is the page's data-theme: dark, the set below, unless the visitor switched to light, the
   set above (the owner, 2026-10-22; the switch works as prokoll.com's). The server writes it from the
   theme cookie, so the page arrives in its look with no flash. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e0d0c;
  --wash: #181715;
  --raised: #201e1c;
  --line: #2f2d2a;
  --field: #7a746c;
  --heading: #f5f3ef;
  --text: #d3cec6;
  --muted: #a39d94;
  --accent: #f5f3ef;
  --accent-hover: #d9d4cc;
  --accent-ink: #141210;
  --cube-face: #141311;
  --cube-shade: 0.7;
  --cube-sheen: 0.08;
  --tint: rgb(245 243 239 / 0.07);
  --tint-strong: rgb(245 243 239 / 0.12);
  --shadow-device: 0 1px 2px rgb(0 0 0 / 0.4), 0 24px 60px -24px rgb(0 0 0 / 0.8);
  --shadow-panel: 0 18px 50px -20px rgb(0 0 0 / 0.8);
  --prokoll: #f2665a;
  --therese: #4fc2ac;
  --aso: #a98bf5;
  --lytics: #7d97f2;
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
}

/* ---------------------------------------------------------------- Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

html.menu-open body { overflow: hidden; }

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5 { margin: 0; color: var(--heading); font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
b, strong { font-weight: 600; color: var(--heading); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

a { color: var(--heading); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--tint-strong); }

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Layout */

.wrap { width: 100%; max-width: calc(var(--w-site) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { width: 100%; max-width: calc(var(--w-text) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: 72px; }
.band-first { padding-top: 56px; }
.band-wash { background: var(--wash); }
@media (min-width: 768px) {
  .band { padding-block: 96px; }
  .band-first { padding-top: 72px; }
}
@media (min-width: 1024px) {
  .band { padding-block: 112px; }
  .band-first { padding-top: 88px; }
}

/* A centred headline block: the headline and at most one lead line. */
.head { max-width: var(--w-head); margin-inline: auto; text-align: center; }
.head .lead { margin-top: 16px; }
.head + * { margin-top: 40px; }
@media (min-width: 1024px) { .head + * { margin-top: 56px; } }
@media (max-width: 639px) { .head { text-align: left; } }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.head .actions { justify-content: center; }
@media (max-width: 639px) { .head .actions { justify-content: flex-start; } }

/* Text beside a visual: two columns from 1024 px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split-flip > :first-child { order: 2; }
  .split-wide-visual { grid-template-columns: 5fr 7fr; }
  .split-flip.split-wide-visual { grid-template-columns: 7fr 5fr; }
}
.split-copy > * + * { margin-top: 16px; }
.split-copy > .actions, .split-copy > .facts { margin-top: 28px; }

/* ---------------------------------------------------------------- Type roles */

.t-hero { font-size: 2.125rem; line-height: 1.08; letter-spacing: -0.022em; font-weight: 600; color: var(--heading); }
.t-page { font-size: 2rem; line-height: 1.1; letter-spacing: -0.022em; font-weight: 600; color: var(--heading); }
.t-section { font-size: 1.625rem; line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; color: var(--heading); }
.t-sub { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; color: var(--heading); }
.lead { font-size: 1.125rem; line-height: 1.5; color: var(--muted); }
.body { font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.small { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.fine { font-size: 0.75rem; line-height: 1.4; color: var(--muted); }

@media (min-width: 768px) {
  .t-hero { font-size: 2.625rem; }
  .t-page { font-size: 2.375rem; }
  .t-section { font-size: 1.875rem; }
  .t-sub { font-size: 1.3125rem; }
  .lead { font-size: 1.1875rem; }
}
@media (min-width: 1024px) {
  .t-hero { font-size: 3rem; }
  .t-page { font-size: 2.75rem; }
  .t-section { font-size: 2.125rem; }
  .t-sub { font-size: 1.375rem; }
  .lead { font-size: 1.1875rem; }
}

/* ---------------------------------------------------------------- Buttons and links */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease-state);
}
.button:hover { background: var(--accent-hover); text-decoration: none; }
.button-small { min-height: 36px; padding: 7px 16px; font-size: 0.9375rem; }

/* A quiet pill: a second action, or a way out to someone else's site that matters. */
.button-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  background: var(--tint); color: var(--heading);
  font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: background-color 150ms var(--ease-state);
}
.button-quiet:hover { background: var(--tint-strong); text-decoration: none; }
.button-quiet .fab { font-size: 1.05em; }
.glyph-inline { display: inline-grid; width: auto; height: auto; background: none; color: inherit; }

/* A text link standing alone, with a small chevron that moves a little on hover. */
.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  color: var(--heading); font-weight: 500; text-decoration: none;
}
.more .chevron-right { transition: transform 150ms var(--ease-state); }
.more:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.more:hover .chevron-right { transform: translateX(3px); }

/* ---------------------------------------------------------------- Header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-state);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}
.site-header[data-scrolled] { border-bottom-color: var(--line); }
html.menu-open .site-header { background: var(--paper); }

.bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--bar); }

.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--heading); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.012em; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.icon-button { flex: none; }
/* Below 360 px the bar holds the lynx and its three buttons; the name stays for screen readers. */
@media (max-width: 359px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.bar-links { display: none; align-items: center; gap: 4px; }
.bar-end { display: flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) {
  .bar-links { display: flex; position: absolute; left: 50%; transform: translateX(-50%); }
}

.nav-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  color: var(--text); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background-color 150ms var(--ease-state), color 150ms var(--ease-state);
}
.nav-link:hover { background: var(--tint); color: var(--heading); text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--tint-strong); color: var(--heading); font-weight: 600; }

.bar-cta { display: none; }
@media (min-width: 1024px) { .bar-cta { display: inline-flex; margin-right: 4px; } }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--heading); font-size: 0.875rem; font-weight: 600; cursor: pointer;
  transition: background-color 150ms var(--ease-state);
}
.icon-button:hover { background: var(--tint); }
.icon-button[aria-expanded="true"] { background: var(--tint-strong); }
.icon-button[hidden] { display: none; }
.icon-button .chevron { transition: transform 200ms var(--ease-state); }
.theme-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; margin-inline: 2px; border: 1px solid var(--line); }
:root[data-theme="dark"] .theme-toggle .moon, :root:not([data-theme="dark"]) .theme-toggle .sun { display: none; }
.icon-button[aria-expanded="true"] .chevron { transform: rotate(180deg); }
@media (min-width: 1024px) { .menu-button { display: none !important; } }

.flag { width: 20px; height: 20px; border-radius: 999px; flex: none; box-shadow: 0 0 0 1px var(--line); }

/* A panel a menu button opens: it fades and settles into place. */
.menu-panel {
  position: absolute; z-index: 50; background: var(--raised); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-panel);
  animation: panel-in 220ms var(--ease-out) both;
}
.menu-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.lang-wrap { position: relative; }
.language-menu { right: 0; top: 52px; width: 13rem; padding: 6px; list-style: none; }
.menu-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  color: var(--heading); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
}
.menu-row:hover { background: var(--tint); text-decoration: none; }
.menu-row[aria-current] { font-weight: 600; }
.menu-row .tick { margin-left: auto; }

.page-menu { left: 0; right: 0; top: 60px; padding: 12px; }
.page-menu nav { display: flex; flex-direction: column; }
.page-menu .menu-row { font-size: 1.0625rem; min-height: 48px; }
.page-menu .menu-row[aria-current="page"] { background: var(--tint-strong); }
.page-menu .button { width: 100%; margin-top: 12px; }
@media (min-width: 1024px) { .page-menu { display: none !important; } }

/* ---------------------------------------------------------------- Glyphs and facts */

.glyph {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--tint); color: var(--heading);
}
.glyph-lg { width: 44px; height: 44px; }
.glyph-lg svg { width: 22px; height: 22px; }

/* Several facts: a hairline-divided list, each with its icon, a dark phrase running into grey text. */
.facts { list-style: none; border-top: 1px solid var(--line); }
.facts > li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts > li > .glyph { margin-top: -3px; }
.facts p { color: var(--muted); }
.facts p b { color: var(--heading); font-weight: 600; }
.facts-cols { display: grid; column-gap: 48px; }
@media (min-width: 768px) {
  .facts-cols { grid-template-columns: 1fr 1fr; border-top: 0; }
  .facts-cols > li:nth-child(-n+2) { border-top: 1px solid var(--line); }
}

/* Caption blocks: a few ideas side by side, separated by space alone. */
.captions { display: grid; gap: 32px; list-style: none; }
@media (min-width: 768px) { .captions { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
@media (min-width: 640px) { .captions-4 { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; } }
@media (min-width: 1024px) { .captions-4 { grid-template-columns: repeat(4, 1fr); } }
.actions-center { justify-content: center; margin-top: 56px; }
@media (max-width: 639px) { .actions-center { justify-content: flex-start; margin-top: 40px; } }
.captions > li > .glyph { margin-bottom: 16px; }
.captions h3 { margin-bottom: 8px; }
.captions p { color: var(--muted); }

/* ---------------------------------------------------------------- Home: hero and the scene */

.hero { text-align: center; }
/* The hero: the cube in front of the title and its lead, side by side from 900 px with room around
   both, stacked above them on a tablet and a phone. */
.hero-stage { display: grid; justify-items: center; gap: 56px; }
.hero-copy { max-width: 40rem; }
.hero-copy .lead { margin-top: 20px; }
@media (min-width: 900px) {
  .hero-stage { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 96px; max-width: calc(68rem + 2 * var(--gutter)); }
  .hero-copy { text-align: left; }
  .hero-copy .lead { margin-left: 0; }
}
@media (max-width: 639px) {
  .hero { text-align: left; }
  .hero-stage { justify-items: start; gap: 48px; }
}
/* Rolling, the cube's corners swing out up to a fifth of its width on each side (measured across
   the whole roll), so it needs that room beside it: centred above the text on a phone and a tablet,
   and beside the text set in by a fifth of its width where the page's margin is narrower than that. */
.hero-stage > .cube-stage { justify-self: center; }
@media (min-width: 900px) { .hero-stage > .cube-stage { justify-self: start; margin-left: calc(var(--cube) * 0.2); } }
@media (min-width: 1280px) { .hero-stage > .cube-stage { margin-left: 0; } }

/* The cube: six faces of one square, the lynx first, folded into a box in 3D. It rests facing the
   reader on one face, flat, square and exactly its own size, and rolls about its own centre to the
   next, diagonally where two axes turn at once, looking a little larger while it turns (the owner,
   2026-10-22). It is one box that is always on screen: nothing is switched in or out of its place
   while it rolls, because a phone's browser draws nothing for a frame or two when a 3D scene is
   switched on, which made it blink at the start of every roll. Only transform moves, on the graphics
   card, so nothing around it moves. */
.cube-stage { --cube: 220px; position: relative; width: var(--cube); height: var(--cube); margin: 32px 0 40px; perspective: 1200px; cursor: pointer; }
@media (min-width: 640px) { .cube-stage { --cube: 260px; } }
@media (min-width: 1024px) { .cube-stage { --cube: 300px; margin: 40px 0; } }
@media (min-width: 1280px) { .cube-stage { --cube: 340px; } }
/* It sits back by half its depth, so the face in front is exactly its own size. */
.cube-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--cube) / -2)); }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
/* The edges are the faces themselves, solid black like them (the owner, 2026-10-22): no light ring,
   whose thin line flickered as the cube turned, and square corners, because a browser drops the
   rounded clip of a surface it draws in 3D. Each face ends exactly on its edge, so the outline is one
   straight line. Inside the faces a plain black box (.lining), 1 px smaller, so a line of sight
   through a seam ends on black, never on the page behind or on another face's words. Each face's
   black stops 1 px inside a transparent border, so its edge lies inside the face's own image, where
   the browser smooths it as it does a picture's, instead of the hard staircase it draws along a
   turned plane's edge. */
.face, .cube-tile {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 28px; overflow: hidden; color: #f7f5f1; text-align: center;
  border: 1px solid transparent; background: var(--cube-face) padding-box;
}
.face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* The page arrives with the faces as flat tiles, the lynx showing, so its first paint never waits on
   3D. static/js/base.js builds the cube from them under the lynx tile once the page has loaded, and
   takes the tiles away only after the cube has been drawn, before it first moves, so the lynx simply
   stays. Without script, and with Reduce Motion, the lynx tile stays. */
.cube-tiles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cube-tile:not(.tile-1) { visibility: hidden; }
.face-1, .tile-1 { padding: 0; }
/* The lynx is drawn inline on the face's own colour, so its square is the cube's in either look. */
.face-1 svg, .tile-1 svg { display: block; width: 100%; height: 100%; }
/* The light: a white layer over each face whose opacity follows the face's direction through the
   roll, so a face turning away from the reader or towards a light from the upper left greys a
   little and neighbouring faces always differ in tone. At rest the face in front takes none. */
.shade { position: absolute; inset: 0; background: rgb(255 255 255 / var(--cube-shade)); opacity: 0; pointer-events: none; }
/* The sheen: the same over every face, rising while the cube rolls and gone when it rests. */
.sheen { position: absolute; inset: 0; background: rgb(255 255 255 / var(--cube-sheen)); opacity: 0; pointer-events: none; }
.lining { position: absolute; inset: 0; background: var(--cube-face); --cube-lining: 1px; }
.face-glyph { display: block; color: #f7f5f1; }
.face-glyph svg { width: calc(var(--cube) * 0.2); height: calc(var(--cube) * 0.2); stroke-width: 1.1; }
.face-label { max-width: 11em; font-size: 1.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
@media (min-width: 1024px) { .face-label { font-size: 1.5rem; } }
.cube-shadow {
  position: absolute; left: 12%; right: 12%; bottom: -22%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(22 20 18 / 0.28), transparent); pointer-events: none;
}
:root[data-theme="dark"] .cube-shadow { background: radial-gradient(closest-side, rgb(0 0 0 / 0.7), transparent); }

/* The roll, the faces' places and their light, written by scripts/cube.py: the lynx, then top, right,
   bottom, left and back, 2 s on each face and 1 s between, and a half turn home to the lynx. */
/* cube: start (scripts/cube.py) */
.face.face-1 { transform: translateZ(calc(var(--cube) / 2)); }
.lining.face-1 { transform: translateZ(calc(var(--cube) / 2 - var(--cube-lining))); }
.face.face-2 { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.lining.face-2 { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2 - var(--cube-lining))); }
.face.face-3 { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.lining.face-3 { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2 - var(--cube-lining))); }
.face.face-4 { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }
.lining.face-4 { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2 - var(--cube-lining))); }
.face.face-5 { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.lining.face-5 { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2 - var(--cube-lining))); }
.face.face-6 { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.lining.face-6 { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2 - var(--cube-lining))); }
.play .cube { animation: cube-roll 18.4s cubic-bezier(0.65, 0.0, 0.35, 1.0) infinite; }
.play .face-1 > .shade { animation: cube-light-1 18.4s linear infinite; }
.play .face-2 > .shade { animation: cube-light-2 18.4s linear infinite; }
.play .face-3 > .shade { animation: cube-light-3 18.4s linear infinite; }
.play .face-4 > .shade { animation: cube-light-4 18.4s linear infinite; }
.play .face-5 > .shade { animation: cube-light-5 18.4s linear infinite; }
.play .face-6 > .shade { animation: cube-light-6 18.4s linear infinite; }
.play .face > .sheen { animation: cube-sheen 18.4s linear infinite; }
@keyframes cube-roll {
  0%, 10.87% { transform: rotateX(0deg) rotateY(0deg); }
  16.30%, 27.17% { transform: rotateX(-90deg) rotateY(0deg); }
  32.61%, 43.48% { transform: rotateX(0deg) rotateY(-90deg); }
  48.91%, 59.78% { transform: rotateX(90deg) rotateY(0deg); }
  65.22%, 76.09% { transform: rotateX(0deg) rotateY(90deg); }
  81.52%, 92.39% { transform: rotateX(0deg) rotateY(180deg); }
  100% { transform: rotateX(0deg) rotateY(360deg); }
}
@keyframes cube-light-1 { 0.00% { opacity: 0.0; } 10.87% { opacity: 0.0; } 11.21% { opacity: 0.0; } 11.55% { opacity: 0.0; } 11.89% { opacity: 0.001; } 12.23% { opacity: 0.002; } 12.57% { opacity: 0.008; } 12.91% { opacity: 0.021; } 13.25% { opacity: 0.053; } 13.59% { opacity: 0.117; } 13.93% { opacity: 0.201; } 14.27% { opacity: 0.272; } 14.61% { opacity: 0.322; } 14.95% { opacity: 0.356; } 15.29% { opacity: 0.378; } 15.63% { opacity: 0.391; } 15.96% { opacity: 0.398; } 16.30% { opacity: 0.4; } 27.17% { opacity: 0.4; } 27.51% { opacity: 0.398; } 27.85% { opacity: 0.391; } 28.19% { opacity: 0.378; } 28.53% { opacity: 0.356; } 28.87% { opacity: 0.323; } 29.21% { opacity: 0.278; } 29.55% { opacity: 0.227; } 29.89% { opacity: 0.206; } 30.23% { opacity: 0.304; } 30.57% { opacity: 0.395; } 30.91% { opacity: 0.457; } 31.25% { opacity: 0.497; } 31.59% { opacity: 0.521; } 31.93% { opacity: 0.535; } 32.27% { opacity: 0.542; } 32.61% { opacity: 0.544; } 43.48% { opacity: 0.544; } 43.82% { opacity: 0.542; } 44.16% { opacity: 0.535; } 44.50% { opacity: 0.522; } 44.84% { opacity: 0.501; } 45.18% { opacity: 0.472; } 45.52% { opacity: 0.435; } 45.86% { opacity: 0.4; } 46.20% { opacity: 0.398; } 46.54% { opacity: 0.443; } 46.88% { opacity: 0.497; } 47.21% { opacity: 0.536; } 47.55% { opacity: 0.561; } 47.89% { opacity: 0.577; } 48.23% { opacity: 0.586; } 48.57% { opacity: 0.591; } 48.91% { opacity: 0.592; } 59.78% { opacity: 0.592; } 60.12% { opacity: 0.589; } 60.46% { opacity: 0.58; } 60.80% { opacity: 0.561; } 61.14% { opacity: 0.53; } 61.48% { opacity: 0.48; } 61.82% { opacity: 0.404; } 62.16% { opacity: 0.3; } 62.50% { opacity: 0.2; } 62.84% { opacity: 0.227; } 63.18% { opacity: 0.278; } 63.52% { opacity: 0.323; } 63.86% { opacity: 0.356; } 64.20% { opacity: 0.378; } 64.54% { opacity: 0.391; } 64.88% { opacity: 0.398; } 65.22% { opacity: 0.4; } 76.09% { opacity: 0.4; } 76.43% { opacity: 0.4; } 76.77% { opacity: 0.4; } 77.11% { opacity: 0.4; } 77.45% { opacity: 0.4; } 77.79% { opacity: 0.4; } 78.12% { opacity: 0.4; } 78.46% { opacity: 0.4; } 78.80% { opacity: 0.4; } 79.14% { opacity: 0.4; } 79.48% { opacity: 0.4; } 79.82% { opacity: 0.4; } 80.16% { opacity: 0.4; } 80.50% { opacity: 0.4; } 80.84% { opacity: 0.4; } 81.18% { opacity: 0.4; } 81.52% { opacity: 0.4; } 92.39% { opacity: 0.4; } 92.87% { opacity: 0.402; } 93.34% { opacity: 0.407; } 93.82% { opacity: 0.416; } 94.29% { opacity: 0.432; } 94.77% { opacity: 0.455; } 95.24% { opacity: 0.488; } 95.72% { opacity: 0.524; } 96.20% { opacity: 0.544; } 96.67% { opacity: 0.323; } 97.15% { opacity: 0.17; } 97.62% { opacity: 0.086; } 98.10% { opacity: 0.042; } 98.57% { opacity: 0.019; } 99.05% { opacity: 0.007; } 99.52% { opacity: 0.002; } 100.00% { opacity: 0.0; } }
@keyframes cube-light-2 { 0.00% { opacity: 0.592; } 10.87% { opacity: 0.592; } 11.21% { opacity: 0.59; } 11.55% { opacity: 0.583; } 11.89% { opacity: 0.569; } 12.23% { opacity: 0.546; } 12.57% { opacity: 0.51; } 12.91% { opacity: 0.453; } 13.25% { opacity: 0.367; } 13.59% { opacity: 0.253; } 13.93% { opacity: 0.149; } 14.27% { opacity: 0.083; } 14.61% { opacity: 0.045; } 14.95% { opacity: 0.024; } 15.29% { opacity: 0.011; } 15.63% { opacity: 0.004; } 15.96% { opacity: 0.001; } 16.30% { opacity: 0.0; } 27.17% { opacity: 0.0; } 27.51% { opacity: 0.001; } 27.85% { opacity: 0.004; } 28.19% { opacity: 0.011; } 28.53% { opacity: 0.024; } 28.87% { opacity: 0.045; } 29.21% { opacity: 0.083; } 29.55% { opacity: 0.149; } 29.89% { opacity: 0.253; } 30.23% { opacity: 0.367; } 30.57% { opacity: 0.453; } 30.91% { opacity: 0.51; } 31.25% { opacity: 0.546; } 31.59% { opacity: 0.569; } 31.93% { opacity: 0.583; } 32.27% { opacity: 0.59; } 32.61% { opacity: 0.592; } 43.48% { opacity: 0.592; } 43.82% { opacity: 0.592; } 44.16% { opacity: 0.592; } 44.50% { opacity: 0.592; } 44.84% { opacity: 0.591; } 45.18% { opacity: 0.588; } 45.52% { opacity: 0.582; } 45.86% { opacity: 0.566; } 46.20% { opacity: 0.536; } 46.54% { opacity: 0.496; } 46.88% { opacity: 0.462; } 47.21% { opacity: 0.438; } 47.55% { opacity: 0.421; } 47.89% { opacity: 0.411; } 48.23% { opacity: 0.404; } 48.57% { opacity: 0.401; } 48.91% { opacity: 0.4; } 59.78% { opacity: 0.4; } 60.12% { opacity: 0.401; } 60.46% { opacity: 0.404; } 60.80% { opacity: 0.411; } 61.14% { opacity: 0.421; } 61.48% { opacity: 0.438; } 61.82% { opacity: 0.462; } 62.16% { opacity: 0.496; } 62.50% { opacity: 0.536; } 62.84% { opacity: 0.566; } 63.18% { opacity: 0.582; } 63.52% { opacity: 0.588; } 63.86% { opacity: 0.591; } 64.20% { opacity: 0.592; } 64.54% { opacity: 0.592; } 64.88% { opacity: 0.592; } 65.22% { opacity: 0.592; } 76.09% { opacity: 0.592; } 76.43% { opacity: 0.592; } 76.77% { opacity: 0.592; } 77.11% { opacity: 0.592; } 77.45% { opacity: 0.592; } 77.79% { opacity: 0.592; } 78.12% { opacity: 0.592; } 78.46% { opacity: 0.592; } 78.80% { opacity: 0.592; } 79.14% { opacity: 0.592; } 79.48% { opacity: 0.592; } 79.82% { opacity: 0.592; } 80.16% { opacity: 0.592; } 80.50% { opacity: 0.592; } 80.84% { opacity: 0.592; } 81.18% { opacity: 0.592; } 81.52% { opacity: 0.592; } 92.39% { opacity: 0.592; } 92.87% { opacity: 0.592; } 93.34% { opacity: 0.592; } 93.82% { opacity: 0.592; } 94.29% { opacity: 0.592; } 94.77% { opacity: 0.592; } 95.24% { opacity: 0.592; } 95.72% { opacity: 0.592; } 96.20% { opacity: 0.592; } 96.67% { opacity: 0.592; } 97.15% { opacity: 0.592; } 97.62% { opacity: 0.592; } 98.10% { opacity: 0.592; } 98.57% { opacity: 0.592; } 99.05% { opacity: 0.592; } 99.52% { opacity: 0.592; } 100.00% { opacity: 0.592; } }
@keyframes cube-light-3 { 0.00% { opacity: 0.4; } 10.87% { opacity: 0.4; } 11.21% { opacity: 0.4; } 11.55% { opacity: 0.4; } 11.89% { opacity: 0.4; } 12.23% { opacity: 0.4; } 12.57% { opacity: 0.4; } 12.91% { opacity: 0.4; } 13.25% { opacity: 0.4; } 13.59% { opacity: 0.4; } 13.93% { opacity: 0.4; } 14.27% { opacity: 0.4; } 14.61% { opacity: 0.4; } 14.95% { opacity: 0.4; } 15.29% { opacity: 0.4; } 15.63% { opacity: 0.4; } 15.96% { opacity: 0.4; } 16.30% { opacity: 0.4; } 27.17% { opacity: 0.4; } 27.51% { opacity: 0.4; } 27.85% { opacity: 0.4; } 28.19% { opacity: 0.399; } 28.53% { opacity: 0.395; } 28.87% { opacity: 0.385; } 29.21% { opacity: 0.359; } 29.55% { opacity: 0.301; } 29.89% { opacity: 0.2; } 30.23% { opacity: 0.099; } 30.57% { opacity: 0.041; } 30.91% { opacity: 0.015; } 31.25% { opacity: 0.005; } 31.59% { opacity: 0.001; } 31.93% { opacity: 0.0; } 32.27% { opacity: 0.0; } 32.61% { opacity: 0.0; } 43.48% { opacity: 0.0; } 43.82% { opacity: 0.0; } 44.16% { opacity: 0.001; } 44.50% { opacity: 0.004; } 44.84% { opacity: 0.01; } 45.18% { opacity: 0.024; } 45.52% { opacity: 0.053; } 45.86% { opacity: 0.111; } 46.20% { opacity: 0.2; } 46.54% { opacity: 0.301; } 46.88% { opacity: 0.359; } 47.21% { opacity: 0.385; } 47.55% { opacity: 0.395; } 47.89% { opacity: 0.399; } 48.23% { opacity: 0.4; } 48.57% { opacity: 0.4; } 48.91% { opacity: 0.4; } 59.78% { opacity: 0.4; } 60.12% { opacity: 0.4; } 60.46% { opacity: 0.4; } 60.80% { opacity: 0.4; } 61.14% { opacity: 0.4; } 61.48% { opacity: 0.4; } 61.82% { opacity: 0.4; } 62.16% { opacity: 0.4; } 62.50% { opacity: 0.4; } 62.84% { opacity: 0.4; } 63.18% { opacity: 0.4; } 63.52% { opacity: 0.4; } 63.86% { opacity: 0.4; } 64.20% { opacity: 0.4; } 64.54% { opacity: 0.4; } 64.88% { opacity: 0.4; } 65.22% { opacity: 0.4; } 76.09% { opacity: 0.4; } 76.43% { opacity: 0.401; } 76.77% { opacity: 0.403; } 77.11% { opacity: 0.408; } 77.45% { opacity: 0.416; } 77.79% { opacity: 0.428; } 78.12% { opacity: 0.446; } 78.46% { opacity: 0.472; } 78.80% { opacity: 0.502; } 79.14% { opacity: 0.525; } 79.48% { opacity: 0.536; } 79.82% { opacity: 0.541; } 80.16% { opacity: 0.543; } 80.50% { opacity: 0.544; } 80.84% { opacity: 0.544; } 81.18% { opacity: 0.544; } 81.52% { opacity: 0.544; } 92.39% { opacity: 0.544; } 92.87% { opacity: 0.54; } 93.34% { opacity: 0.526; } 93.82% { opacity: 0.498; } 94.29% { opacity: 0.452; } 94.77% { opacity: 0.38; } 95.24% { opacity: 0.271; } 95.72% { opacity: 0.127; } 96.20% { opacity: 0.0; } 96.67% { opacity: 0.054; } 97.15% { opacity: 0.157; } 97.62% { opacity: 0.247; } 98.10% { opacity: 0.312; } 98.57% { opacity: 0.355; } 99.05% { opacity: 0.382; } 99.52% { opacity: 0.396; } 100.00% { opacity: 0.4; } }
@keyframes cube-light-4 { 0.00% { opacity: 0.4; } 10.87% { opacity: 0.4; } 11.21% { opacity: 0.4; } 11.55% { opacity: 0.4; } 11.89% { opacity: 0.4; } 12.23% { opacity: 0.4; } 12.57% { opacity: 0.4; } 12.91% { opacity: 0.4; } 13.25% { opacity: 0.4; } 13.59% { opacity: 0.4; } 13.93% { opacity: 0.4; } 14.27% { opacity: 0.4; } 14.61% { opacity: 0.4; } 14.95% { opacity: 0.4; } 15.29% { opacity: 0.4; } 15.63% { opacity: 0.4; } 15.96% { opacity: 0.4; } 16.30% { opacity: 0.4; } 27.17% { opacity: 0.4; } 27.51% { opacity: 0.4; } 27.85% { opacity: 0.4; } 28.19% { opacity: 0.4; } 28.53% { opacity: 0.4; } 28.87% { opacity: 0.4; } 29.21% { opacity: 0.4; } 29.55% { opacity: 0.4; } 29.89% { opacity: 0.4; } 30.23% { opacity: 0.4; } 30.57% { opacity: 0.4; } 30.91% { opacity: 0.4; } 31.25% { opacity: 0.4; } 31.59% { opacity: 0.4; } 31.93% { opacity: 0.4; } 32.27% { opacity: 0.4; } 32.61% { opacity: 0.4; } 43.48% { opacity: 0.4; } 43.82% { opacity: 0.398; } 44.16% { opacity: 0.391; } 44.50% { opacity: 0.378; } 44.84% { opacity: 0.356; } 45.18% { opacity: 0.322; } 45.52% { opacity: 0.272; } 45.86% { opacity: 0.201; } 46.20% { opacity: 0.117; } 46.54% { opacity: 0.053; } 46.88% { opacity: 0.021; } 47.21% { opacity: 0.008; } 47.55% { opacity: 0.002; } 47.89% { opacity: 0.001; } 48.23% { opacity: 0.0; } 48.57% { opacity: 0.0; } 48.91% { opacity: 0.0; } 59.78% { opacity: 0.0; } 60.12% { opacity: 0.0; } 60.46% { opacity: 0.0; } 60.80% { opacity: 0.001; } 61.14% { opacity: 0.002; } 61.48% { opacity: 0.008; } 61.82% { opacity: 0.021; } 62.16% { opacity: 0.053; } 62.50% { opacity: 0.117; } 62.84% { opacity: 0.201; } 63.18% { opacity: 0.272; } 63.52% { opacity: 0.322; } 63.86% { opacity: 0.356; } 64.20% { opacity: 0.378; } 64.54% { opacity: 0.391; } 64.88% { opacity: 0.398; } 65.22% { opacity: 0.4; } 76.09% { opacity: 0.4; } 76.43% { opacity: 0.4; } 76.77% { opacity: 0.4; } 77.11% { opacity: 0.4; } 77.45% { opacity: 0.4; } 77.79% { opacity: 0.4; } 78.12% { opacity: 0.4; } 78.46% { opacity: 0.4; } 78.80% { opacity: 0.4; } 79.14% { opacity: 0.4; } 79.48% { opacity: 0.4; } 79.82% { opacity: 0.4; } 80.16% { opacity: 0.4; } 80.50% { opacity: 0.4; } 80.84% { opacity: 0.4; } 81.18% { opacity: 0.4; } 81.52% { opacity: 0.4; } 92.39% { opacity: 0.4; } 92.87% { opacity: 0.4; } 93.34% { opacity: 0.4; } 93.82% { opacity: 0.4; } 94.29% { opacity: 0.4; } 94.77% { opacity: 0.4; } 95.24% { opacity: 0.4; } 95.72% { opacity: 0.4; } 96.20% { opacity: 0.4; } 96.67% { opacity: 0.4; } 97.15% { opacity: 0.4; } 97.62% { opacity: 0.4; } 98.10% { opacity: 0.4; } 98.57% { opacity: 0.4; } 99.05% { opacity: 0.4; } 99.52% { opacity: 0.4; } 100.00% { opacity: 0.4; } }
@keyframes cube-light-5 { 0.00% { opacity: 0.544; } 10.87% { opacity: 0.544; } 11.21% { opacity: 0.544; } 11.55% { opacity: 0.544; } 11.89% { opacity: 0.544; } 12.23% { opacity: 0.544; } 12.57% { opacity: 0.544; } 12.91% { opacity: 0.544; } 13.25% { opacity: 0.544; } 13.59% { opacity: 0.544; } 13.93% { opacity: 0.544; } 14.27% { opacity: 0.544; } 14.61% { opacity: 0.544; } 14.95% { opacity: 0.544; } 15.29% { opacity: 0.544; } 15.63% { opacity: 0.544; } 15.96% { opacity: 0.544; } 16.30% { opacity: 0.544; } 27.17% { opacity: 0.544; } 27.51% { opacity: 0.545; } 27.85% { opacity: 0.548; } 28.19% { opacity: 0.555; } 28.53% { opacity: 0.564; } 28.87% { opacity: 0.578; } 29.21% { opacity: 0.595; } 29.55% { opacity: 0.608; } 29.89% { opacity: 0.598; } 30.23% { opacity: 0.555; } 30.57% { opacity: 0.505; } 30.91% { opacity: 0.465; } 31.25% { opacity: 0.437; } 31.59% { opacity: 0.419; } 31.93% { opacity: 0.408; } 32.27% { opacity: 0.402; } 32.61% { opacity: 0.4; } 43.48% { opacity: 0.4; } 43.82% { opacity: 0.4; } 44.16% { opacity: 0.4; } 44.50% { opacity: 0.4; } 44.84% { opacity: 0.4; } 45.18% { opacity: 0.4; } 45.52% { opacity: 0.4; } 45.86% { opacity: 0.4; } 46.20% { opacity: 0.406; } 46.54% { opacity: 0.442; } 46.88% { opacity: 0.478; } 47.21% { opacity: 0.504; } 47.55% { opacity: 0.522; } 47.89% { opacity: 0.533; } 48.23% { opacity: 0.54; } 48.57% { opacity: 0.543; } 48.91% { opacity: 0.544; } 59.78% { opacity: 0.544; } 60.12% { opacity: 0.545; } 60.46% { opacity: 0.548; } 60.80% { opacity: 0.553; } 61.14% { opacity: 0.559; } 61.48% { opacity: 0.563; } 61.82% { opacity: 0.554; } 62.16% { opacity: 0.508; } 62.50% { opacity: 0.398; } 62.84% { opacity: 0.254; } 63.18% { opacity: 0.146; } 63.52% { opacity: 0.08; } 63.86% { opacity: 0.042; } 64.20% { opacity: 0.02; } 64.54% { opacity: 0.008; } 64.88% { opacity: 0.002; } 65.22% { opacity: 0.0; } 76.09% { opacity: 0.0; } 76.43% { opacity: 0.0; } 76.77% { opacity: 0.0; } 77.11% { opacity: 0.001; } 77.45% { opacity: 0.002; } 77.79% { opacity: 0.008; } 78.12% { opacity: 0.021; } 78.46% { opacity: 0.053; } 78.80% { opacity: 0.117; } 79.14% { opacity: 0.201; } 79.48% { opacity: 0.272; } 79.82% { opacity: 0.322; } 80.16% { opacity: 0.356; } 80.50% { opacity: 0.378; } 80.84% { opacity: 0.391; } 81.18% { opacity: 0.398; } 81.52% { opacity: 0.4; } 92.39% { opacity: 0.4; } 92.87% { opacity: 0.4; } 93.34% { opacity: 0.4; } 93.82% { opacity: 0.4; } 94.29% { opacity: 0.4; } 94.77% { opacity: 0.4; } 95.24% { opacity: 0.4; } 95.72% { opacity: 0.4; } 96.20% { opacity: 0.4; } 96.67% { opacity: 0.472; } 97.15% { opacity: 0.514; } 97.62% { opacity: 0.533; } 98.10% { opacity: 0.54; } 98.57% { opacity: 0.543; } 99.05% { opacity: 0.544; } 99.52% { opacity: 0.544; } 100.00% { opacity: 0.544; } }
@keyframes cube-light-6 { 0.00% { opacity: 0.4; } 10.87% { opacity: 0.4; } 11.21% { opacity: 0.401; } 11.55% { opacity: 0.404; } 11.89% { opacity: 0.411; } 12.23% { opacity: 0.421; } 12.57% { opacity: 0.438; } 12.91% { opacity: 0.462; } 13.25% { opacity: 0.496; } 13.59% { opacity: 0.536; } 13.93% { opacity: 0.566; } 14.27% { opacity: 0.582; } 14.61% { opacity: 0.588; } 14.95% { opacity: 0.591; } 15.29% { opacity: 0.592; } 15.63% { opacity: 0.592; } 15.96% { opacity: 0.592; } 16.30% { opacity: 0.592; } 27.17% { opacity: 0.592; } 27.51% { opacity: 0.591; } 27.85% { opacity: 0.589; } 28.19% { opacity: 0.583; } 28.53% { opacity: 0.574; } 28.87% { opacity: 0.557; } 29.21% { opacity: 0.526; } 29.55% { opacity: 0.472; } 29.89% { opacity: 0.4; } 30.23% { opacity: 0.4; } 30.57% { opacity: 0.4; } 30.91% { opacity: 0.4; } 31.25% { opacity: 0.4; } 31.59% { opacity: 0.4; } 31.93% { opacity: 0.4; } 32.27% { opacity: 0.4; } 32.61% { opacity: 0.4; } 43.48% { opacity: 0.4; } 43.82% { opacity: 0.4; } 44.16% { opacity: 0.4; } 44.50% { opacity: 0.4; } 44.84% { opacity: 0.4; } 45.18% { opacity: 0.4; } 45.52% { opacity: 0.4; } 45.86% { opacity: 0.4; } 46.20% { opacity: 0.4; } 46.54% { opacity: 0.4; } 46.88% { opacity: 0.4; } 47.21% { opacity: 0.4; } 47.55% { opacity: 0.4; } 47.89% { opacity: 0.4; } 48.23% { opacity: 0.4; } 48.57% { opacity: 0.4; } 48.91% { opacity: 0.4; } 59.78% { opacity: 0.4; } 60.12% { opacity: 0.4; } 60.46% { opacity: 0.4; } 60.80% { opacity: 0.4; } 61.14% { opacity: 0.4; } 61.48% { opacity: 0.4; } 61.82% { opacity: 0.4; } 62.16% { opacity: 0.4; } 62.50% { opacity: 0.406; } 62.84% { opacity: 0.477; } 63.18% { opacity: 0.517; } 63.52% { opacity: 0.534; } 63.86% { opacity: 0.541; } 64.20% { opacity: 0.543; } 64.54% { opacity: 0.544; } 64.88% { opacity: 0.544; } 65.22% { opacity: 0.544; } 76.09% { opacity: 0.544; } 76.43% { opacity: 0.542; } 76.77% { opacity: 0.535; } 77.11% { opacity: 0.521; } 77.45% { opacity: 0.499; } 77.79% { opacity: 0.463; } 78.12% { opacity: 0.408; } 78.46% { opacity: 0.325; } 78.80% { opacity: 0.219; } 79.14% { opacity: 0.125; } 79.48% { opacity: 0.067; } 79.82% { opacity: 0.036; } 80.16% { opacity: 0.018; } 80.50% { opacity: 0.009; } 80.84% { opacity: 0.003; } 81.18% { opacity: 0.001; } 81.52% { opacity: 0.0; } 92.39% { opacity: 0.0; } 92.87% { opacity: 0.0; } 93.34% { opacity: 0.0; } 93.82% { opacity: 0.003; } 94.29% { opacity: 0.01; } 94.77% { opacity: 0.031; } 95.24% { opacity: 0.082; } 95.72% { opacity: 0.199; } 96.20% { opacity: 0.4; } 96.67% { opacity: 0.4; } 97.15% { opacity: 0.4; } 97.62% { opacity: 0.4; } 98.10% { opacity: 0.4; } 98.57% { opacity: 0.4; } 99.05% { opacity: 0.4; } 99.52% { opacity: 0.4; } 100.00% { opacity: 0.4; } }
@keyframes cube-sheen { 0.00% { opacity: 0.0; } 10.87% { opacity: 0.0; } 11.21% { opacity: 0.01; } 11.55% { opacity: 0.045; } 11.89% { opacity: 0.112; } 12.23% { opacity: 0.221; } 12.57% { opacity: 0.383; } 12.91% { opacity: 0.608; } 13.25% { opacity: 0.864; } 13.59% { opacity: 1.0; } 13.93% { opacity: 0.864; } 14.27% { opacity: 0.608; } 14.61% { opacity: 0.383; } 14.95% { opacity: 0.221; } 15.29% { opacity: 0.112; } 15.63% { opacity: 0.045; } 15.96% { opacity: 0.01; } 16.30% { opacity: 0.0; } 27.17% { opacity: 0.0; } 27.51% { opacity: 0.01; } 27.85% { opacity: 0.045; } 28.19% { opacity: 0.112; } 28.53% { opacity: 0.221; } 28.87% { opacity: 0.383; } 29.21% { opacity: 0.608; } 29.55% { opacity: 0.864; } 29.89% { opacity: 1.0; } 30.23% { opacity: 0.864; } 30.57% { opacity: 0.608; } 30.91% { opacity: 0.383; } 31.25% { opacity: 0.221; } 31.59% { opacity: 0.112; } 31.93% { opacity: 0.045; } 32.27% { opacity: 0.01; } 32.61% { opacity: 0.0; } 43.48% { opacity: 0.0; } 43.82% { opacity: 0.01; } 44.16% { opacity: 0.045; } 44.50% { opacity: 0.112; } 44.84% { opacity: 0.221; } 45.18% { opacity: 0.383; } 45.52% { opacity: 0.608; } 45.86% { opacity: 0.864; } 46.20% { opacity: 1.0; } 46.54% { opacity: 0.864; } 46.88% { opacity: 0.608; } 47.21% { opacity: 0.383; } 47.55% { opacity: 0.221; } 47.89% { opacity: 0.112; } 48.23% { opacity: 0.045; } 48.57% { opacity: 0.01; } 48.91% { opacity: 0.0; } 59.78% { opacity: 0.0; } 60.12% { opacity: 0.01; } 60.46% { opacity: 0.045; } 60.80% { opacity: 0.112; } 61.14% { opacity: 0.221; } 61.48% { opacity: 0.383; } 61.82% { opacity: 0.608; } 62.16% { opacity: 0.864; } 62.50% { opacity: 1.0; } 62.84% { opacity: 0.864; } 63.18% { opacity: 0.608; } 63.52% { opacity: 0.383; } 63.86% { opacity: 0.221; } 64.20% { opacity: 0.112; } 64.54% { opacity: 0.045; } 64.88% { opacity: 0.01; } 65.22% { opacity: 0.0; } 76.09% { opacity: 0.0; } 76.43% { opacity: 0.01; } 76.77% { opacity: 0.045; } 77.11% { opacity: 0.112; } 77.45% { opacity: 0.221; } 77.79% { opacity: 0.383; } 78.12% { opacity: 0.608; } 78.46% { opacity: 0.864; } 78.80% { opacity: 1.0; } 79.14% { opacity: 0.864; } 79.48% { opacity: 0.608; } 79.82% { opacity: 0.383; } 80.16% { opacity: 0.221; } 80.50% { opacity: 0.112; } 80.84% { opacity: 0.045; } 81.18% { opacity: 0.01; } 81.52% { opacity: 0.0; } 92.39% { opacity: 0.0; } 92.87% { opacity: 0.01; } 93.34% { opacity: 0.045; } 93.82% { opacity: 0.112; } 94.29% { opacity: 0.221; } 94.77% { opacity: 0.383; } 95.24% { opacity: 0.608; } 95.72% { opacity: 0.864; } 96.20% { opacity: 1.0; } 96.67% { opacity: 0.864; } 97.15% { opacity: 0.608; } 97.62% { opacity: 0.383; } 98.10% { opacity: 0.221; } 98.57% { opacity: 0.112; } 99.05% { opacity: 0.045; } 99.52% { opacity: 0.01; } 100.00% { opacity: 0.0; } }
/* cube: end */

/* The two doors under the home page's title: consulting and products, equal, side by side from
   768 px, so a visitor chooses at once (the owner, 2026-10-21). Each tile is the link; its picture
   rises from the bottom edge. */
.doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
@media (min-width: 768px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .doors { margin-top: 64px; } }
/* Each door's title, line, button and picture share rows with the other door's, so the buttons and
   pictures line up whichever title wraps (CSS subgrid, as prokoll-web's .steps-grid). */
.door {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start;
  overflow: hidden; border-radius: 28px; background: var(--wash); color: inherit; text-decoration: none; text-align: left;
}
.door:hover { text-decoration: none; }
.door:hover .button { background: var(--accent-hover); }
.door:focus-visible { outline-offset: 4px; border-radius: 28px; }
.door > h2, .door-line, .door-action { padding-inline: 24px; }
.door > h2 { padding-top: 32px; align-self: end; }
.door-line { color: var(--muted); }
.door-action { padding-top: 12px; padding-bottom: 28px; }
@media (min-width: 640px) {
  .door { text-align: center; }
  .door > h2, .door-line, .door-action { padding-inline: 40px; }
  .door > h2 { padding-top: 48px; }
  .door-line { max-width: 34rem; margin-inline: auto; }
  .door-action { padding-bottom: 36px; }
}
.door-visual { align-self: end; }
.door .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.door-scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.door-mac { position: absolute; left: 24px; right: 24px; top: 8px; }
.door-mac .device-side { display: none; }
.door-phone { display: none; }
@media (min-width: 480px) {
  .door-mac { right: 120px; }
  .door-phone { display: block; position: absolute; right: 20px; top: 28px; width: 200px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .door-mac { right: 24px; }
  .door-phone { display: none; }
}

/* ---------------------------------------------------------------- Drawn screens of the products */

.device {
  position: relative; overflow: hidden; text-align: left;
  background: var(--raised); color: var(--text);
  border-radius: 14px; box-shadow: 0 0 0 1px var(--line), var(--shadow-device);
  font-size: 0.8125rem; line-height: 1.45;
}
.device-bar {
  display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px;
  background: var(--wash); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 0.75rem; font-weight: 500;
}
.dots { display: inline-flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 999px; background: var(--line); }
.device-mac .dots i:nth-child(1) { background: #ff5f57; }
.device-mac .dots i:nth-child(2) { background: #febc2e; }
.device-mac .dots i:nth-child(3) { background: #28c840; }
.device-title { flex: 1; text-align: center; margin-right: 42px; color: var(--heading); font-weight: 600; }
.device-url {
  flex: 0 1 16rem; margin-left: 8px; padding: 3px 12px; border-radius: 8px;
  background: var(--raised); color: var(--muted);
}
.device-body { display: flex; min-height: 0; }
.device-side {
  display: none; flex: none; width: 34%; padding: 14px 10px;
  background: var(--wash); border-right: 1px solid var(--line);
}
@media (min-width: 768px) { .device-side { display: block; } }
.device-side .label { padding: 0 8px 8px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.device-side ul { list-style: none; }
.device-side li { padding: 7px 8px; border-radius: 8px; color: var(--heading); }
.device-side li span { display: block; color: var(--muted); font-size: 0.75rem; }
.device-side li.on { background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.device-main { flex: 1; min-width: 0; padding: 18px 20px 20px; }
.m-title { color: var(--heading); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.device-main .meta { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }
.m-head { margin: 16px 0 6px; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.device-main p { color: var(--text); }

.todo { list-style: none; }
.todo li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.todo li:first-child { border-top: 0; }
.todo .box {
  flex: none; position: relative; width: 15px; height: 15px; margin-top: 2px; border-radius: 4px;
  border: 1.5px solid var(--field);
}
.todo .box::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 5px; height: 8px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); opacity: 0;
}
.todo li.done .box { background: var(--prokoll); border-color: var(--prokoll); }
.todo li.done .box::after { opacity: 1; }
.todo .who { color: var(--heading); font-weight: 600; }
.todo .when { margin-left: auto; padding-left: 8px; color: var(--muted); white-space: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--tint); color: var(--heading); font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}

/* Therese AI: the morning brief. */
.ideas { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.ideas li { padding: 12px 14px; border-radius: 10px; background: var(--wash); }
.ideas b { display: block; color: var(--heading); font-weight: 600; font-size: 0.875rem; line-height: 1.35; }
.ideas .src { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--therese); font-size: 0.75rem; font-weight: 600; }
.ideas .src svg { width: 12px; height: 12px; flex: none; }
.brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.brief-head span { color: var(--muted); font-size: 0.75rem; }

/* RespectASO: keywords. */
.kw { width: 100%; border-collapse: collapse; margin-top: 12px; }
.kw th { padding: 6px 8px; color: var(--muted); font-size: 0.75rem; font-weight: 600; text-align: left; border-bottom: 1px solid var(--line); }
.kw td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--heading); white-space: nowrap; }
.kw td:first-child { font-weight: 500; white-space: normal; }
.kw .num { text-align: right; font-variant-numeric: tabular-nums; }
.meter { display: inline-block; width: 56px; height: 6px; border-radius: 999px; background: var(--tint-strong); vertical-align: middle; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--aso); transform-origin: left; }
.kw .word { margin-left: 8px; color: var(--muted); font-size: 0.75rem; }
@media (max-width: 479px) { .kw .word { display: none; } }

/* Respectlytics: a funnel. */
.funnel { list-style: none; display: grid; gap: 12px; margin-top: 14px; }
.funnel li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.funnel .name { color: var(--heading); font-weight: 500; }
.funnel .pct { color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel .track { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.funnel .track i { display: block; height: 100%; border-radius: inherit; background: var(--lytics); transform-origin: left; }
.device-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; }
.device-note .glyph { width: 22px; height: 22px; }
.device-note .glyph svg { width: 13px; height: 13px; }

/* A phone. */
.device-phone {
  border-radius: 32px; padding: 9px; background: #1c1a18; box-shadow: 0 0 0 1px var(--line), var(--shadow-device);
  text-align: left; font-size: 0.8125rem; line-height: 1.45;
}
.device-phone .screen { border-radius: 24px; overflow: hidden; background: var(--raised); }
.phone-top { display: flex; justify-content: center; padding: 8px 0 2px; }
.phone-top i { width: 60px; height: 18px; border-radius: 999px; background: #1c1a18; }
.phone-body { padding: 10px 14px 18px; }
.phone-body .m-title { font-size: 1rem; }
.phone-hours { margin-top: 12px; }
.phone-hours li { justify-content: space-between; padding: 9px 0; color: var(--heading); }
.phone-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--heading); font-weight: 600; }
.phone-button {
  display: flex; justify-content: center; margin-top: 16px; padding: 9px 12px; border-radius: 999px;
  background: #14248f; color: #fff; font-weight: 600;
}
.phone-body .meta { color: var(--muted); font-size: 0.75rem; }

/* On the products page the drawings are shown larger, beside the facts they illustrate. */
@media (min-width: 1024px) {
  .showcase .device { font-size: 0.875rem; }
  .showcase .device-main { padding: 28px 32px 32px; }
  .showcase .m-title { font-size: 1.1875rem; }
  .showcase .m-head, .showcase .device-side .label, .showcase .meta, .showcase .chip,
  .showcase .ideas .src, .showcase .kw th, .showcase .kw .word, .showcase .device-note, .showcase .brief-head span { font-size: 0.8125rem; }
  .showcase .ideas b { font-size: 0.9375rem; }
  .showcase .device-side li { padding: 9px 10px; }
  .showcase .todo li { padding: 9px 0; }
  .showcase .kw td { padding: 11px 8px; }
  .showcase .funnel { gap: 16px; }
  .showcase .ideas li { padding: 14px 16px; }
}

/* ---------------------------------------------------------------- Product lists */

.product-list { list-style: none; display: grid; column-gap: 48px; border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .product-list { grid-template-columns: 1fr 1fr; border-top: 0; }
  .product-list > li:nth-child(-n+2) { border-top: 1px solid var(--line); }
}
.product-list > li { border-bottom: 1px solid var(--line); }
.product-row {
  display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 16px 0;
  color: inherit; text-decoration: none;
}
.product-row:hover { text-decoration: none; }
.product-row:hover .product-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.product-row .chevron-right { margin-left: auto; flex: none; color: var(--muted); transition: transform 150ms var(--ease-state); }
.product-row:hover .chevron-right { transform: translateX(3px); color: var(--heading); }
.product-name { display: block; color: var(--heading); font-weight: 600; }
.product-line { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }

.app-icon { flex: none; width: 56px; height: 56px; border-radius: 13px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-icon-sm { width: 48px; height: 48px; border-radius: 11px; }
.app-icon-lg { width: 72px; height: 72px; border-radius: 17px; }

/* The products page: each product in its own band. */
.product-head { display: flex; align-items: center; gap: 16px; }
.product-head .small { margin-top: 2px; }

.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; }
@media (min-width: 1024px) { .pair { grid-template-columns: 1fr 1fr; gap: 64px; } }
.pair > div > * + * { margin-top: 16px; }
.pair .facts, .pair .actions { margin-top: 28px; }

.app-groups { display: grid; gap: 56px; }
.app-group h3 { margin-bottom: 16px; }
.app-list { list-style: none; border-top: 1px solid var(--line); }
.app-list > li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.app-list .stores { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (min-width: 768px) {
  .app-list > li { grid-template-columns: auto 1fr auto; }
  .app-list .stores { grid-column: 3; margin-top: 0; justify-content: flex-end; }
}
.store {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: var(--tint); color: var(--heading); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ease-state);
}
.store:hover { background: var(--tint-strong); text-decoration: none; }

/* ---------------------------------------------------------------- Photographs */

.photo { overflow: hidden; border-radius: 20px; background: var(--wash); }
.photo picture { height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-wide { aspect-ratio: 16 / 9; }
.photo-hero { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) { .photo-hero { aspect-ratio: 2 / 1; } }
.photo-portrait { aspect-ratio: 4 / 5; }
/* Stacked on a tablet, a tall photograph would fill the screen; it keeps a portrait's width. */
@media (max-width: 1023px) { .split > .photo-portrait, .split > .photo-tall, .split > .photo-square { width: 100%; max-width: 30rem; } }
.photo-tall { aspect-ratio: 3 / 4; }
.photo-land { aspect-ratio: 5 / 4; }
.photo-square { aspect-ratio: 14 / 15; }

/* ---------------------------------------------------------------- Digital marketing */

.steps { list-style: none; display: grid; gap: 40px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 48px; } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 56px 48px; } }
.step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-no {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0;
}
.steps p { color: var(--text); }
.ticks { list-style: none; margin-top: 12px; }
.ticks li { position: relative; padding-left: 22px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.ticks li + li { margin-top: 6px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em; width: 9px; height: 5px;
  border: solid var(--heading); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg);
}

.projects { list-style: none; display: grid; gap: 56px; }
@media (min-width: 768px) { .projects { grid-template-columns: 1fr 1fr; gap: 64px 48px; } }
.projects .photo { margin-bottom: 20px; }
.projects h3 { margin-bottom: 8px; }
.projects p { color: var(--muted); }
.projects p + p { margin-top: 8px; }
.projects .result { color: var(--text); }

.portfolios { display: grid; gap: 40px; margin-top: 72px; }
@media (min-width: 768px) { .portfolios { grid-template-columns: 1fr 1fr; gap: 48px; } }
.portfolio { display: block; color: inherit; text-decoration: none; }
.portfolio:hover { text-decoration: none; }
.portfolio .photo { aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--line); }
.portfolio .more { margin-top: 16px; }
.portfolio:hover .more { text-decoration: underline; }
.portfolio:hover .more .chevron-right { transform: translateX(3px); }
.portfolio .small { display: block; margin-top: 4px; }
.split-services { margin-top: 56px; }
.split-services h3 { margin-bottom: 16px; }

.quotes { list-style: none; display: grid; gap: 28px; }
.quotes li { padding-left: 20px; border-left: 2px solid var(--heading); }
.quotes blockquote { margin: 0; color: var(--heading); font-size: 1.1875rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }

/* Names in a row: plain words with a dot between, so nothing reads as a button. */
.inline-list { list-style: none; display: flex; flex-wrap: wrap; row-gap: 4px; color: var(--heading); font-weight: 500; }
.inline-list li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--muted); font-weight: 400; }

.aside-product { display: flex; flex-direction: column; gap: 24px; max-width: 52rem; margin-inline: auto; }
@media (min-width: 768px) { .aside-product { flex-direction: row; gap: 32px; align-items: flex-start; } }
.aside-product > div > * + * { margin-top: 12px; }
.aside-product .actions { margin-top: 20px; }

/* ---------------------------------------------------------------- Closing band */

.closing { text-align: center; }
.closing .lead { max-width: 36rem; margin: 16px auto 0; }
.closing .actions { justify-content: center; }
@media (max-width: 639px) {
  .closing { text-align: left; }
  .closing .lead { margin-left: 0; }
  .closing .actions { justify-content: flex-start; }
  }

/* ---------------------------------------------------------------- Footer */

.site-footer { padding: 64px 0 32px; background: var(--wash); color: var(--muted); font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
  .footer-brand { grid-column: auto; }
}
.footer-brand p { max-width: 22rem; margin-top: 12px; }
.footer-brand .brand { min-height: 0; }
.footer-col h2 { margin-bottom: 12px; color: var(--heading); font-size: 0.875rem; font-weight: 600; }
.footer-col ul { list-style: none; display: grid; gap: 4px; }
.footer-col a { display: inline-block; padding: 5px 0; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--heading); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.875rem;
}
.footer-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-langs a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--muted); text-decoration: none; }
.footer-langs .flag { width: 16px; height: 16px; }
.footer-langs a:hover { color: var(--heading); }
.footer-langs a[aria-current] { color: var(--heading); font-weight: 500; }
.footer-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer-button {
  min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 0.875rem; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.footer-button:hover { color: var(--heading); }
.footer-button[hidden] { display: none; }

/* ---------------------------------------------------------------- Legal pages

   Their text is the law's and is not touched here; only its setting is: one readable column on the
   page itself, no box, the same type roles as every other page. The older documents carry
   Bootstrap's grid and spacing classes, which do nothing now, and some draw their own bullets. */

.legal { padding-block: 56px 96px; }
@media (min-width: 1024px) { .legal { padding-block: 88px 112px; } }
.legal-column { max-width: calc(var(--w-text) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.legal-column .container, .legal-column .row, .legal-column [class*="col-"], .legal-column .card,
.legal-column .card-body, .legal-column .privacy-content, .legal-column .terms-content, .legal-column .section {
  max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.legal-column .row { display: block; }
.legal h1 { margin-bottom: 12px; font-size: 2rem; line-height: 1.1; letter-spacing: -0.022em; text-align: left; }
@media (min-width: 768px) { .legal h1 { font-size: 2.375rem; } }
@media (min-width: 1024px) { .legal h1 { font-size: 2.75rem; } }
.legal .text-center { text-align: left; }
.legal h2, .legal .h4 { margin: 48px 0 12px; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 768px) { .legal h2, .legal .h4 { font-size: 1.3125rem; } }
.legal h3, .legal h4, .legal h5 { margin: 28px 0 8px; font-size: 1.0625rem; line-height: 1.35; }
.legal p, .legal li { color: var(--text); }
.legal p + p, .legal p + ul, .legal ul + p, .legal p + ol, .legal ol + p { margin-top: 12px; }
.legal .text-muted { color: var(--muted); }
.legal .lead { font-size: 1.125rem; line-height: 1.5; margin-top: 16px; color: var(--muted); }
.legal ul, .legal ol { padding-left: 22px; margin-top: 8px; }
.legal ul.list-unstyled { padding-left: 0; list-style: none; }
.legal ul.list-unstyled ul { padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal hr { height: 0; margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.legal table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.9375rem; }
.legal th, .legal td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { color: var(--heading); font-weight: 600; }
.legal .table-responsive { overflow-x: auto; }
.legal :is(h1, h2, h3, h4, h5, p, li, a, span, strong) { hyphens: manual; }

/* ---------------------------------------------------------------- Error pages */

.error-page { padding-block: 96px 128px; text-align: center; }
.error-page .lead { max-width: 32rem; margin: 16px auto 0; }
.error-page .actions { justify-content: center; }
.error-mark { width: 72px; height: 72px; margin: 0 auto 32px; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }

/* ---------------------------------------------------------------- Email us */

.email-menu {
  position: absolute; z-index: 60; width: max-content; min-width: 13rem; max-width: calc(100vw - 16px); padding: 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-panel);
  animation: panel-in 200ms var(--ease-out) both;
}
.email-menu[hidden] { display: none; }
.email-menu__row {
  display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--heading);
  font-size: 0.9375rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.email-menu__row:hover { background: var(--tint); text-decoration: none; }
.email-menu__row .glyph { width: 24px; height: 24px; background: transparent; }
.email-menu__copied { margin: 4px 12px 8px; color: var(--muted); font-size: 0.875rem; }
.email-menu__copied[hidden] { display: none; }
.email-menu__label { color: var(--heading); font-weight: 600; }
.email-menu__address { user-select: all; }

/* ---------------------------------------------------------------- Motion

   A band rises into view once; an illustration loops while it is on screen, with a rest on the
   finished picture. The hidden starting state exists only under the class the script adds when
   motion is allowed, so without script, and with Reduce Motion, everything is in its final state. */

html.reveal-js .reveal { opacity: 0; transform: translateY(18px); }
html.reveal-js .reveal.in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
html.reveal-js .reveal-2.in { transition-delay: 100ms; }
html.reveal-js .reveal-3.in { transition-delay: 200ms; }

.offscreen *, .paused * { animation-play-state: paused !important; }

/* Lines that write themselves one after another, then a rest on the finished picture. */
.play .seq-1 { animation: seq-1 10s var(--ease-out) infinite; }
.play .seq-2 { animation: seq-2 10s var(--ease-out) infinite; }
.play .seq-3 { animation: seq-3 10s var(--ease-out) infinite; }
.play .seq-4 { animation: seq-4 10s var(--ease-out) infinite; }
.play .seq-5 { animation: seq-5 10s var(--ease-out) infinite; }
@keyframes seq-1 { 0% { opacity: 0; transform: translateY(6px); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes seq-2 { 0%, 10% { opacity: 0; transform: translateY(6px); } 16%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes seq-3 { 0%, 20% { opacity: 0; transform: translateY(6px); } 26%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes seq-4 { 0%, 30% { opacity: 0; transform: translateY(6px); } 36%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes seq-5 { 0%, 40% { opacity: 0; transform: translateY(6px); } 46%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* Prokoll's action points are ticked once they are written. */
.play .todo li.done .box { animation: tick-box 10s var(--ease-state) infinite; }
.play .todo li.done .box::after { animation: tick-mark 10s var(--ease-state) infinite; }
.play .todo li.done.late .box { animation-name: tick-box-late; }
.play .todo li.done.late .box::after { animation-name: tick-mark-late; }
@keyframes tick-box { 0%, 55% { background: transparent; border-color: var(--field); } 58%, 100% { background: var(--prokoll); border-color: var(--prokoll); } }
@keyframes tick-mark { 0%, 56% { opacity: 0; } 59%, 100% { opacity: 1; } }
@keyframes tick-box-late { 0%, 65% { background: transparent; border-color: var(--field); } 68%, 100% { background: var(--prokoll); border-color: var(--prokoll); } }
@keyframes tick-mark-late { 0%, 66% { opacity: 0; } 69%, 100% { opacity: 1; } }

/* Bars that grow to their value, one after another, then rest. */
.play .grow-1 { animation: grow-1 10s var(--ease-out) infinite; }
.play .grow-2 { animation: grow-2 10s var(--ease-out) infinite; }
.play .grow-3 { animation: grow-3 10s var(--ease-out) infinite; }
.play .grow-4 { animation: grow-4 10s var(--ease-out) infinite; }
@keyframes grow-1 { 0% { transform: scaleX(0); } 10%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes grow-2 { 0%, 6% { transform: scaleX(0); } 16%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes grow-3 { 0%, 12% { transform: scaleX(0); } 22%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes grow-4 { 0%, 18% { transform: scaleX(0); } 28%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* The recording dot breathes while the meeting is on. */
.rec-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: var(--prokoll); vertical-align: 1px; }
.play .rec-dot { animation: breathe 2s var(--ease-state) infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.reveal-js .reveal { opacity: 1; transform: none; }
}