@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/source-serif-4.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-600.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "Zest Symbols";
  font-style: normal;
  font-weight: 400;
  src: url(data:font/woff2;base64,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)
    format("woff2");
  unicode-range: U+25B8;
  font-display: swap;
}

:root {
  --white: #fff;
  --black: #000;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --red-100: #fee2e2;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --paper: var(--slate-50);
  --ink: var(--slate-900);
  --muted: var(--slate-500);
  --line: var(--slate-200);
  --accent: var(--amber-600);
  --accent-hover: var(--amber-800);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "Geist Mono", "Zest Symbols", ui-monospace, monospace;
  --gutter: 48px;
  /* The page's spacing scale. Each step holds its phone value up to a 390 px window and its desktop
     value from 1440 px, and slides between the two, so a tablet gets a step of its own. */
  --space-2xl: clamp(
    70px,
    54.4px +
    4vw,
    112px
  ); /* a block's band above and below */
  --space-l: clamp(
    40px,
    31.09px +
    2.286vw,
    64px
  ); /* a heading to the block's body */
  --space-m: clamp(
    25px,
    23.14px +
    0.476vw,
    30px
  ); /* a heading to its lead line */
}
* {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--amber-100);
  color: var(--amber-800);
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-thumb {
  background: var(--slate-400);
  border: 3px solid var(--paper);
  border-radius: 6px;
}
body::-webkit-scrollbar-track {
  background: var(--paper);
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 5px;
}
button,
input {
  font: inherit;
}
button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 5px;
}
button {
  cursor: pointer;
}
p,
h1,
h2,
h3,
ul,
ol,
figure {
  margin: 0;
}
svg {
  display: block;
}
img {
  max-width: 100%;
  display: block;
}
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.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;
}

main {
  position: relative;
}
.section,
.hero {
  position: relative;
}
h1,
h2,
h3 {
  font-weight: 400;
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 1.5156rem + 2.066vw, 3.375rem);
  max-width: 1160px;
}
h3 {
  letter-spacing: -0.008em;
  line-height: 1.12;
}
.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1344px;
  margin-inline: auto;
}
.section {
  padding-block: var(--space-2xl);
}
.section-lead {
  font-size: 1.3125rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 680px;
  margin-top: var(--space-m);
}
.mono,
.micro {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.micro {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--slate-700);
}

.button {
  display: inline-flex;
  gap: 26px;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 13px 22px;
  font: 500 0.75rem / 1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.button .icon {
  width: 15px;
  height: 15px;
}
.button-dark {
  color: var(--white);
  background: var(--slate-900);
  border-color: var(--slate-900);
}
.button-dark:hover {
  background: var(--slate-700);
  border-color: var(--slate-700);
}
.button-amber {
  background: var(--amber-500);
  color: var(--slate-950);
  border-color: var(--amber-500);
}
.button-amber:hover {
  background: var(--amber-400);
  border-color: var(--amber-400);
}
.nowrap {
  white-space: nowrap;
}
.button-outline {
  background: var(--white);
  color: var(--slate-800);
  border-color: var(--slate-300);
}
.button-outline:hover {
  border-color: var(--accent);
  color: var(--amber-800);
}

/* Corner crosshair marks, as on the Speakeasy tables. */
.ruled {
  position: relative;
}
.ruled:before,
.ruled:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--paper);
  border: 1px solid var(--slate-400);
  top: -4px;
  pointer-events: none;
}
.ruled:before {
  left: -4px;
}
.ruled:after {
  right: -4px;
}

/* Header. */
.site-header {
  height: 70px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: 100%;
  margin-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: flex;
  align-items: center;
  color: var(--slate-700);
}
.logo {
  width: 154px;
  height: 23px;
  color: inherit;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 42px;
}
/* The language switch, in the top bar and the footer: the other language as a link, a hairline, then
   the language on screen in ink. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lang a {
  padding-block: 12px;
  margin-block: -12px;
}
.lang a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.lang-sep {
  width: 1px;
  height: 12px;
  background: var(--slate-300);
}
.lang-on {
  color: var(--ink);
  font-weight: 500;
}
.header-right .button {
  min-height: 38px;
  padding: 9px 16px;
  gap: 17px;
}

/* The closing ask under the founders types out three wordings of the same ask in turn, letter by letter, in a 12 s loop.
   All three share one grid cell, so the button keeps the width of the longest and never jumps. The loop
   starts with the first wording already written, so the bar never opens on an empty button. Each wording's
   steps() count is its number of characters plus one for the caret, so the reveal moves one letter at a time.
   On a phone, and for a reader who switched movement off, the button holds the first wording still. The button's
   name is the wordings it can show, all three where it types and the first alone where it holds still, so a reader
   who speaks to the page can say any word on it. */
.cta-rotor {
  display: inline-grid;
  padding-right: 1ch;
}
.cta-phrase {
  grid-area: 1 / 1;
  position: relative;
}
.cta-sizer {
  visibility: hidden;
}
.cta-typed {
  position: absolute;
  inset: 0 auto 0 0;
  clip-path: inset(0 100% 0 0);
  animation: cta-type 12s infinite;
}
.cta-typed:after {
  content: "|";
  display: inline-block;
  width: 1ch;
  animation: cta-caret 0.8s step-end infinite;
}
/* The caret is drawn, not said: an empty alternative text keeps it out of the button's name, which then holds only
   words. */
