/*
 * Bear's page. The pictures are soft light with film grain: out-of-focus colour, a glowing form, a white sign cut
 * out of light (art/make.html). The type is plain: the wordmark and one line in Bear Serif, the rest in clean sans.
 * Glass lies on top: a few controls, and the way in. A service's own page is plain paper: its name, its picture and
 * a few short chapters. Everything that moves is an opacity or a transform, so nothing lags.
 */

@font-face { font-family: "Bear Serif"; src: url("assets/fonts/BearSerif.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/Archivo.woff2") format("woff2"); font-weight: 400 500; font-stretch: 100% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/Geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #ffffff;
  --mist: #eceef1;
  --ink: #0d1016;
  --ink-2: #535a66;
  --ink-3: #888e99;
  --rule-2: rgb(13 16 22 / 0.14);
  --blue: #0131f9;
  --garden: #1d5a4c;
  --night: #0d1016;

  --glass-fill: rgb(255 255 255 / 0.62);
  --glass-shadow: 0 1px 2px rgb(13 16 22 / 0.06), 0 10px 28px -12px rgb(13 16 22 / 0.24);
  /* Film grain: light and dark specks with their own transparency. Over the still pictures it is blended in, as
     film grain is; where something fades beneath it, it is laid on plainly and faintly, so nothing lags. */
  --grain: url("assets/grain.png") 0 0 / 140px;

  --serif: "Bear Serif", "Baskerville", "Times New Roman", serif;
  --display: "Archivo", "Geist", ui-sans-serif, system-ui, sans-serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(20px, 3.2vw, 48px);
  --column: min(100% - 2 * var(--gutter), 1760px);
  /* The hero's first screen: as tall as the screen, but never so tall for its width that the bear would crowd the
     words. Beneath it the garden runs on a little. */
  --first: min(100svh, 66.7vw);
  --under: clamp(64px, 7vw, 108px);
  /* How far the way in keeps from the screen's foot. */
  --inset: max(clamp(18px, 2.4vw, 34px), env(safe-area-inset-bottom));

  --spring-soft: linear(0, 0.0161 2.1%, 0.0585 4.2%, 0.1199 6.2%, 0.1938 8.3%, 0.5243 16.7%, 0.601 18.8%, 0.6717 20.8%, 0.7358 22.9%, 0.7928 25%, 0.8427 27.1%, 0.8857 29.2%, 0.922 31.2%, 0.9521 33.3%, 0.9765 35.4%, 1.0108 39.6%, 1.0296 43.8%, 1.0384 50%, 0.9986 97.9%, 1);
  --spring-snap: linear(0, 0.0248 2.1%, 0.09 4.2%, 0.183 6.2%, 0.2927 8.3%, 0.5275 12.5%, 0.6396 14.6%, 0.7422 16.7%, 0.8327 18.8%, 0.9097 20.8%, 0.9727 22.9%, 1.0221 25%, 1.0587 27.1%, 1.0839 29.2%, 1.0991 31.2%, 1.106 33.3%, 1.1062 35.4%, 1.0928 39.6%, 1.0138 54.2%, 0.9923 62.5%, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Past the page's ends the screen shows the colour the page begins and ends in. */
html { background: linear-gradient(var(--garden) 50%, var(--night) 50%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-page="service"] { background: linear-gradient(var(--paper) 50%, var(--night) 50%); }
html[data-page="lost"] { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
::selection { background: color-mix(in srgb, var(--blue) 15%, transparent); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
svg, img { display: block; }
button { font: inherit; color: inherit; }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 50; padding: 10px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; text-decoration: none; translate: 0 -200%; }
.skip:focus-visible { translate: 0; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── Glass: a frosted surface and its shadow, nothing at the edges ── */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: var(--glass-shadow);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .glass { background: var(--paper); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Where a browser cannot blur what lies behind, the open card is nearly solid, so its fields stay easy to read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ask-card[data-open] { --glass-fill: rgb(250 251 252 / 0.97); } }
/* A soft light that follows the pointer across a piece of glass (site.js says where it is). */
[data-light]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(var(--light, 90px) circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / var(--shine, 0.36)), transparent 70%); opacity: 0; transition: opacity 0.4s ease-out; pointer-events: none; }
[data-light]:hover::before { opacity: 1; }

/* ── An orb: a round glass button that is its icon until you reach for it. Then what it holds slides out beside
   it, and its neighbours make room. A link's icon turns into the arrow that says it leads somewhere. ── */
.orb {
  --orb-opens: grid-template-columns 0.6s var(--spring-soft), column-gap 0.6s var(--spring-soft), padding 0.6s var(--spring-soft), background-color 0.25s ease-out, color 0.3s ease-out;
  position: relative;
  flex: none;
  display: inline-grid;
  /* The icon's column has its own width and keeps to the far edge, so the icon stays still while the label's
     column opens. */
  grid-template-columns: 0fr 20px;
  justify-content: end;
  column-gap: 0;
  align-items: center;
  width: max-content;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: var(--orb-opens), scale 0.5s var(--spring-snap);
  -webkit-tap-highlight-color: transparent;
}
.orb-label { min-width: 0; overflow: hidden; white-space: nowrap; font: 500 14.5px/1 var(--sans); letter-spacing: -0.01em; opacity: 0; transition: opacity 0.18s ease-out; }
.orb:has(.orb-label):is(:hover, :focus-visible) { grid-template-columns: 1fr 20px; column-gap: 9px; padding: 0 12px 0 17px; }
.orb:is(:hover, :focus-visible) .orb-label { opacity: 1; transition: opacity 0.3s ease-out 0.08s; }
.glyph { display: grid; }
.glyph > * { grid-area: 1 / 1; transition: opacity 0.25s ease-out, scale 0.5s var(--spring-snap), rotate 0.5s var(--spring-snap); }
.orb-link .i-out { opacity: 0; scale: 0.6; rotate: -45deg; }
.orb-link:is(:hover, :focus-visible) .glyph > :first-child { opacity: 0; scale: 0.6; rotate: 45deg; }
.orb-link:is(:hover, :focus-visible) .i-out { opacity: 1; scale: 1; rotate: 0deg; }
.orb.glass:hover { --glass-fill: rgb(255 255 255 / 0.82); }
.orb:active { scale: 0.95; transition-duration: 0.12s; }
.orb:focus-visible { outline-offset: 2px; }
.orb[aria-pressed="true"] { --glass-fill: rgb(13 16 22 / 0.88); color: var(--paper); }

/* ── The row in the corner: the languages and sign in stay with you all the way down. On the landing page the
   agent's view slides out beside them at the foot of the page; a service's page has it from the top; a phone has
   none. Everything in the row opens sideways. ── */
.top { position: fixed; top: 0; right: 0; z-index: 30; display: flex; justify-content: flex-end; gap: 10px; padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0 0; pointer-events: none; }
.top > * { pointer-events: auto; }
.orb-late { visibility: hidden; opacity: 0; scale: 0.5; translate: 44px 0; transition: var(--orb-opens), translate 0.25s ease-in, scale 0.25s ease-in, opacity 0.2s ease-in, visibility 0s 0.25s; }
.top[data-full] .orb-late { visibility: visible; opacity: 1; scale: 1; translate: 0; transition: var(--orb-opens), translate 0.7s var(--spring-snap), scale 0.7s var(--spring-snap), opacity 0.25s ease-out, visibility 0s; }
.top[data-full] .orb-late:active { scale: 0.95; }
/* Over the picture the glass carries white glyphs, as Apple's does over a dark photograph. */
.top[data-tone="dark"] .orb.glass { --glass-fill: rgb(255 255 255 / 0.18); --glass-shadow: 0 10px 28px -12px rgb(0 0 0 / 0.3); color: #fff; }
.top[data-tone="dark"] .orb.glass:hover { --glass-fill: rgb(255 255 255 / 0.3); }

/* The languages: the globe's own glass slides out to the side and shows the two flags, small, the one you are on
   ringed. */
.orb-lang { grid-template-columns: 0fr 44px; padding: 0; overflow: hidden; cursor: default; }
.orb-lang:is(:hover, :focus-within, [data-open]) { grid-template-columns: 1fr 44px; }
.orb-lang:active { scale: none; }
.orb-lang-head { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: none; cursor: pointer; }
.orb-lang-flags { min-width: 0; overflow: hidden; display: flex; align-items: center; }
.orb-lang-flags a { flex: none; display: grid; place-items: center; width: 34px; height: 44px; opacity: 0; transition: opacity 0.15s ease-out; }
.orb-lang-flags a:first-child { width: 44px; padding-left: 10px; }
.orb-lang-flags a:last-child { margin-right: -4px; }
.orb-lang:is(:hover, :focus-within, [data-open]) .orb-lang-flags a { opacity: 1; transition: opacity 0.3s ease-out 0.12s; }
.flag { width: 16px; height: 16px; border-radius: 50%; transition: scale 0.4s var(--spring-snap); }
.orb-lang-flags [aria-current] .flag { outline: 1.25px solid currentColor; outline-offset: 2.5px; }
.orb-lang-flags a:hover .flag { scale: 1.12; }
.orb-lang-flags a:focus-visible { outline: none; }
.orb-lang-flags a:focus-visible .flag { outline: 2px solid var(--blue); outline-offset: 2.5px; }

/* ── The hero: one picture, edge to edge, square at its corners: the name top left, the glass row top right,
   who backs Bear bottom left, and the way in at the middle of the foot, where it stays down the whole page. The
   bear sits a little left of the middle, so that its body lies under the hero's line, which stands on it. The
   picture is placed by hand, not stretched to fit: its first-screen part always covers the first screen, and the
   rest of the garden runs on beneath. ── */
.hero {
  /* The picture's width: the whole hero's (a container's unit measures inside its gutters, so they are added
     back), or wider when the first screen is tall for its width. */
  --wide: max(100cqw + 2 * var(--gutter), var(--first) * 16 / 9);
  /* The name's height, which is also the height of the row it stands in. */
  --mark: clamp(44px, 5vw, 96px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  align-items: center;
  min-height: calc(var(--first) + var(--under));
  padding: clamp(18px, 2.4vw, 34px) var(--gutter) calc(clamp(18px, 2.4vw, 34px) + var(--under));
  background: var(--garden);
  color: #fff;
}
.hero-art { position: absolute; z-index: -2; left: 50%; top: calc((var(--first) - var(--wide) * 9 / 16) / 2); width: var(--wide); translate: -50% 0; }
.hero-art img { width: 100%; height: auto; }
.hero::before, .cover::after, .plate::after, .mind::after, .foot::after { content: ""; position: absolute; inset: 0; background: var(--grain); pointer-events: none; }
.hero::before, .cover::after, .plate::after { mix-blend-mode: overlay; }
.hero::before { z-index: -1; opacity: 0.68; }
.hero-mark { grid-column: 1 / -1; grid-row: 1; align-self: start; }
.hero-mark .wordmark { height: var(--mark); width: auto; fill: currentColor; }
/* The words are set against the picture, not the window, so that at every size they stand on the same part of
   the bear, with the same room past each end of their longer line. Their size is a part of the picture's width.
   Their height on the picture is fixed too: the rows above and beneath them (the name's, and who backs Bear's,
   54px) are not equally tall, which alone would carry the words up or down as the window changes, so that
   difference is taken out, and they are set a touch under the first screen's middle, on the bear's body under
   its head. The longer line is longer in English than in Finnish, so English is set a size smaller and keeps
   the same room. */
.hero-say { --say: 0.0425; grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 13em; text-align: center; font: 400 min(var(--wide) * var(--say), 6.25rem) / 1.04 var(--sans); letter-spacing: -0.04em; translate: 0 calc((54px - var(--mark)) / 2 + var(--wide) * 0.0066); }
.hero-say:lang(en) { --say: 0.039; }
.hero-q, .hero-a { display: block; text-wrap: balance; }
/* The serif part is set a touch larger, as a serif needs beside a sans, and its taller letters need a little
   more room above them for the lines to look the same distance apart. */
.hero-a { margin-top: 0.03em; font: 400 1.08em / 1.04 var(--serif); letter-spacing: -0.02em; }
/* Who backs Bear: its mark and the words, in the corner under the name. Reach for them and the arrow that says
   they lead somewhere comes in beside them. Where the window is taller than the first screen's picture, they
   come down to the line of the way in, as far as the garden beneath the first screen goes. */
.hero-yc { grid-column: 1; grid-row: 3; justify-self: start; position: relative; display: inline-flex; align-items: center; gap: 11px; height: 54px; translate: 0 clamp(0px, 100svh - var(--first), var(--under)); color: #fff; font: 500 15.5px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.yc { flex: none; width: clamp(24px, 1.9vw, 28px); height: auto; aspect-ratio: 1; transition: scale 0.5s var(--spring-snap); }
.hero-yc:active .yc { scale: 0.94; transition-duration: 0.12s; }
/* The arrow waits just past the words' edge and takes no room until it shows. */
.hero-yc .i-out { position: absolute; left: calc(100% + 5px); width: 17px; height: 17px; stroke-width: 1.7; opacity: 0; translate: -5px 5px; transition: opacity 0.25s ease-out, translate 0.5s var(--spring-snap); }
.hero-yc:is(:hover, :focus-visible) .i-out { opacity: 1; translate: 0; }
/* ── What Bear is: a few sentences under the bear, in the middle of the white between the garden and the
   reasons, with the same air above them and beneath them. They are something to read, not to press, so they have
   no surface of their own and are set as the reasons are: the first sentence in ink, the rest quieter. ── */
.what { --air: clamp(84px, 7.2vw, 112px); display: grid; place-items: center; padding: var(--air) var(--gutter); }
.say { display: grid; justify-items: center; gap: clamp(16px, 1.7vw, 26px); max-width: 25em; color: var(--ink-2); font: 400 clamp(21px, 0.9rem + 1.1vw, 32px) / 1.24 var(--display); font-stretch: 108%; letter-spacing: -0.03em; text-align: center; text-wrap: balance; }
.say strong { color: var(--ink); font-weight: 400; }
/* The bear's drawing reaches the very edge of its frame, so the frame must not cut it (the same for the mark in
   the foot): at a small size a cut edge shows as a shaved back leg. */
.say-bear { width: auto; height: clamp(40px, 3.5vw, 56px); aspect-ratio: 1000 / 758.9; overflow: visible; }

/* ── Section titles ── */
.section-title { font: 400 clamp(2rem, 1.25rem + 2vw, 3.25rem) / 1 var(--display); font-stretch: 112%; letter-spacing: -0.035em; }

/* ── Why Bear: four reasons on paper, each with a sign in a colour of its own: people in blue, a rising chart in
   neon green, a hub and what it connects in orange, a price tag in pink. On a wide screen the reasons stand one
   under another on the right; the one you reach for opens, and its sign glows near the middle of the panel. On a
   narrower one each reason is set out under its own sign, two to a row, and on a phone they take turns. ── */
.why { width: var(--column); margin: 0 auto; }
.mind-wrap { position: relative; margin-top: clamp(20px, 3svh, 32px); }
/* What turns the reasons on a phone: the panel's two edges, and the dots that say which is showing. */
.mind-turn { display: none; }
.mind {
  position: relative;
  isolation: isolate;
  display: grid;
  border-radius: clamp(24px, 2.6vw, 40px);
  background: var(--mist);
  overflow: hidden;
}
/* The grain lies over the signs and under the words. */
.mind::after { z-index: -1; opacity: 0.13; }
@supports (corner-shape: squircle) { .mind { corner-shape: squircle; border-radius: clamp(40px, 4.4vw, 68px); } }
.mind-point { padding: 6px 0; border-radius: 10px; cursor: default; outline-offset: 4px; }
.mind-form { position: relative; z-index: -1; height: auto; pointer-events: none; }
/* The reasons speak in the section title's own face: wide for each reason, as the title is, and at its plain
   width for what the reason means. */
.mp-head { display: block; font: 400 clamp(20px, 0.9rem + 0.8vw, 28px) / 1.12 var(--display); font-stretch: 112%; letter-spacing: -0.035em; text-wrap: balance; transition: color 0.3s ease-out; }
.mp-fold { display: grid; }
.mp-more { display: block; min-height: 0; overflow: hidden; padding-top: 9px; color: var(--ink-2); font: 400 clamp(16px, 0.92rem + 0.2vw, 17.5px) / 1.5 var(--display); font-stretch: 104%; letter-spacing: 0; text-wrap: pretty; }
@media (min-width: 861px) {
  /* The reasons stand close together on the right, a little above the middle. The one that is open unfolds what
     it means, and those beneath it move down out of its way. */
  .mind { --tall: clamp(480px, 40vw, 720px); display: flex; flex-direction: column; align-items: flex-end; gap: clamp(12px, 1.4vw, 20px); min-height: var(--tall); padding: calc(var(--tall) * 0.3) 4.5% clamp(26px, 3vw, 44px); }
  .mind-point { width: min(31%, 400px); }
  /* The signs share one place, a touch left of the panel's middle, and only the open reason's shows: a fade and
     a breath, nothing more. */
  .mind-form { position: absolute; left: 47%; top: 50%; width: min(46%, 720px); translate: -50% -50%; opacity: 0; scale: 0.94; transition: opacity 0.35s ease-out, scale 0.6s var(--out); }
  .mind-point[data-on] .mind-form, .mind:not([data-active]) .mind-point:first-child .mind-form { opacity: 1; scale: 1; }
  .mp-fold { grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--out); }
  .mp-more { opacity: 0; transition: opacity 0.2s ease-out; }
  .mind[data-active] .mind-point:not([data-on]) .mp-head { color: var(--ink-3); }
  .mind-point[data-on] .mp-fold, .mind:not([data-active]) .mind-point:first-child .mp-fold, .no-js .mp-fold { grid-template-rows: 1fr; }
  .mind-point[data-on] .mp-more, .mind:not([data-active]) .mind-point:first-child .mp-more, .no-js .mp-more { opacity: 1; transition: opacity 0.4s ease-out 0.12s; }
}
@media (max-width: 860px) {
  .mind { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 22px) clamp(16px, 2.6vw, 28px); padding: 4px clamp(22px, 3.4vw, 30px) clamp(26px, 4vw, 36px); }
  /* Each sign is drawn in the middle of its picture; it is pulled left to stand over the words' edge. */
  .mind-form { width: 84%; max-width: none; margin: -2% 0 -8% -24%; }
}
@media (max-width: 640px) {
  .mind { grid-template-columns: minmax(0, 1fr); padding: 14px 22px 30px; }
  .mind-form { width: 76%; margin: -6% 0 -8% -22%; }
}
/* On a phone the reasons take turns: one at a time, its sign over its words. A swipe, a press at either edge of
   the panel or a press on a dot turns to another. Nothing follows the finger and nothing moves sideways: the sign
   and the words come in the same way, fading and breathing out to full size, as the sign does on a wide screen.
   Without the script they all stand one under another, as above. */
@media (max-width: 640px) {
  .js .mind-wrap { touch-action: pan-y; }
  .js .mind { padding: 0 22px 54px; }
  /* A reason's sign and words fade by themselves, not the reason as a whole, so that the sign stays under the
     panel's grain. */
  .js .mind-point { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s 0.25s; }
  .js .mind-point > * { opacity: 0; scale: 0.94; transition: opacity 0.25s ease-out, scale 0.6s var(--out); }
  .js .mind-point[data-on], .js .mind:not([data-active]) .mind-point:first-child { visibility: visible; transition: visibility 0s; }
  .js .mind-point[data-on] > *, .js .mind:not([data-active]) .mind-point:first-child > * { opacity: 1; scale: 1; transition: opacity 0.45s ease-out 0.1s, scale 0.6s var(--out); }
  .js .mind-form { display: block; width: 94%; margin: -2% auto -8%; }
  /* The reasons take turns in one place, so they are set alike and from one edge. Their words stand in one
     column in the panel's middle, under the sign: as wide as the longest heading (site.js measures it), no
     narrower than a paragraph reads well in and no wider than the panel. Every heading starts at the column's
     left edge and stays on one line; where the longest would not fit, they are all set smaller (site.js finds
     the size). What a reason means runs to the column's right edge. Where the reasons would then take different
     numbers of lines, it is set a little narrower for all of them (site.js finds by how much), so that they
     take as many and the panel looks the same whichever reason shows. */
  .js .mp-head { font-size: var(--head, 20px); white-space: nowrap; }
  .js .mind-point :is(.mp-head, .mp-fold) { width: min(100%, max(var(--column, 0px), 17.5rem)); margin-inline: auto; }
  .js .mp-more { max-width: var(--words, none); }
  .js .mind-turn { display: block; }
  /* The panel's two edges turn back and on; there is nothing to see on them. */
  .mind-side { position: absolute; top: 0; bottom: 0; z-index: 2; width: 24%; padding: 0; border: 0; border-radius: 24px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mind-side:first-child { left: 0; }
  .mind-side:nth-child(2) { right: 0; }
  .mind-side:focus-visible { outline-offset: -6px; }
  /* The dots say which reason is showing, and a press on one turns to it. */
  .mind-dots { position: absolute; left: 50%; bottom: 8px; z-index: 3; display: flex; translate: -50% 0; }
  .mind-dots button { display: grid; place-items: center; width: 16px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.45s var(--out); -webkit-tap-highlight-color: transparent; }
  .mind-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgb(13 16 22 / 0.2); transition: width 0.45s var(--out), background-color 0.3s ease-out; }
  .mind-wrap:not([data-at]) .mind-dots button:first-child, .mind-dots [aria-current="true"] { width: 30px; }
  .mind-wrap:not([data-at]) .mind-dots button:first-child::before, .mind-dots [aria-current="true"]::before { width: 20px; background: var(--ink); }
}

/* ── The services: seven covers in a pyramid, three above and four below. Each is a soft field of colour with
   its sign cut out of light in the middle and its name at the foot, and leads to the service's own page. Reach
   for one and the sign lifts a little to make room for what the service does, and an arrow comes into the
   corner; where there is no pointer, the arrow is always there and the words are written under the cover. Each
   card measures its words against its own width, so it reads the same at any size. ── */
/* ── Who trusts Bear: a line and five customers' logos in one row between the reasons and the services, with as
   much white above the row as beneath it. The line starts at the column's left edge and the last logo ends at
   its right edge, with the same room between each two neighbours. The logos are drawn at different heights
   (the page gives each its own) so that they look one size, and each keeps around it the clear room its owner
   asks for. ── */
.trust { --unit: 1px; display: flex; align-items: center; justify-content: space-between; width: var(--column); margin: clamp(64px, 9svh, 104px) auto 0; }
.trust-say { margin: 0; color: var(--ink-2); font: 500 11.5px/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.trust img { flex: none; width: auto; height: calc(var(--tall) * var(--unit)); }
/* Narrower, the logos are drawn a size smaller. */
@media (max-width: 1340px) { .trust { --unit: 0.92px; } }
/* Where the row would crowd, the line stands above the logos, and all of it in the middle. */
@media (max-width: 900px) {
  .trust { --unit: 0.9px; flex-wrap: wrap; justify-content: center; gap: 24px clamp(26px, 5.4vw, 60px); }
  .trust-say { flex-basis: 100%; text-align: center; white-space: normal; }
}
/* On a phone the logos stand three over two: the row is kept too narrow for a fourth. */
@media (max-width: 640px) {
  .trust { --unit: clamp(0.7px, 0.2vw, 0.8px); gap: 24px clamp(18px, 6vw, 26px); max-width: calc(var(--unit) * 410); }
}

.services { width: var(--column); margin: clamp(104px, 15svh, 176px) auto 0; }
/* After the logos the services start as far beneath them as the reasons end above. */
.trust + .services { margin-top: clamp(64px, 9svh, 104px); }
/* A pyramid: every row but the last is one cover short and sits centred over the row beneath, so the grid has
   twice the columns and each cover takes two. */
.cards { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); margin-top: clamp(20px, 3svh, 32px); }
.card { grid-column: span 2; }
.card:first-child { grid-column: 2 / span 2; }
.card-link { --pad: clamp(13px, 7.4cqw, 28px); --lift: calc(-1 * clamp(26px, 118px - 26cqw, 56px)); position: relative; display: block; container-type: inline-size; border-radius: clamp(20px, 2vw, 32px); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* Until a cover's picture arrives, its place has the picture's own colour (the page says which). */
.cover { position: relative; isolation: isolate; display: block; aspect-ratio: 1; border-radius: inherit; overflow: hidden; background: var(--mist); }
@supports (corner-shape: squircle) { .card-link { --round: clamp(34px, 3.4vw, 54px); corner-shape: squircle; border-radius: var(--round); } .cover { corner-shape: squircle; } }
/* Safari draws the squircle too, but while something inside a clipped box moves on a layer of its own (a cover's
   picture growing under the pointer, its shade coming up) Safari cuts it to the box's plain rectangle: WebKit
   drops the corners from its layer clip when their shape is not round, so sharp corners flash for as long as
   the thing moves. A clip path it keeps. So in Safari a cover is also cut to its own outline, every corner as
   one curve, which follows the squircle to within a third of a pixel. */
@supports (corner-shape: squircle) and (font: -apple-system-body) {
  .cover {
    --bend: calc(var(--round) * 0.082);
    clip-path: shape(from var(--round) 0, hline to calc(100% - var(--round)), curve to 100% var(--round) with calc(100% - var(--bend)) 0 / 100% var(--bend), vline to calc(100% - var(--round)), curve to calc(100% - var(--round)) 100% with 100% calc(100% - var(--bend)) / calc(100% - var(--bend)) 100%, hline to var(--round), curve to 0 calc(100% - var(--round)) with var(--bend) 100% / 0 calc(100% - var(--bend)), vline to var(--round), curve to var(--round) 0 with 0 var(--bend) / var(--bend) 0, close);
  }
}
.cover-ground { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--out); }
/* A shade that comes up under the words, so they read on any cover; the sign stays bright above it. */
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 14 22 / 0.74), rgb(10 14 22 / 0.46) 38%, rgb(10 14 22 / 0.12) 70%, rgb(10 14 22 / 0)); opacity: 0; transition: opacity 0.45s ease-out; }
.cover-sign { position: absolute; inset: 0; margin: auto; width: auto; max-width: none; height: 100%; aspect-ratio: 1; transition: translate 0.7s var(--out), scale 0.7s var(--out); }
.cover::after { opacity: 0.52; }
.cover .i-out { position: absolute; top: var(--pad); right: var(--pad); width: clamp(21px, 9cqw, 32px); height: clamp(21px, 9cqw, 32px); stroke-width: 1.8; filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.6)); opacity: 0; translate: -5px 5px; transition: opacity 0.25s ease-out, translate 0.6s var(--spring-snap); }
.card-text { position: absolute; inset: auto 0 0; z-index: 1; display: grid; grid-template-rows: auto 0fr; padding: var(--pad); transition: grid-template-rows 0.5s var(--out); }
.card h3 { font: 500 clamp(15.5px, 7cqw, 25px) / 1.15 var(--sans); letter-spacing: -0.025em; }
.card-fold { min-height: 0; overflow: hidden; }
.card-more { max-width: 36ch; padding-top: clamp(5px, 2.4cqw, 9px); font-size: clamp(12.5px, 4.5cqw, 15.5px); line-height: 1.4; text-wrap: pretty; opacity: 0; transition: opacity 0.25s ease-out; }
@media (hover: hover) {
  .card-link:is(:hover, :focus-visible) .cover-ground { scale: 1.035; }
  .card-link:is(:hover, :focus-visible) .cover::before { opacity: 1; }
  .card-link:is(:hover, :focus-visible) .cover-sign { translate: 0 var(--lift); scale: 0.95; }
  .card-link:is(:hover, :focus-visible) .i-out { opacity: 1; translate: 0; }
  .card-link:is(:hover, :focus-visible) .card-text { grid-template-rows: auto 1fr; }
  .card-link:is(:hover, :focus-visible) .card-more { opacity: 1; transition: opacity 0.4s ease-out 0.1s; }
}
@media (hover: none) {
  .cover .i-out { opacity: 1; translate: 0; }
  .card-link { display: grid; }
  .cover { grid-area: 1 / 1; }
  .card-text { display: contents; }
  .card h3 { grid-area: 1 / 1; align-self: end; z-index: 1; padding: var(--pad); }
  .card-fold { grid-area: 2 / 1; overflow: visible; }
  .card-more { max-width: none; padding: 11px 3px 6px; color: var(--ink-2); font-size: 15px; line-height: 1.45; opacity: 1; }
}