@supports (content: "|" / "") {
  .cta-typed:after {
    content: "|" / "";
  }
}
.cta-phrase:nth-child(1) .cta-typed {
  animation-delay: -2.4s;
  animation-timing-function: steps(14);
}
.cta-phrase:nth-child(2) .cta-typed {
  animation-delay: 1.6s;
  animation-timing-function: steps(23);
}
.cta-phrase:nth-child(3) .cta-typed {
  animation-delay: 5.6s;
  animation-timing-function: steps(24);
}
:lang(en) .cta-phrase:nth-child(1) .cta-typed {
  animation-timing-function: steps(12);
}
:lang(en) .cta-phrase:nth-child(2) .cta-typed {
  animation-timing-function: steps(26);
}
:lang(en) .cta-phrase:nth-child(3) .cta-typed {
  animation-timing-function: steps(22);
}
@keyframes cta-caret {
  50% {
    opacity: 0;
  }
}
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .cta-rotor {
    padding-right: 0;
  }
  .cta-phrase:not(:first-child) {
    display: none;
  }
  .cta-typed {
    clip-path: none;
    animation: none;
  }
  .cta-typed:after {
    content: none;
  }
}
@keyframes cta-type {
  0%,
  4% {
    clip-path: inset(0 100% 0 0);
  }
  20%,
  29% {
    clip-path: inset(0);
  }
  33.3333%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

/* Hero: split editorial opening, the drawing moving between handset, envelope and chat bubble on the right.
   At 1440 px the drawing column keeps one unit of the drawing at 1.10 px. The drawing's box keeps room for
   its tallest pose, so at rest its lower part stands empty; the rule under the hero sits one heading-to-lead
   step below the box, and the empty band under the words comes out near the one over the headline. */
.hero {
  position: relative;
  min-height: 0;
  padding-top: 96px;
  padding-bottom: var(--space-m);
  display: flex;
  align-items: flex-start;
}
/* The headline, the line under it and the button stand as one group, centred on the middle of the drawing,
   which sits a little above the middle of its box; the negative margin takes the group up to it. The empty
   bands over and under the group come out near equal, and each is wider than any gap inside the group. */
.hero-copy {
  width: 58.7%;
  position: relative;
  z-index: 1;
  align-self: center;
  margin-top: -80px;
}
.hero h1 {
  font-size: clamp(2.625rem, 1.965rem + 2.817vw, 4.5rem);
  max-width: 760px;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero h1 .ai {
  color: var(--accent);
} /* The line under the headline carries on its sentence, so it stands close under it, and the button stands
   further off, as the next step. */
.hero-subtitle {
  font-size: 1.3125rem;
  line-height: 1.55;
  max-width: 620px;
  margin-top: 20px;
  color: var(--muted);
  text-wrap: balance;
}
.hero-cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.hero-illustration {
  position: relative;
  width: 41.3%;
  margin-top: -50px;
  margin-right: -10px;
  pointer-events: none;
}
.hero-illustration canvas {
  display: block;
  width: 100%;
  aspect-ratio: 538.4 / 462.4;
}
.hero-bottom-rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.hero-bottom-rule:before,
.hero-bottom-rule:after {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--slate-400);
  background: var(--paper);
  position: absolute;
  top: -3px;
}
.hero-bottom-rule:before {
  left: 0;
}
.hero-bottom-rule:after {
  right: 0;
}
.hero-bottom-rule span {
  position: absolute;
  left: 63%;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--slate-400);
}

/* Use cases: a strip of cases that moves sideways by itself. Every case leads with whose work it is — the department, then the kind of firm — and what someone there says. */
.cases h2 {
  max-width: 1040px;
}
.cases .section-lead {
  max-width: 590px;
}
/* The strip's bottom rule is the boundary with block 3: the block ends at the rule, and block 3's heading
   stands the page's band under it, as every heading stands under a line on the page. With a band on each
   side of the rule the two ran together into one gap of twice the band (Lucas, 2026-09-29). */
.cases {
  padding-bottom: 0;
}
/* The strip and its three quiet player buttons — previous, pause or play, next — which always show under the
   strip's bottom right corner, drawn in light slate straight on the page with no shape or ground of their own. */
.pool-frame {
  position: relative;
  margin-top: var(--space-l);
}
.pool-controls {
  position: absolute;
  top: 100%;
  right: -8px;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-top: 6px;
}
/* Without the page's script nothing steers the strip; with movement switched off only back and next stay, as
   there is nothing to pause. */
.pool-controls[hidden],
.pool-button[hidden] {
  display: none;
}
.pool-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--slate-400);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.pool-button:hover {
  color: var(--ink);
}
.pool-button:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: -2px;
  border-radius: 4px;
}
.pool-button .icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}
/* The strip's window. The list moves one case at a time and only the cases in view and one beyond each side are
   laid out, so the moving layer is a few cases wide on a phone instead of the whole pool. */
.pool {
  --per-view: 3.4;
  --gap: 32px;
  position: relative;
  padding-block: 18px 22px;
  overflow: hidden;
  touch-action: pan-y;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--black) 48px,
    var(--black) calc(100% - 48px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    var(--black) 48px,
    var(--black) calc(100% - 48px),
    transparent 100%
  );
}
/* Standing still, the strip scrolls by hand, a finger's swipe included, and shows its cases whole to the very edge. */
.pool:not(.is-moving) {
  touch-action: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-mask-image: none;
  mask-image: none;
}
.pool:not(.is-moving) .pool-case {
  scroll-snap-align: start;
}
.pool:focus-visible {
  outline: 2px solid var(--slate-900);
  outline-offset: 5px;
}
/* Three rows run the length of the strip — the department, the firm, what someone there says — and every case hangs
   its parts on them, so each part starts at one height in every case. */
.pool-list {
  --card: calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card);
  grid-template-rows: repeat(3, auto);
  align-content: start;
  column-gap: var(--gap);
  margin: 0;
  padding: 0;
}
/* A case past the few in view leaves the layout but stays in the list, where a screen reader still finds it. */
.pool.is-moving .pool-case:nth-child(n + 7) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.pool-case {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 30px 28px 32px;
  border-radius: 6px;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pool-case + .pool-case:before {
  content: "";
  position: absolute;
  left: calc(var(--gap) / -2);
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--line);
}
/* While one case stands forward, the others step back. */
.pool.is-lifting .pool-case:not(.is-front) {
  opacity: 0.42;
}
.pool-case.is-front {
  z-index: 1;
}
.pool-case.is-front:before,
.pool-case.is-front + .pool-case:before {
  opacity: 0;
}
.pool-dept {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 0.6875rem / 1.5 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate-700);
}
/* The amber square marks the post the agent takes. */
.pool-dept:before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
/* The firm's name is the largest thing in the case, like the sign over its door, and the longest in the pool
   keeps to two lines so the bubbles do not hang far below the short ones. */
.pool-firm {
  margin-top: 12px;
  font-size: clamp(1.5rem, 9cqi, 2.125rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
}
/* What someone in the firm says hangs under its name in a speech bubble. */
.pool-quote {
  position: relative;
  align-self: start;
  margin: 26px 0 0;
  padding: 18px 20px 20px;
  background: var(--amber-50);
  border: 1px solid var(--amber-300);
  border-radius: 14px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--amber-800);
  text-wrap: pretty;
}
/* The bubble's tail points up at the firm that says it. */
.pool-quote:before {
  content: "";
  position: absolute;
  left: 26px;
  top: -8px;
  width: 14px;
  height: 14px;
  background: var(--amber-50);
  border-left: 1px solid var(--amber-300);
  border-top: 1px solid var(--amber-300);
  transform: rotate(45deg);
}

/* Needs: a reception counter drawn in line, one counter holding the six situations together, each beside the
   thing it names. The counter and its things are the reader's troubles, in the page's greys; only the work the
   agent would take over is picked out in amber. */
.needs-head {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 44px);
}
/* The drawing's own line: the steps' drawings in block 4 are drawn in the same one. */
.desk-art,
.desk-crop {
  overflow: visible;
  stroke: var(--slate-500);
  stroke-width: 1.2;
}
.desk-art .art-faint,
.desk-crop .art-faint {
  stroke: var(--slate-300);
}
.desk-art .art-sheet,
.desk-crop .art-sheet {
  fill: var(--paper);
}
/* The drawing keeps its proportions and scales whole, words included; the script reads --placed to know the words
   stand on the drawing and the lines are to be drawn. */
.desk {
  --placed: 1;
  position: relative;
  margin-top: var(--space-l);
  aspect-ratio: 1200 / 545;
  container-type: inline-size;
}
.desk-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.desk-leaders path {
  stroke: var(--slate-400);
  stroke-width: 1;
}
.desk-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.desk-note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14.6em;
  font-size: 1.3cqw;
  line-height: 1.5;
  color: var(--slate-800);
  text-wrap: pretty;
  transition: color 0.18s ease;
}
.desk-crop {
  display: none;
}
.desk-note:hover {
  color: var(--ink);
}
.desk:has(.desk-note:nth-child(1):hover) :is(.obj-1 *, .leader-1),
.desk:has(.desk-note:nth-child(2):hover) :is(.obj-2 *, .leader-2),
.desk:has(.desk-note:nth-child(3):hover) :is(.obj-3 *, .leader-3),
.desk:has(.desk-note:nth-child(4):hover) :is(.obj-4 *, .leader-4),
.desk:has(.desk-note:nth-child(5):hover) :is(.obj-5 *, .leader-5),
.desk:has(.desk-note:nth-child(6):hover) :is(.obj-6 *, .leader-6) {
  stroke: var(--slate-900);
}

/* Too narrow for words on the drawing: the drawing whole, then the six situations as a register under it,
   each led by its own thing cut from the drawing. Counted in em, so a reader's larger
   text brings the register in as a narrower window does. */