/* ── The foot: night after the page's white. On top, in one quiet line at the right: where to write, the
   business ID the law asks a company's site to show, which a click copies, and the papers. Each lights and is
   underlined as you reach for it. Under them Bear's mark and name as wide as the page: the bear stands on the
   line the name stands on, and that line is about a centimetre above the page's bottom edge on any screen. ── */
.foot { position: relative; isolation: isolate; padding: clamp(40px, 4.4vw, 64px) 0 max(clamp(22px, 2.7vw, 38px), env(safe-area-inset-bottom)); background: var(--night); color: rgb(255 255 255 / 0.58); }
.foot::after { z-index: -1; opacity: 0.07; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px clamp(16px, 2vw, 30px); width: var(--column); margin: 0 auto; font: 400 13.5px/1.2 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.foot-mark { display: block; width: var(--column); margin: clamp(52px, 7.4vw, 120px) auto 0; border-radius: 12px; color: #f7f6f2; }
.foot-mark svg { width: 100%; height: auto; overflow: visible; fill: currentColor; }
.foot-links :is(a, button) { position: relative; display: block; padding: 8px 0; border: 0; border-radius: 4px; background: none; color: inherit; text-decoration: none; cursor: pointer; transition: color 0.25s ease-out; -webkit-tap-highlight-color: transparent; }
.foot-links :is(a, button)::after { content: ""; position: absolute; inset: auto 0 4px; height: 1px; background: currentColor; scale: 0 1; transform-origin: 0 50%; transition: scale 0.5s var(--out); }
.foot-links :is(a, button):is(:hover, :focus-visible) { color: #fff; }
.foot-links :is(a, button):is(:hover, :focus-visible)::after { scale: 1 1; }
.foot :focus-visible { outline-color: #fff; }
/* A service's page ends quietly: the foot is one row, the bear and the name small at its left and the small
   print at its right, inside the page's column. */
.foot-small { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding: clamp(30px, 3.4vw, 46px) calc((100% - var(--column)) / 2) max(clamp(30px, 3.4vw, 46px), env(safe-area-inset-bottom)); }
.foot-small .foot-mark { width: auto; margin: 0; border-radius: 8px; }
.foot-small .foot-mark svg { display: block; width: auto; height: clamp(30px, 2.5vw, 38px); }
.foot-small .foot-links { width: auto; margin: 0; }

/* ── The way in: one glass button in the middle of the screen's foot, from the first screen to the last, where it
   comes to rest in the middle of the white between the covers and the foot. Press it and its glass opens upward
   into a card that asks the few things Bear needs to know; press it again to send. ── */
.ask { --white: clamp(150px, 20svh, 220px); position: sticky; bottom: var(--inset); z-index: 25; height: 54px; margin: calc((var(--white) - 54px) / 2) 0; pointer-events: none; transition: bottom 0.55s var(--out); }
.js .ask-plain, .no-js .ask-card { display: none; }
.ask-plain, .ask-card { position: absolute; left: 50%; bottom: 0; translate: -50% 0; pointer-events: auto; }
.ask-plain { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 27px; border-radius: 27px; color: var(--ink); font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.ask-card {
  --glass-shadow: 0 1px 2px rgb(13 16 22 / 0.06), 0 14px 34px -14px rgb(13 16 22 / 0.32);
  /* A wide, faint light, so it glides across the button and never reads as a spot. */
  --light: 220px;
  --shine: 0.3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr auto;
  /* Its closed width is its words' own, which the script reads once so that the card can grow from it. */
  width: var(--closed, max-content);
  max-width: calc(100vw - 24px);
  border-radius: 27px;
  overflow: hidden;
  color: var(--ink);
  transition: width 0.6s var(--spring-soft), grid-template-rows 0.6s var(--spring-soft), border-radius 0.5s var(--out), background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.4s ease-out, scale 0.5s var(--spring-snap);
}
.ask-card:not([data-open]):hover { --glass-fill: rgb(255 255 255 / 0.84); }
.ask-card:not([data-open]):active { scale: 0.97; transition-duration: 0.1s; }
/* Over the picture it carries white words, as the corner row does. */
.ask-card[data-tone="dark"]:not([data-open]) { --glass-fill: rgb(255 255 255 / 0.2); --glass-shadow: 0 14px 34px -16px rgb(0 0 0 / 0.45); --shine: 0.24; color: #fff; }
.ask-card[data-tone="dark"]:not([data-open]):hover { --glass-fill: rgb(255 255 255 / 0.3); }
/* Open: a card of the same glass, wide enough for two fields side by side. */
.ask-card[data-open] {
  --glass-fill: rgb(249 251 252 / 0.74);
  --glass-shadow: 0 1px 2px rgb(13 16 22 / 0.06), 0 40px 90px -30px rgb(13 16 22 / 0.5);
  grid-template-rows: 1fr auto;
  width: min(500px, 100vw - 24px);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(30px) saturate(2) brightness(1.1);
  backdrop-filter: blur(30px) saturate(2) brightness(1.1);
}
.ask-card[data-open]::before { display: none; }
/* The folded fields lend the closed card none of their width: it is only as wide as its button. */
.ask-fold { min-height: 0; overflow: hidden; contain: inline-size; }
.ask-card[data-open] .ask-fold { max-height: calc(100svh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.ask-fields { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 14px 2px; }
/* The fields come up out of the button: the nearest first, each a moment after the one beneath it (the page
   says which step each is on). */
.ask-fields > * { opacity: 0; translate: 0 14px; transition: opacity 0.15s ease-out, translate 0.25s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out; }
.ask-card[data-open] .ask-fields > * { opacity: 1; translate: 0; transition: opacity 0.4s ease-out calc(0.12s + var(--step) * 0.05s), translate 0.7s var(--out) calc(0.12s + var(--step) * 0.05s), background-color 0.2s ease-out, box-shadow 0.2s ease-out; }
.ask-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 2px 2px 8px; color: var(--ink-2); font: 500 13.5px/1 var(--sans); letter-spacing: 0; }
.ask-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgb(13 16 22 / 0.06); color: var(--ink-2); cursor: pointer; transition: background-color 0.2s ease-out, color 0.2s ease-out; }
.ask-close:hover { background: rgb(13 16 22 / 0.11); color: var(--ink); }
.ask-close .i { width: 15px; height: 15px; stroke-width: 2; }
/* A field: its name small above what you write, on a paler patch of the glass that turns white as you write. */
.field { display: grid; gap: 4px; padding: 10px 13px; border-radius: 15px; background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px rgb(13 16 22 / 0.06); cursor: text; }
.field span { display: flex; align-items: center; min-height: 12px; color: var(--ink-3); font: 500 11.5px/1 var(--sans); letter-spacing: 0; }
/* What must be filled in carries a small star. */
.star { flex: none; width: 7px; height: 7px; margin: 0 0 3px 3px; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; }
/* The business ID of the company chosen from the register, at the end of the field's name. */
.field-id { margin-left: auto; color: var(--blue); font-variant-numeric: tabular-nums; }
.field :is(input, textarea) { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 16px/1.35 var(--sans); letter-spacing: -0.006em; resize: none; }
.field:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.field-wide, .ask-note { grid-column: 1 / -1; }
.ask-note { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 0; font: 400 12.5px/1.4 var(--sans); letter-spacing: 0; }
.ask-note a { color: var(--ink-2); text-underline-offset: 2px; }
/* The companies the register finds, in a list that lies over the fields beneath the company's name, with the
   register's name under them, as its licence asks. */
.ask-found { position: absolute; left: 14px; right: 14px; z-index: 3; padding: 5px; border-radius: 16px; background: rgb(255 255 255 / 0.97); box-shadow: inset 0 0 0 1px rgb(13 16 22 / 0.06), 0 16px 36px -14px rgb(13 16 22 / 0.4); animation: found 0.3s var(--out); }
.ask-found[hidden], .found[hidden] { display: none; }
@keyframes found { from { opacity: 0; translate: 0 -6px; } }
.ask-found [role="listbox"] { display: grid; gap: 2px; }
.found { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; padding: 10px 11px; border: 0; border-radius: 11px; background: none; color: var(--ink); font: 500 15px/1.2 var(--sans); letter-spacing: -0.01em; text-align: left; cursor: pointer; }
.found span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found small { flex: none; color: var(--ink-3); font: 400 12.5px/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.found:is(:hover, [aria-selected="true"]) { background: rgb(1 49 249 / 0.07); }
.found-source { margin: 0; padding: 6px 11px 4px; color: var(--ink-3); font: 400 11px/1.2 var(--sans); letter-spacing: 0; text-align: right; }
/* The button: all there is of the card when it is closed; its one solid action when it is open. */
.ask-go { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin: 0; padding: 0 22px 0 27px; border: 0; border-radius: 27px; background-color: transparent; color: inherit; font: 500 16px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: height 0.6s var(--spring-soft), margin 0.6s var(--spring-soft), background-color 0.35s ease-out, color 0.3s ease-out, box-shadow 0.4s ease-out; -webkit-tap-highlight-color: transparent; user-select: none; }
.ask-go .i { width: 17px; height: 17px; stroke-width: 1.6; transition: translate 0.5s var(--spring-snap); }
.ask-card:not([data-open]):hover .ask-go .i, .ask-go:hover .i { translate: 4px 0; }
.ask-go:focus-visible { outline-offset: -4px; }
.ask-card[data-open] .ask-go { width: auto; height: 50px; margin: 10px 14px 14px; background-color: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 10px 24px -12px rgb(1 49 249 / 0.6); }
.ask-card[data-open] .ask-go:focus-visible { outline-offset: 2px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--inset) + 66px); z-index: 40; padding: 11px 16px 12px; border-radius: 999px; font: 500 14px/1 var(--sans); white-space: nowrap; translate: -50% 0; transition: translate 0.6s var(--spring-soft), opacity 0.25s ease-out, visibility 0s; }
.toast[hidden] { display: block; visibility: hidden; opacity: 0; translate: -50% 14px; transition: translate 0.3s var(--out), opacity 0.2s ease-out, visibility 0s 0.3s; }

/* ── As an agent reads it ── */
.agent { max-width: 760px; min-height: 100svh; margin: 0 auto; padding: clamp(80px, 12svh, 112px) var(--gutter) 64px; }
.agent[hidden] { display: none; }
.agent header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-2); color: var(--ink-3); font-size: 13.5px; letter-spacing: 0; }
.agent header span { margin-right: auto; }
.agent header button { padding: 0; border: 0; background-color: transparent; cursor: pointer; }
.agent pre { margin: 28px 0 0; font: 400 14px/1.7 var(--mono); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
:root[data-view="agent"] :is(main, .foot) { display: none; }

/* ── A service's own page: plain paper, the service's name in the middle, its picture, and a few short chapters
   down a narrow column. The name and the headings are set as the landing page's titles are, the picture has the
   covers' corners and grain, and the words are the reasons' own. ── */
.page { position: relative; }
.page-mark { position: absolute; top: clamp(18px, 2.4vw, 34px); left: var(--gutter); z-index: 2; display: block; border-radius: 10px; color: var(--ink); outline-offset: 6px; }
.page-mark .wordmark { width: auto; height: clamp(36px, 3.3vw, 54px); fill: currentColor; }
/* Three columns: the words and the picture in the middle, and at the left the room the dial stands in, matched
   on the right so the middle stays in the middle. */
.article { --side: clamp(150px, 21vw, 330px); --pad: 0px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); padding-top: clamp(132px, 20svh, 216px); }
.article > * { grid-column: 2; }
/* The name is sized against the column it stands in, so that the longest service's name keeps to one line. */
.article-head { container-type: inline-size; text-align: center; }
.crumb { display: inline-block; padding: 6px 4px; border-radius: 6px; color: var(--ink-3); font: 500 14.5px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; transition: color 0.25s ease-out; }
.crumb:is(:hover, :focus-visible) { color: var(--ink); }
.article h1, .lost h1 { margin-top: clamp(8px, 1vw, 14px); font: 400 clamp(2rem, 9cqw, 5.5rem) / 1 var(--display); font-stretch: 112%; letter-spacing: -0.04em; text-wrap: balance; }
/* The page's name and its line come up once, one after the other, as the page opens. */
.article-head > * { animation: head 0.9s var(--out) both; }
.article-head > :nth-child(2) { animation-delay: 0.05s; }
.article-head > :nth-child(3) { animation-delay: 0.1s; }
@keyframes head { from { opacity: 0; translate: 0 12px; } }
/* A page that isn't there: the name, what happened, and the way back, in both languages. */
.lost { display: grid; place-items: center; min-height: 100svh; padding: 0 var(--gutter); text-align: center; }
.lost a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lead { max-width: 31em; margin: clamp(18px, 1.9vw, 28px) auto 0; padding: 0 var(--pad); color: var(--ink-2); font: 400 clamp(18px, 0.98rem + 0.5vw, 23px) / 1.42 var(--display); font-stretch: 104%; letter-spacing: -0.012em; text-wrap: balance; }
.plate { position: relative; isolation: isolate; width: min(100% - 2 * var(--pad), 1080px); margin: clamp(38px, 4.6vw, 72px) auto 0; aspect-ratio: 16 / 9; border-radius: clamp(22px, 2.6vw, 40px); overflow: hidden; background: var(--mist) center / cover; }
@supports (corner-shape: squircle) { .plate { corner-shape: squircle; border-radius: clamp(38px, 4.4vw, 68px); } }
.plate-ground { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.plate-sign { position: absolute; inset: 0; margin: auto; width: auto; height: 86%; aspect-ratio: 1; }
.plate::after { opacity: 0.52; }
/* The sign comes into its light once, as the page opens. */
.js .plate-sign { animation: sign 1.4s var(--out) both; }
@keyframes sign { from { opacity: 0; scale: 0.94; } }
.chapters, .closing, .next { width: min(100% - 2 * var(--pad), 680px); margin-inline: auto; }
.chapters { margin-top: clamp(52px, 6vw, 96px); }
.chapter + .chapter { margin-top: clamp(40px, 4.2vw, 62px); }
.chapter h2 { font: 400 clamp(23px, 1.02rem + 1vw, 33px) / 1.12 var(--display); font-stretch: 112%; letter-spacing: -0.035em; text-wrap: balance; }
.chapter p { margin-top: clamp(11px, 1.1vw, 16px); color: rgb(13 16 22 / 0.82); font: 400 clamp(17.5px, 1.02rem + 0.18vw, 19.5px) / 1.62 var(--display); font-stretch: 102%; letter-spacing: -0.004em; text-wrap: pretty; }
/* Where a chapter states a deadline, it names where the deadline is written, small, under the words. */
/* A partner named in a chapter: one link in the line, its own mark first, the size of the letters, then its
   name. Only the name is underlined. */
.partner { color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.partner img { display: inline-block; width: 1.02em; height: 1.02em; margin-right: 0.32em; border-radius: 0.22em; vertical-align: -0.16em; }
.partner span { text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s ease-out; }
.partner:is(:hover, :focus-visible) span { text-decoration-color: currentColor; }
.chapter .source { margin-top: 10px; color: var(--ink-3); font: 400 13.5px/1.5 var(--sans); letter-spacing: 0; }
.source a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s ease-out, text-decoration-color 0.2s ease-out; }
.source a:is(:hover, :focus-visible) { color: var(--ink); text-decoration-color: currentColor; }
/* The last line asks the one thing left to ask, and its words open the way in. */
.closing { margin-top: clamp(52px, 6vw, 92px); padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--rule-2); color: var(--ink-2); font: 400 clamp(17.5px, 1.02rem + 0.18vw, 19.5px) / 1.5 var(--display); font-stretch: 102%; letter-spacing: -0.004em; text-wrap: balance; }
.closing a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
/* Then the next service, as a small card of the same paper as the reasons' panel. */
.next { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(28px, 3.4vw, 44px); margin-bottom: clamp(96px, 13svh, 168px); padding: 14px clamp(18px, 2vw, 26px) 14px 14px; border-radius: clamp(24px, 2.4vw, 34px); background: var(--mist); color: var(--ink); text-decoration: none; transition: background-color 0.25s ease-out; -webkit-tap-highlight-color: transparent; }
.next-dot { flex: none; width: clamp(58px, 5.6vw, 76px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.next-dot img, .dial-dot img { width: 100%; height: 100%; }
.next-text { display: grid; gap: 5px; min-width: 0; margin-right: auto; }
.next-text small { color: var(--ink-3); font: 500 13px/1 var(--sans); letter-spacing: 0; }
.next-text b { font: 400 clamp(20px, 1rem + 0.6vw, 26px) / 1.1 var(--display); font-stretch: 112%; letter-spacing: -0.035em; }
.next-text span { color: var(--ink-2); font: 400 15px/1.4 var(--sans); text-wrap: pretty; }
.next .i { transition: translate 0.5s var(--spring-snap); }
.next:is(:hover, :focus-visible) { background: #e4e7eb; }
.next:is(:hover, :focus-visible) .i { translate: 4px 0; }

/* ── The dial: the seven services as small bubbles of their own covers, on the rim of a wheel at the page's left
   edge. The wheel is turned so that this page's service stands at its middle, larger and named; the others fall
   away above and beneath it and lead to their own pages. It stays beside you as you read. On a narrow screen it
   lies down as a row of named bubbles under the page's name, this page's first. ── */
.dial-dot { flex: none; display: block; border-radius: 50%; overflow: hidden; }
@media (min-width: 901px) {
  .dial { grid-column: 1; grid-row: 1 / span 5; position: sticky; top: calc(50svh - 200px); z-index: 2; align-self: start; height: 400px; }
  /* Each bubble's middle is on the rim; its name lies along the spoke that runs out to it (the page says where
     each stands and how far it is turned). */
  .dial-item { --half: 20px; position: absolute; left: calc(var(--gutter) + 50px - var(--x) - var(--half)); top: calc(50% + var(--y)); display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; border-radius: 999px; color: var(--ink-3); font: 500 13.5px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; translate: 0 -50%; rotate: calc(var(--r) * -1); transform-origin: var(--half) 50%; opacity: calc(1 - var(--d) * 0.15); transition: opacity 0.3s ease-out, color 0.3s ease-out; -webkit-tap-highlight-color: transparent; }
  .dial-dot { width: calc(2 * var(--half)); height: calc(2 * var(--half)); box-shadow: 0 1px 2px rgb(13 16 22 / 0.1), 0 8px 18px -10px rgb(13 16 22 / 0.5); transition: scale 0.5s var(--spring-snap); }
  .dial-item:is(:hover, :focus-visible) { color: var(--ink); opacity: 1; }
  .dial-item:is(:hover, :focus-visible) .dial-dot { scale: 1.14; }
  .dial-item:focus-visible { outline-offset: 6px; }
  .dial-item[aria-current] { --half: 27px; color: var(--ink); opacity: 1; cursor: default; }
  .dial-item[aria-current] .dial-name { padding: 7px 11px 8px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-2); }
  .dial-item[aria-current] .dial-dot { scale: 1; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink), 0 12px 24px -12px rgb(13 16 22 / 0.55); }
}
/* Where there is room for the names, the sides are wide enough for the longest of them in its ring. */
@media (min-width: 1241px) { .article { --side: clamp(var(--gutter) + 266px, 23.5vw, 350px); } }
/* Where the side is too narrow for the names, the bubbles stand alone, and a name comes out as you reach for its
   bubble. */
@media (min-width: 901px) and (max-width: 1240px) {
  .dial-item { gap: 0; }
  .dial-item .dial-name, .dial-item[aria-current] .dial-name { position: absolute; left: calc(2 * var(--half) + 10px); padding: 7px 11px 8px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 2px rgb(13 16 22 / 0.08), 0 10px 24px -12px rgb(13 16 22 / 0.4); color: var(--ink); opacity: 0; translate: -6px 0; pointer-events: none; transition: opacity 0.2s ease-out, translate 0.4s var(--out); }
  .dial-item:is(:hover, :focus-visible) .dial-name { opacity: 1; translate: 0; }
}
@media (max-width: 900px) {
  .article { --pad: var(--gutter); grid-template-columns: minmax(0, 1fr); padding-top: clamp(108px, 16svh, 150px); }
  .article > * { grid-column: 1; }
  .article-head { padding: 0 var(--gutter); }
  .lead { padding: 0; }
  .dial { display: flex; gap: 8px; margin-top: 26px; padding: 4px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .dial::-webkit-scrollbar { display: none; }
  .dial-item { order: var(--o); flex: none; display: flex; flex-direction: row-reverse; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 6px; border-radius: 22px; background: var(--mist); color: var(--ink-2); font: 500 14.5px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
  .dial-dot { width: 32px; height: 32px; }
  .dial-item[aria-current] { background: var(--ink); color: var(--paper); }
  .plate { margin-top: 26px; }
}

/* ── The way in on a service's page: the fourth bubble in the corner row. It is its arrow while you read, and
   says what it is at the page's head and foot and when you reach for it. Pressed, its glass opens downward into
   the same card, with the button at the card's foot. ── */
.ask-corner { position: relative; bottom: auto; z-index: 1; flex: none; width: 44px; height: 44px; margin: 0; pointer-events: auto; transition: width 0.6s var(--spring-soft); }
.ask-corner :is(.ask-card, .ask-plain) { top: 0; right: 0; bottom: auto; left: auto; translate: none; }
.ask-corner .ask-card { width: 44px; border-radius: 22px; }
.ask-corner .ask-go { justify-content: flex-end; gap: 9px; height: 44px; padding: 0 13.5px 0 17px; font-size: 14.5px; }
.ask-corner .ask-go span { opacity: 0; transition: opacity 0.18s ease-out; }
.ask-corner:has(.ask-card:is(:hover, :focus-within, [data-wide]):not([data-open])), .ask-corner .ask-card:is(:hover, :focus-within, [data-wide]):not([data-open]) { width: var(--closed, 44px); }
.ask-corner .ask-card:is(:hover, :focus-within, [data-wide], [data-open]) .ask-go span { opacity: 1; transition: opacity 0.3s ease-out 0.08s; }
.ask-corner .ask-card[data-open] { width: min(500px, 100vw - 2 * var(--gutter)); border-radius: 28px; }
.ask-corner .ask-card[data-open] .ask-go { justify-content: center; gap: 10px; height: 50px; padding: 0 22px 0 27px; font-size: 16px; }
/* While its words are measured, the card is as wide as they are. */
.ask-card.fitting { width: max-content !important; transition: none !important; }
.no-js .ask-corner { width: auto; }
.no-js .ask-corner .ask-plain { position: static; height: 44px; padding: 0 16px 0 20px; border-radius: 22px; font-size: 14.5px; }
html[data-page="service"] .toast { bottom: var(--inset); }

/* ── Arriving: titles come up once as they enter ── */
.js [data-rise] { opacity: 0; translate: 0 10px; }
.js [data-rise][data-in] { opacity: 1; translate: 0; transition: opacity 0.6s ease-out, translate 0.8s var(--out); }

/* ── Narrower screens ── */
/* Fewer covers to a row as the screen narrows: two, three and two; then one over pairs; then one to a row. */
@media (max-width: 1179px) {
  .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card:nth-child(6) { grid-column: 2 / span 2; }
}
@media (max-width: 899px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card:nth-child(6) { grid-column: span 2; }
}
/* Where there is no room for the whole line that says who backs Bear, it is said in short: "Backed by", and the
   mark after the words says whom. The name is still there to be read out. That is a narrow or upright screen,
   and a window so low for its width that the bear's paw comes down to where the line ends: the lower the
   window, the further left the paw reaches at the line's height, and the wider the window, the further off the
   paw is from a line that is as long on every screen. (The pairs below are where the two meet.) */
@media (max-width: 960px), (max-aspect-ratio: 6/7), (max-width: 1300px) and (min-aspect-ratio: 9/5), (max-width: 1700px) and (min-aspect-ratio: 39/20) {
  .hero-yc { gap: 8px; font-size: 14.5px; }
  .yc { order: 1; width: 24px; }
  .yc-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* An upright screen: the tall picture, in which the bear is as wide as the screen, with the way in and who backs
   Bear in the middle of its foot. A screen wider than this keeps the wide picture however narrow it is: the tall
   picture's bear would not fit in its height. A small screen has to be more upright than a large one, since the
   way in and who backs Bear take the same room under the bear on both (page.mjs gives the picture on the same
   terms). */
@media (max-aspect-ratio: 6/7) and (min-width: 520px), (max-aspect-ratio: 3/4) {
  :root { --first: 100svh; }
  .hero { --wide: max(100cqw + 2 * var(--gutter), var(--first) * 9 / 16); grid-template-columns: minmax(0, 1fr); }
  .hero-art { top: calc((var(--first) - var(--wide) * 16 / 9) * 0.25); }
  /* The hero's line stands in its three lines of sense, the same in every browser, at a size at which the stack
     fills the bear's body. Left to themselves two browsers break a line in two different places. Where the
     screen is less tall than the picture's first part, the picture is drawn up by a quarter of what is missing
     (the rule above), which leaves the bear lower on the screen than the screen's middle; the words come down
     by the same measure and keep their place on the bear's body. Left in the middle, their first line climbs
     onto its ears. They stop short of the way in, though: on a small screen that is low for its width they
     would come down onto it, so there they stay 22px above it (the way in is 54px tall and stands 46px above
     the screen's inset; half the three lines is 1.66 of their size; the rows above and beneath the words carry
     them 10px down). In English the middle line is the longest, and it lies where the bear's side cuts in, so
     English is set a size smaller here too. */
  .hero-say { font-size: min(10.8vw, 6.25rem); translate: 0 max(0px, min((var(--wide) * 16 / 9 - var(--first)) * 0.25, var(--first) / 2 - 1.66em - var(--inset) - 132px)); }
  .hero-say:lang(en) { font-size: min(10vw, 5.8rem); }
  .hero-say span span { display: block; }
  /* Who backs Bear stands at the hero's foot. While the page is at its head the way in stands half-way between
     the bear's feet and that line; as the page moves, it comes down to the screen's foot. The bear's feet are
     where the picture puts them: a quarter of the screen's height down plus 0.7275 of the picture's width (the
     picture is placed above, and the bear in it by art/make.mjs); the line is the hero's padding and its own
     height above the screen's foot; and the way in is 54px tall. */
  .hero-yc { grid-column: 1; justify-self: center; height: auto; }
  html[data-page="home"]:is([data-head], .no-js) .ask { bottom: max(var(--inset) + 46px, (75svh - 0.7275 * max(100vw, 56.25svh) + clamp(18px, 2.4vw, 34px) + 24px) / 2 - 27px); }
}
@media (max-width: 640px) {
  .top { gap: 8px; padding-top: max(12px, env(safe-area-inset-top)); }
  /* A phone has no agent's view. */
  .orb[data-agent] { display: none; }
  .services { margin-top: 84px; }
  /* The covers lie in a row that the finger moves along, the next one always showing its edge. A cover carries
     its service's name and nothing more; what the service is waits on its own page. */
  .cards .card-fold { display: none; }
  .cards { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .cards .card { flex: 0 0 78%; scroll-snap-align: start; }
  /* The foot on a phone, down the middle as the way in above it is: where to write and the business ID on one
     line, the papers on the next (a break is set between them), and under them the mark and name across the
     screen. */
  .foot { padding-top: 44px; }
  .foot-links { justify-content: center; gap: 0 22px; }
  .foot-links::before { content: ""; flex-basis: 100%; order: 1; }
  .foot-links li:nth-child(n + 3) { order: 2; }
  .foot-mark { margin-top: 40px; }
  .foot-small { flex-direction: column; justify-content: center; gap: 22px; padding-top: 44px; padding-bottom: max(36px, env(safe-area-inset-bottom)); }
  .foot-small .foot-mark svg { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-rise] { opacity: 1; translate: 0; }
}
@media (max-width: 480px) { .ask-fields { grid-template-columns: minmax(0, 1fr); } }
@media print { .ask, .toast, .top, .dial { display: none !important; } }