@media (max-width: 77.4375em) {
  .desk {
    --placed: 0;
    aspect-ratio: auto;
    container-type: normal;
  }
  .desk-art {
    position: relative;
    height: auto;
    aspect-ratio: 1152 / 336;
  }
  .desk-notes {
    max-width: 44rem;
    margin-top: 40px;
    border-top: 1px solid var(--line);
  }
  .desk-note {
    position: static;
    width: auto;
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  .desk-crop {
    display: block;
    flex: none;
    width: 76px;
    height: 58px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
@media (max-width: 700px) {
  .needs-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .desk-notes {
    margin-top: 28px;
  }
  .desk-note {
    padding: 17px 0 19px;
  }
}

/* The day at the counter. The end of the day is the drawing's resting state; a counter armed for the movement
   starts at the morning and runs to it once. Only the drawing plays: the things cut from it for the narrow register
   always stand at the end of the day. Every moving part turns about its own place on the drawing. */
.scene .window {
  fill: var(--slate-100);
}
.scene :is(.hand-hour, .hand-min, .level) {
  transform-box: view-box;
}
.scene .hand-hour,
.scene .hand-min {
  transform-origin: 954px 170px;
}
.scene .level {
  transform-origin: 1074px 336px;
}
.scene .cost-line {
  stroke-dasharray: 90;
}
.scene.is-armed:not(.is-playing)
  .desk-art
  :is(
    .ring path,
    .mail,
    .chat,
    .ask-2,
    .ask-3,
    .sheet-3,
    .sheet-4,
    .note-1,
    .note-2,
    .note-3,
    .night
  ) {
  opacity: 0;
}
.scene.is-armed:not(.is-playing)
  .desk-art
  :is(.mail, .chat, .sheet-3, .sheet-4) {
  translate: 0 -12px;
}
.scene.is-armed:not(.is-playing) .desk-art :is(.ask-2, .ask-3) {
  translate: 0 8px;
}
.scene.is-armed:not(.is-playing) .desk-art .window {
  fill: var(--paper);
}
.scene.is-armed:not(.is-playing) .desk-art .hand-hour {
  rotate: -210deg;
}
.scene.is-armed:not(.is-playing) .desk-art .hand-min {
  rotate: -720deg;
}
.scene.is-armed:not(.is-playing) .desk-art .level {
  rotate: 4deg;
}
.scene.is-armed:not(.is-playing) .desk-art .bubble {
  translate: -14px 0;
}
.scene.is-armed:not(.is-playing) .desk-art .cost-line {
  stroke-dashoffset: 90;
}
.scene.is-playing .desk-art .cost-line {
  transition: stroke-dashoffset 1.4s 0.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.scene.is-playing .desk-art .ring path {
  animation: ring 0.5s 0.3s 3 backwards;
}
.scene.is-playing .desk-art .ring-2 {
  animation-delay: 0.38s;
}
.scene.is-playing .desk-art .ring-3 {
  animation-delay: 0.46s;
}
@keyframes ring {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
.scene.is-playing
  .desk-art
  :is(
    .mail,
    .chat,
    .ask-2,
    .ask-3,
    .sheet-3,
    .sheet-4,
    .note-1,
    .note-2,
    .note-3
  ) {
  transition:
    opacity 0.35s ease-out var(--d),
    translate 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d);
}
.scene .mail {
  --d: 0.6s;
}
.scene .chat {
  --d: 0.95s;
}
.scene .ask-2 {
  --d: 0.8s;
}
.scene .ask-3 {
  --d: 1.25s;
}
.scene .sheet-3 {
  --d: 0.7s;
}
.scene .sheet-4 {
  --d: 1.1s;
}
.scene .note-1 {
  --d: 1s;
}
.scene .note-2 {
  --d: 1.3s;
}
.scene .note-3 {
  --d: 1.6s;
}
.scene.is-playing .desk-art :is(.hand-hour, .hand-min) {
  transition: rotate 2s 0.3s cubic-bezier(0.45, 0, 0.25, 1);
}
.scene.is-playing .desk-art .night {
  transition: opacity 0.6s 1.7s ease-out;
}
.scene.is-playing .desk-art .window {
  transition: fill 0.8s 1.5s ease-out;
}
.scene.is-playing .desk-art .level {
  transition: rotate 0.7s 1.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.scene.is-playing .desk-art .bubble {
  transition: translate 0.7s 1.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.scene.is-still,
.scene.is-still * {
  transition: none !important;
  animation: none !important;
}

.amber-things .handled {
  stroke: var(--accent);
}
.amber-things .obj-2 .handled {
  --hd: 0s;
}
.amber-things .obj-1 .handled {
  --hd: 0.08s;
}
.amber-things .obj-5 .handled {
  --hd: 0.16s;
}
.amber-things .obj-3 .handled {
  --hd: 0.24s;
}
.scene.amber-things.is-armed:not(.is-playing) .desk-art .handled {
  stroke: var(--slate-500);
}
.scene.amber-things.is-playing .desk-art .handled {
  transition: stroke 0.6s calc(2.4s + var(--hd)) ease-out;
}
.desk.amber-things:has(.desk-note:nth-child(1):hover) .obj-1 .handled,
.desk.amber-things:has(.desk-note:nth-child(2):hover) .obj-2 .handled,
.desk.amber-things:has(.desk-note:nth-child(3):hover) .obj-3 .handled,
.desk.amber-things:has(.desk-note:nth-child(5):hover) .obj-5 .handled {
  stroke: var(--amber-800);
  transition: stroke 0.18s ease;
}

/* How it starts: the agent's recruitment task in three steps, then the trial. Each label is set into the top
   edge of a frame drawn round exactly its own cells, and an arrow stands between every step and the next, so
   the order reads standing still. */
.trial {
  --gap: 44px;
  --pad-top: 40px;
  --art-h: 146px;
}
.trial h2 {
  max-width: 1130px;
}
/* The label rides the frame's top edge and rises 10 px above it, so the lead stands the page's lead-to-body
   step above the label, not above the frame. */
.stages {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: var(--gap);
  margin-top: calc(var(--space-l) + 10px);
}
.stage-group {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stage-label {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 18px;
  padding: 0 10px;
  color: var(--ink);
  line-height: 20px;
  letter-spacing: 0.12em;
  background: var(--paper);
  translate: 0 -50%;
}
.stage-group-trial .stage-label {
  color: var(--amber-800);
  background: linear-gradient(var(--paper) 50%, var(--amber-100) 50%);
}
.stage-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
}
.stage-row,
.stage-trial {
  flex: 1;
  border: 1px solid var(--slate-300);
}
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-top) 28px 34px;
}
.stage + .stage {
  border-left: 1px solid var(--line);
}
.stage-art {
  width: 100%;
  max-width: 215px;
  height: var(--art-h);
  margin-bottom: 23px;
  color: var(--slate-500);
}
/* The drawings' fainter lines, their amber, and the sheets that hide the lines of the stack beneath them. */
.stage-art .art-faint {
  stroke: var(--slate-300);
}
.stage-art .art-accent {
  stroke: var(--accent);
}
.stage-art .art-sheet {
  fill: var(--paper);
}
.stage h3 {
  font-size: 1.6875rem;
  margin-bottom: 15px;
}
.stage > p {
  font-size: 1.0625rem;
  line-height: 1.7;
}
/* Between each step and the next, on the line that parts them, at the height of the drawings. */
.stage-arrow {
  position: absolute;
  z-index: 1;
  top: calc(var(--pad-top) + var(--art-h) / 2);
  left: -0.5px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--paper);
  color: var(--slate-500);
  translate: -50% -50%;
}
.stage-arrow .icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.3;
}
.stage-trial > .stage-arrow {
  left: calc(var(--gap) / -2 - 2px);
}
/* The trial closes the row on the page's amber band, in an amber frame. It carries more weight than a step:
   a fuller ground, a heavier frame, a larger name and mark; its label stays the size of the steps' label. */
.stage-trial {
  background: var(--amber-100);
  border-color: var(--amber-500);
  border-width: 2px;
}
.stage-trial h3 {
  font-size: 1.9375rem;
}
.stage-trial .certificate-mark {
  width: 72px;
  height: 72px;
}
.stage-trial .certificate-mark .icon {
  width: 31px;
  height: 31px;
}
.stage-mark {
  display: flex;
  align-items: center;
}
.certificate-mark {
  border: 1px solid var(--green-600);
  border-radius: 50%;
  width: 62px;
  height: 62px;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--green-700);
}
.certificate-mark:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--green-600);
  border-radius: 50%;
  opacity: 0.6;
}
.certificate-mark .icon {
  width: 27px;
  height: 27px;
  stroke-width: 1;
}
/* The path lights up over a picture that is already whole: an amber line with a marker at its head runs along
   the frames' top edge, each arrow turns amber as the marker passes it, and the trial's mark is stamped at the
   end. Nothing in the block is ever hidden, so it reads the same whether or not the movement plays. */
.stages {
  position: relative;
}
.stage-rail {
  position: absolute;
  z-index: 1;
  top: -0.5px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}
.stage-rail-head {
  position: absolute;
  z-index: 1;
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--paper);
  opacity: 0;
  pointer-events: none;
}
.stages.is-done .stage-rail {
  transform: none;
}
.stage-arrow {
  border-radius: 50%;
  transition:
    background-color 0.35s ease-out,
    color 0.35s ease-out;
}
.is-lit > .stage-arrow {
  background: var(--accent);
  color: var(--white);
  animation: arrow-lit 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-lit > .stage-arrow .icon {
  stroke-width: 1.8;
}
@keyframes arrow-lit {
  from {
    scale: 0.4;
  }
  60% {
    scale: 1.18;
  }
  to {
    scale: 1;
  }
}
.is-stamped .certificate-mark {
  animation: stamp 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-stamped .certificate-mark:before {
  animation: stamp-ring 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-stamped .certificate-mark .icon {
  stroke-dasharray: 22;
  animation: stamp-tick 0.5s 0.25s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes stamp {
  from {
    scale: 1.6;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}
@keyframes stamp-ring {
  from {
    rotate: -120deg;
  }
}
@keyframes stamp-tick {
  from {
    stroke-dashoffset: 22;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* Where the path breaks into rows, the line has nothing straight to run along; the arrows light as the reader
   reaches each of them instead. */
@media (max-width: 1000px) {
  .stage-rail {
    display: none;
  }
}
.trial-terms {
  color: var(--amber-800);
  font-size: 0.8125rem;
  margin-top: auto;
  letter-spacing: 0.04em;
}

/* The passage from block 4 into block 5: in the middle of the boundary between them, the line folds down into a
   wide point — block 4's ground reaching into block 5 — with „A po okresie próbnym" inside it. The gap between
   the two blocks is shorter than between other blocks, so they read as one continuation. */
.passage {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: min(560px, 100% - 2 * var(--gutter));
  pointer-events: none;
}
.passage-shape {
  display: block;
  width: 100%;
  height: 76px;
  overflow: visible;
}
.passage-fill {
  fill: var(--paper);
}
.passage-edge {
  fill: none;
  stroke: var(--amber-500);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.passage-label {
  position: absolute;
  top: 22px;
  left: 50%;
  translate: -50% -50%;
  white-space: nowrap;
  color: var(--amber-800);
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.trial {
  padding-bottom: var(--space-l);
}
.growth {
  padding-top: calc(var(--space-l) + 72px);
}

/* Growth: the ground the agent already holds, and the same kind of work standing beside it. */
.growth {
  background: var(--slate-100);
  border-block: 1px solid var(--line);
  padding-bottom: var(--space-2xl);
}
.growth h2 {
  max-width: 1240px;
}
.growth .section-lead {
  max-width: 665px;
  color: var(--slate-600);
}
/* The map is one drawing: it keeps its proportions and scales whole, labels included. */
.territory {
  aspect-ratio: 1344 / 630;
  margin-top: var(--space-l);
  position: relative;
  container-type: inline-size;
  background-image: radial-gradient(
    circle,
    var(--slate-300) 0.9px,
    transparent 1.3px
  );
  background-size: 22px 22px;
}
.map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-lines path {
  vector-effect: non-scaling-stroke;
}
.map-ring {
  stroke: var(--slate-400);
  stroke-dasharray: 5 6;
}
.map-ring-far {
  stroke-dasharray: 2 7;
}
.map-held {
  fill: var(--amber-50);
  stroke: var(--accent);
  stroke-width: 1.25;
}
.map-tasks {
  position: absolute;
  inset: 0;
}
.map-task {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-0.575em, -0.8em);
  display: grid;
  grid-template-columns: 1.15em minmax(0, max-content);
  column-gap: 0.85em;
  row-gap: 0.7em;
  width: max-content;
  max-width: var(--w, 17.4em);
  font: 400 0.8125rem / 1.6 var(--mono);
  font-size: clamp(0.75rem, 0.967cqw, 0.8125rem);
  color: var(--slate-600);
  text-wrap: balance;
  transition:
    color 0.3s ease-out,
    background-color 0.3s ease-out;
}
.map-mark {
  width: 1.15em;
  height: 1.15em;
  display: grid;
  place-items: center;
  border: 1px solid var(--slate-400);
  margin-top: 0.22em;
  background: var(--slate-100);
  color: var(--white);
  transition:
    background-color 0.25s ease-out,
    border-color 0.25s ease-out;
}
.map-mark .icon {
  width: 0.85em;
  height: 0.85em;
  stroke-width: 1.7;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.35s 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.map-channels {
  grid-column: 2;
  justify-self: start;
  display: flex;
  gap: 0.85em;
  color: var(--amber-600);
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 0.3s 0.15s ease-out,
    transform 0.3s 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.map-channels .icon {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 1.2;
}
.map-task.taken {
  color: var(--amber-800);
}
.taken .map-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.taken .map-mark .icon {
  stroke-dashoffset: 0;
}
.taken .map-channels {
  opacity: 1;
  transform: none;
}
/* While the first frame of the movement is being set, nothing transitions. */
.territory.is-setting *,
.territory.is-setting {
  transition: none !important;
}

/* On the map the three groups of tasks are only a grouping; the outlines already draw them. */
.map-band {
  display: contents;
}
/* A laptop window between 1000 and 1240 px — a wide screen under Windows' 125–150 % scaling counts here: the same
   map, drawn taller so its labels keep their 12 px and wrap onto one more line. Counted in em, so a reader's larger
   text moves him along the same steps as a narrower window does. */
@media (max-width: 77.4375em) {
  .territory {
    aspect-ratio: 1344 / 780;
  }
  /* Where a task's own place leaves its words across a boundary at this size, --xc, --yc and --wc on the task
     move it or narrow it. */
  .map-task {
    left: var(--xc, var(--x));
    top: var(--yc, var(--y));
    max-width: var(--wc, 13.5em);
  }
}

@media (max-width: 62.4375em) {
  /* Too narrow for the map: the same tasks as three bands, one under the other, in the map's own line language —
     the ground the agent holds today in a solid amber frame, the nearer boundary dashed, the farther dotted. The
     amber fills band by band in the same three steps; a task's place never depends on whether it is taken. */
  .territory {
    aspect-ratio: auto;
    background: none;
  }
  .map-lines {
    display: none;
  }
  .map-tasks {
    position: static;
    display: grid;
    row-gap: 18px;
  }
  .map-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    outline: 1px dashed var(--slate-400);
    outline-offset: 0;
    transition: outline-color 0.4s ease-out;
  }
  .band-far {
    outline-style: dotted;
  }
  .map-band.is-held {
    outline: 1.5px solid var(--accent);
  }
  .band-near > :last-child {
    grid-column: span 2;
  }
  .map-task {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    padding: 22px 18px 24px 14px;
    font-size: 0.75rem;
    align-content: start;
    background: var(--slate-100);
  }
  .map-task.taken {
    background: var(--amber-50);
  }
}
@media (max-width: 700px) {
  .map-band {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-task {
    padding: 18px 10px 20px 8px;
  }
}

/* Honest answers: the page's one white band, between the map's grey and the ask's grey, so the step
   between them reads. Every answer stands open and nothing in the block moves: terms that fold, or
   slide in as the reader arrives, read as fine print. */
.faq {
  background: var(--white);
}
/* The heading stands in its own column on the left, the questions run down the right. */
.faq > .wrap {
  display: grid;
  grid-template-columns: 36% minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}
.faq h2 {
  max-width: 640px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
/* One row per question, whatever their number: the question in the display face, its answer under it in
   the text face, in ink rather than grey. */
.faq-item {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}
.faq-item h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.faq-answer {
  max-width: 38em;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--slate-800);
}
/* Too narrow for the heading's own column: it goes back on top of the questions. */
@media (max-width: 1000px) {
  .faq > .wrap {
    display: block;
  }
  .faq-list {
    margin-top: var(--space-l);
  }
}

/* The ask between block 3 and block 4: one sentence running on into the button, the two centred together on
   block 7's ground, so it reads as the same ask in brief. */
.ask-band {
  background: var(--slate-100);
  border-block: 1px solid var(--line);
  padding-block: clamp(36px, 26px + 2.4vw, 60px);
}
.ask-band .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 32px;
  text-align: center;
}
.ask-band h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.375rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
}
@media (max-width: 700px) {
  .ask-band .wrap {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Contact: the one form on the page. */
.contact {
  background: var(--slate-100);
  border-block: 1px solid var(--line);
  scroll-margin-top: 32px;
}
.contact h2 {
  max-width: 950px;
}
/* The heading and its line on the left, the form on the right, the form's foot level with the line's. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 88px;
  align-items: end;
}
.contact-verdict {
  margin-top: var(--space-m);
  font: 400 1.6875rem / 1.34 var(--serif);
  font-optical-sizing: auto;
  max-width: 535px;
}
.contact-action {
  border-left: 1px solid var(--slate-300);
  padding-left: 54px;
  display: flex;
  flex-direction: column;
}
#contact-form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.phone-field {
  position: relative;
  flex: 1;
  min-width: 180px;
}
/* The field's name stands inside it as its placeholder would while it is empty and unfocused, and sits on its top
   edge in the page's small mono print while the reader is in it or has written in it, so it is never gone. */
.phone-label {
  position: absolute;
  top: 25px;
  left: 18px;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--slate-500);
  pointer-events: none;
}
input[type="tel"]:focus + .phone-label,
input[type="tel"]:not(:placeholder-shown) + .phone-label {
  top: 0;
  left: 13px;
  padding-inline: 4px;
  background: var(--white);
  font: 500 0.6875rem / 1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-600);
}
input[type="tel"] {
  width: 100%;
  height: 50px;
  border: 1px solid var(--slate-500);
  border-radius: 4px;
  background: var(--white);
  padding: 13px 17px;
  font-size: 1rem;
  caret-color: var(--accent);
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
input[type="tel"]:hover {
  border-color: var(--slate-700);
}
.invalid input[type="tel"] {
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px var(--red-100);
}
/* What is wrong with the number, under the field, until the reader types again. */
.form-error {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--red-700);
}
#contact-form .button {
  min-height: 50px;
  gap: 17px;
  padding-inline: 18px;
}
#contact-form .button:disabled {
  opacity: 0.6;
  cursor: progress;
}
/* A field no person sees or reaches: only a program filling every field it finds writes in it. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* What the form says after sending. The line that says it worked stands where the field and
   the button stood, at their height, so nothing under it moves. */
.form-status {
  flex-basis: 100%;
  font-size: 0.9375rem;
  line-height: 1.45;
  outline: none;
}
/* The button and the two lines set a display of their own, which would outrank `hidden`. */
#contact-form [hidden] {
  display: none;
}
.form-sent {
  min-height: 50px;
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  animation: settle 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* The line that says it worked settles into the place the field left. */
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes appear {
  from {
    opacity: 0;
  }
}
.form-failed {
  color: var(--red-700);
}
.form-failed a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* The call's length and who rings, beside the button; the two faces lead down to the founders. */
.contact-who {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.contact-who:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-faces {
  display: flex;
  flex: none;
}
.contact-faces img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
  border: 2px solid var(--slate-100);
}
.contact-faces img + img {
  margin-left: -12px;
}
.contact-legal {
  margin-top: 18px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--slate-600);
  max-width: 33em;
}
.contact-legal a {
  color: var(--slate-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Founders. */
.founders-heading {
  margin-bottom: var(--space-l);
}
.founder-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
.founder {
  display: flex;
  flex-direction: column;
}
.founder-portrait {
  position: relative;
  margin: 0;
}
.founder-portrait img {
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
}
/* The two photographs come from different tones, so the page loads copies graded to one tone. */
/* The name sits on a white strip that overlaps the bottom edge of the photograph. */
.founder-portrait figcaption {
  position: absolute;
  left: 0;
  bottom: -21px;
  max-width: 92%;
  background: var(--white);
  padding: 13px 32px 13px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.founder-mark {
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--slate-700);
}
.founder h3 {
  font-size: 2.0625rem;
  margin: 0;
  font-weight: 400;
}
.founder-bio {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 55px 0 0;
}
.founder-bio > p {
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.7;
}
/* What each founder answers for leads the bio, in the headings' face. */
.founder-bio > p:first-child {
  max-width: 25em;
  margin-bottom: 28px;
  font: 400 1.5625rem / 1.42 var(--serif);
  font-optical-sizing: auto;
}
/* The rule over the credentials runs the portrait's width; the words under it stop near seventy characters. */
.founder-bio .credentials {
  max-width: none;
  padding-right: max(0px, 100% - 36em);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* The page ends on the ask: after the founders, the way back to the number. */
.founders-ask {
  margin-top: 72px;
  text-align: center;
}

.site-footer {
  position: relative;
  background: var(--white);
  padding-block: 43px;
  border-top: 1px solid var(--line);
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.site-footer a:first-child {
  margin-right: auto;
}
/* The address stands alone on the left, so no dot parts it from the rest. */
.site-footer a:first-child + .footer-dot {
  display: none;
}
/* A finger gets a taller target than the line of small print shows. */
.site-footer a {
  padding-block: 12px;
  margin-block: -12px;
}
/* The small print stands at the column's left edge and wraps near seventy characters. */
.site-footer .footer-company {
  display: grid;
  grid-template-columns: minmax(0, 72ch);
  margin-block: 18px 0;
  line-height: 1.8;
}
.site-footer a:hover {
  text-decoration: underline;
  color: var(--amber-800);
}
.site-footer .lang {
  font-size: inherit;
  letter-spacing: inherit;
}
/* Only the address pushes the rest to the right, never the switch's first link. */
.site-footer .lang a {
  margin-right: 0;
}
/* The entry that reopens the consent window is a button, drawn as one more link of the footer. */
.site-footer .cookie-settings {
  padding: 12px 0;
  margin-block: -12px;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-footer .cookie-settings:hover {
  text-decoration: underline;
  color: var(--amber-800);
}

/* The consent window in the page's faces and colours; its two answers carry equal weight, both drawn as the
   page's dark button, so neither is pushed. The window's own stylesheet loads after this one, so each rule here
   starts from :root to outrank it. */
:root #cc-main {
  --cc-font-family: var(--sans);
  --cc-bg: var(--white);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--slate-600);
  --cc-btn-primary-bg: var(--slate-900);
  --cc-btn-primary-color: var(--white);
  --cc-btn-primary-border-color: var(--slate-900);
  --cc-btn-primary-hover-bg: var(--slate-700);
  --cc-btn-primary-hover-color: var(--white);
  --cc-btn-primary-hover-border-color: var(--slate-700);
  --cc-btn-secondary-bg: var(--white);
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--slate-300);
  --cc-btn-secondary-hover-bg: var(--slate-100);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--slate-400);
  --cc-btn-border-radius: 5px;
  --cc-modal-border-radius: 8px;
  --cc-separator-border-color: var(--line);
  --cc-toggle-on-bg: var(--amber-600);
  --cc-toggle-readonly-bg: var(--slate-300);
  --cc-link-color: var(--ink);
  --cc-cookie-category-block-bg: var(--slate-50);
  --cc-cookie-category-block-border: var(--line);
  --cc-cookie-category-block-hover-bg: var(--slate-100);
  --cc-cookie-category-block-hover-border: var(--slate-300);
  --cc-footer-bg: var(--slate-50);
  --cc-footer-border-color: var(--line);
}
:root #cc-main .cm__btn,
:root #cc-main .pm__btn {
  font: 500 0.75rem / 1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:root #cc-main .cm__title,
:root #cc-main .pm__title {
  font-family: var(--serif);
  font-weight: 500;
}
/* The first-visit window is a strip across the bottom drawn like the footer: white, one hairline above, the
   page's column, the title as the footer's small mono print, the words and the two answers on one row. */
:root #cc-main .cm--bar {
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgb(15 23 42 / 0.05);
}
:root #cc-main .cm--bar.cm--inline .cm__body {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1344px;
  align-items: center;
  gap: 40px;
  padding-block: 18px;
}
:root #cc-main .cm--bar.cm--inline .cm__texts {
  flex: 1;
  padding: 0;
}
:root #cc-main .cm--bar.cm--inline .cm__title {
  padding: 0 0 6px;
  font: 500 0.6875rem / 1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
:root #cc-main .cm--bar.cm--inline .cm__desc {
  max-width: 110ch;
  margin-top: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--slate-600);
}
:root #cc-main .cm--bar.cm--inline .cm__btns {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  max-width: none;
  padding: 0;
  border: 0;
}
:root #cc-main .cm--bar.cm--inline .cm__btn-group {
  display: flex;
  gap: 8px;
}
:root #cc-main .cm--bar.cm--inline .cm__btn {
  min-width: 0;
  margin: 0;
  padding: 12px 18px;
  white-space: nowrap;
}
/* "Choose myself" opens the settings, so it reads as one more footer link, not a third answer. */
:root #cc-main .cm--bar.cm--inline .cm__btn--secondary {
  order: -1;
  padding-inline: 0;
  color: var(--muted);
  background: none;
  border: 0;
}
:root #cc-main .cm--bar.cm--inline .cm__btn--secondary:hover {
  text-decoration: underline;
  color: var(--amber-800);
}
:root #cc-main .cm--bar.cm--inline .cm__btn-group:has(.cm__btn--secondary) {
  order: -1;
}
@media (max-width: 900px) {
  :root #cc-main .cm--bar.cm--inline .cm__body {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-block: 16px;
  }
  :root #cc-main .cm--bar.cm--inline .cm__btns {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}
/* On a phone the library pads, stacks and splits the strip with a rule of its own (marked important); here the
   strip keeps the page's gutter, the two answers share one row and the settings link sits under them. */
@media (max-width: 640px) {
  :root #cc-main .cm--bar.cm--inline .cm__body {
    gap: 12px !important;
    padding-block: 14px 10px !important;
  }
  :root #cc-main .cm--bar.cm--inline .cm__title,
  :root #cc-main .cm--bar.cm--inline .cm__desc,
  :root #cc-main .cm--bar.cm--inline .cm__btns {
    padding-inline: 0 !important;
  }
  :root #cc-main .cm--bar.cm--inline .cm__btns {
    flex-direction: column-reverse !important;
    align-items: stretch;
    gap: 2px;
    border-top: 0 !important;
  }
  :root #cc-main .cm--bar.cm--inline .cm__btn-group {
    flex-direction: row !important;
    margin: 0 !important;
  }
  :root #cc-main .cm--bar.cm--inline .cm__btn + .cm__btn {
    margin: 0 !important;
  }
  :root #cc-main .cm--bar.cm--inline .cm__btn {
    flex: 1 !important;
  }
  :root #cc-main .cm--bar.cm--inline .cm__btn--secondary {
    padding-block: 10px;
  }
}
/* On the narrowest phones the two answers give up side padding, so the longer one, „Nie zgadzam się", stands
   whole in its half of the row. */
@media (max-width: 370px) {
  :root #cc-main .cm--bar.cm--inline .cm__btn:not(.cm__btn--secondary) {
    padding-inline: 6px;
  }
}
/* While the first-visit strip stands over the foot of the screen, whatever the keyboard reaches scrolls clear of
   it, the footer too, for which the page gains the strip's height at its end; the height is measured into
   --consent-strip. */
html.show--consent {
  scroll-padding-bottom: calc(var(--consent-strip, 0px) + 16px);
}
html.show--consent body {
  padding-bottom: var(--consent-strip, 0px);
}

@media (min-width: 1550px) {
  .header-inner {
    max-width: 1344px;
    margin-inline: auto;
  }
}

@media (max-width: 1150px) {
  :root {
    --gutter: 32px;
  }
  .hero-illustration {
    width: 39%;
    margin-top: 10px;
  }
  .hero-copy {
    width: 61%;
    margin-top: -20px;
  }
  .hero-subtitle {
    max-width: 380px;
  }
  .hero-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .pool {
    --per-view: 2.3;
    --gap: 24px;
  }
  .trial {
    --gap: 36px;
    --art-h: 119px;
  }
  .stage {
    padding-inline: 20px;
  }
  .stage-art {
    max-width: 175px;
  }
  .stage h3 {
    font-size: 1.5rem;
  }
  .contact-action {
    padding-left: 34px;
  }
  .contact-layout {
    column-gap: 55px;
  }
  .founder-pair {
    gap: 40px;
  }
  .founder h3 {
    font-size: 1.75rem;
  }
  .founder-bio {
    padding: 48px 0 0;
  }
}

/* A tablet: the three steps keep their row and the trial takes its own under them, the arrow pointing down. */
@media (min-width: 701px) and (max-width: 1000px) {
  .stages {
    grid-template-columns: 1fr;
    row-gap: var(--gap);
  }
  .stage-trial > .stage-arrow {
    top: calc(var(--gap) / -2 - 2px);
    left: 50%;
    rotate: 90deg;
  }
}

/* Between a tablet held upright and a phone: one case in the middle and the edges of its neighbours. */
@media (max-width: 900px) {
  .pool {
    --per-view: 1.6;
  }
  /* With one case in view there is no neighbour to line up with, so the bubble hangs right under the firm's name. */
  .pool-list {
    grid-template-rows: auto;
    align-items: start;
  }
  .pool-case {
    display: block;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 22px;
  }
  .wrap {
    width: calc(100% - 44px);
  }
  .site-header {
    height: 64px;
  }
  /* Drawn a little smaller on a phone, so the language switch and the button fit beside it. */
  .logo {
    width: 107px;
    height: 16px;
  }
  .header-right {
    gap: 12px;
  }
  .site-header .lang {
    gap: 6px;
  }
  .header-right .button {
    position: relative;
    font-size: 0.6875rem;
    min-height: 34px;
    padding: 9px 10px;
    gap: 8px;
  }
  /* The button is drawn small to fit the bar, but a finger gets the bar's full height. */
  .header-right .button:after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }
  .header-right .button .icon {
    width: 13px;
    height: 13px;
  }
  /* On a phone the drawing shrinks to stand beside the button, so the headline, the line under it and the
     button fill the first screen; the words' group opens into the hero's grid for that. */
  .hero {
    padding-top: 57px;
    padding-bottom: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
  }
  .hero-copy {
    display: contents;
  }
  .hero h1 {
    grid-column: 1 / -1;
    max-width: 100%;
    line-height: 1.08;
  }
  .hero-subtitle {
    grid-column: 1 / -1;
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 310px;
  }
  .hero-cta {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    margin-top: 36px;
    gap: 12px;
  }
  /* The drawing's box keeps room under the shape for its tallest pose, so the box hangs that much below the
     line under the button and the shape's foot comes level with the line's. On a phone narrower than 390 px
     the drawing gives up width first, so the button and the line under it keep theirs. */
  .hero-illustration {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    width: clamp(88px, 100vw - 262px, 128px);
    margin: 0 -6px -4px 0;
  }
  .hero-bottom-rule span {
    left: 70%;
  }
  .section-lead {
    font-size: 1.0625rem;
    line-height: 1.7;
  }
  .pool {
    --per-view: 1.22;
    --gap: 14px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pool-case {
    padding: 24px 20px 26px;
  }
  .pool-firm {
    font-size: 1.75rem;
  }
  /* On a phone the path runs down the page, one frame over the other, the arrows pointing down. */
  .trial {
    --gap: 48px;
    --pad-top: 34px;
    --art-h: 130px;
  }
  .stages {
    grid-template-columns: 1fr;
    row-gap: var(--gap);
  }
  .stage-label {
    font-size: 0.6875rem;
  }
  .stage-row {
    grid-template-columns: 1fr;
  }
  .stage {
    padding: var(--pad-top) 22px 29px;
  }
  .stage + .stage {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .stage-arrow {
    top: -0.5px;
    left: 50%;
    rotate: 90deg;
  }
  .stage-trial > .stage-arrow {
    top: calc(var(--gap) / -2 - 2px);
    left: 50%;
  }
  .stage-art {
    width: 190px;
    max-width: none;
    margin-bottom: 21px;
  }
  .stage-mark {
    height: auto;
  }
  .stage h3 {
    font-size: 1.6875rem;
  }
  .stage-trial .certificate-mark {
    width: 62px;
    height: 62px;
  }
  .certificate-mark:before {
    inset: 4px;
  }
  .stage-trial .certificate-mark .icon {
    width: 28px;
    height: 28px;
  }
  .trial-terms {
    margin-top: 22px;
  }
  .faq-item {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 22px 0 24px;
  }
  .faq-item h3 {
    font-size: 1.25rem;
  }
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-verdict {
    font-size: 1.3125rem;
  }
  .contact-action {
    padding: 31px 0 0;
    border-left: 0;
    border-top: 1px solid var(--slate-300);
    margin-top: 33px;
  }
  #contact-form {
    flex-direction: column;
  }
  #contact-form .button {
    width: 100%;
    min-height: 48px;
  }
  .phone-field {
    width: 100%;
  }
  input[type="tel"] {
    font-size: 1rem;
    min-height: 52px;
  }
  .founders-heading {
    display: block;
  }
  .founder-pair {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .founder-portrait figcaption {
    padding: 11px 24px 11px 16px;
  }
  .founder-bio {
    padding-top: 44px;
  }
  .founder-bio > p {
    line-height: 1.8;
  }
  .founder-bio > p:first-child {
    font-size: 1.328rem;
    line-height: 1.42;
  }
  .site-footer {
    padding-block: 30px;
  }
  .site-footer .wrap {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1.8;
  }
  .site-footer a:first-child {
    margin: 0;
  }
  .site-footer .footer-dot {
    display: none;
  }
  .button {
    font-size: 0.6875rem;
  }
}

/* On the narrowest phones the top bar's button drops its arrow and the gaps close up, so the mark, the language
   switch and the button fit inside the page's margins and the page never scrolls sideways. */
@media (max-width: 360px) {
  .header-inner {
    gap: 4px;
  }
  .header-right {
    gap: 6px;
  }
  .site-header .lang {
    gap: 4px;
  }
  .header-right .button .icon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
  .is-lit > .stage-arrow,
  .is-stamped .certificate-mark,
  .is-stamped .certificate-mark:before,
  .is-stamped .certificate-mark .icon {
    animation: none;
  }
  .form-sent {
    animation-name: appear;
  }
}
@media print {
  .site-header {
    position: static;
  }
  .stage,
  .pool-case,
  .founder,
  .faq-item {
    break-inside: avoid;
  }
}