/* Custodian, new site (preview): what every page shares.
   Fonts, tokens, base, type, buttons, the navigation and its menu, the film
   grain, the light sheet, the terminal, the call to action, the footer and the
   motion helpers. The home adds home.css; the other pages add pages.css.
   Type: Instrument Sans for titles and text; the logo keeps its own letters.
   Colour: a white page, light warm grey cards, deep night, the brand teal;
   the accents only in pictures and small icons, never in text or buttons. */
/* Instrument Sans (SIL Open Font License 1.1, free for commercial use; the
   licence is fonts/InstrumentSans-OFL.txt). At 97 % width it is the free font
   closest to Lay Grotesk, the font of the first design. The site uses only
   that width, so the file has the width fixed at 97 % and keeps the weight
   (400 to 700): 61 KB in place of 89 KB, with the same letters and spacing
   (scripts/site-font.py). */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 97%;
  font-style: normal;
  font-display: swap;
}
:root {
  /* White page, like Primefold. Cards and small fills take the warm greys. */
  --paper: #ffffff;
  --paper-2: #ffffff;
  --card: #f6f5f1;
  --fill-2: #edebe6;
  --ink: #111b1d;
  --ink-2: #525d5f; /* 6:1 on --paper */
  --ink-soft: #7d8789; /* large text only */
  --line: rgba(17, 27, 29, 0.1);
  --line-2: rgba(17, 27, 29, 0.2);
  /* The rules of the footer and of the questions: the grey and the width of
     the Primefold footer. */
  --rule: #e2e2e2;
  --rule-w: 1px;
  --night: #0b1719;
  --night-2: #0f2124;
  --on-night: #eef3f2;
  --on-night-2: rgba(238, 243, 242, 0.7);
  --on-night-line: rgba(238, 243, 242, 0.14);
  --teal: #5097a6;
  --teal-ink: #2c6c79;
  --teal-light: #8fcbd6;
  /* Accents: pictures and icons only. */
  --coral: #e07b67;
  --amber: #e3a64a;
  --sage: #6fae8c;
  --lavender: #8c88c9;
  --sky: #5aa2c8;
  --font-title: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --max: 1440px;
  --h2-size: clamp(32px, 3.6vw, 54px);
  --lead-size: clamp(16.5px, 1.2vw, 18px);
  --bar-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-space: calc(80px + var(--safe-top));
  --sheet-r: 40px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* White behind the page: the browser bar on phones takes this colour (with
   the theme-color in the HTML). The page does not bounce past its ends (as
   on Primefold): a bounce showed the cut edge of the name at the foot of the
   page. Only up and down: a sideways swipe still goes back and forward. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; background: #fff; overscroll-behavior-y: none; }
/* Where a phone puts the page under its status bar, that strip stays white. */
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 100; height: var(--safe-top); background: #fff; pointer-events: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-stretch: 97%;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* German, French and Italian pages (lang of html). In German the running
   text breaks long compound words with a hyphen, but never a word of fewer
   than ten letters (Custodian, Microsoft) and never with fewer than four
   letters on a line. A title, a link, a word in bold, a label or a button
   never takes a hyphen of the dictionary: it breaks only where the
   translation puts a soft hyphen. A word longer than its line breaks anyway. */
:root[lang|="de"] body { -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 10 4 4; }
:root:not([lang|="en"]) :is(h1, h2, h3, h4, h5, h6, .h2, .h3, .display, a, b, strong, em, label, button, th, dt) { -webkit-hyphens: manual; hyphens: manual; }
/* What stays in English on a page in another language (translate="no": the
   copies of the product, the frame label) never takes the hyphenation of the
   page language. */
:root [translate="no"], :root [translate="no"] * { -webkit-hyphens: manual !important; hyphens: manual !important; }
/* A command, a path or an address is never broken with a hyphen: the hyphen
   would look like part of it. */
:root :is(code, kbd, samp, pre), :root :is(code, kbd, samp, pre) * { -webkit-hyphens: manual !important; hyphens: manual !important; }
:root:not([lang|="en"]) body { overflow-wrap: break-word; }
/* A phrase kept on one line in English (.nowrap) may not fit in a title in
   another language. */
:root:not([lang|="en"]) :is(h1, h2) .nowrap { white-space: normal; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(80, 151, 166, 0.32); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--gutter); top: -64px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.display, .h2, .h3 { font-family: var(--font-title); text-wrap: balance; }
.display { font-size: clamp(44px, 6.2vw, 92px); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; }
.h2 { font-size: var(--h2-size); font-weight: 400; line-height: 1.06; letter-spacing: -0.024em; }
.h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 500; line-height: 1.22; letter-spacing: -0.01em; }
.lead { font-size: var(--lead-size); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.lead a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.small a { color: inherit; text-underline-offset: 2px; }
/* Small labels in plain case, with the ring of the logo as a mark. */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: 14px; line-height: 1; color: var(--ink-2); }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border: 1.5px solid var(--teal); border-radius: 50%; }
.eyebrow--light { color: var(--on-night-2); }
.eyebrow--light::before { border-color: var(--teal-light); }
[data-theme="dark"] { color: var(--on-night); }
[data-theme="dark"] .lead, [data-theme="dark"] .small { color: var(--on-night-2); }
[data-theme="dark"] .lead a { color: var(--on-night); }
/* Buttons: a plain pill; the chevron moves on hover */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px 0 21px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn__icon { flex: none; width: 14px; height: 14px; margin-right: -2px; transition: transform 0.4s var(--ease); }
.btn:hover .btn__icon, .btn:focus-visible .btn__icon { transform: translateX(3px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #ecebe7; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #26363a; }
.btn--glass { background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.26); }
.btn--line { background: rgba(17, 27, 29, 0.06); color: var(--ink); }
.btn--line:hover { background: rgba(17, 27, 29, 0.11); }
.btn--sm { height: 40px; padding: 0 15px 0 17px; font-size: 14px; }
.btn--sm:not(:has(.btn__icon)) { padding: 0 17px; }
/* Navigation: open over the hero, then a floating bar of frosted glass */
/* The side padding of the bar is the same as the side of the page content,
   so the glass has exactly the edges of the content, on every screen.
   Three columns: the logo, the links in the middle of the page, the buttons.
   The glass is neutral grey or white, never tinted. */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; padding: calc(10px + var(--safe-top)) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 0; color: #fff; transition: color 0.4s var(--ease); }
.nav__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  height: var(--bar-h);
  padding: 0 8px;
  border-radius: 18px;
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease), -webkit-backdrop-filter 0.45s, backdrop-filter 0.45s;
}
.nav__brand { justify-self: start; margin-left: 6px; text-decoration: none; }
.nav__brand svg { width: auto; height: 28px; }
.nav__links { display: flex; align-items: center; gap: 2px; font-size: 14.5px; font-weight: 500; }
.nav__links > li > a, .nav__trigger { display: inline-flex; align-items: center; gap: 3px; padding: 8px 12px; border-radius: 999px; text-decoration: none; transition: background-color 0.25s; }
.nav__links > li > a:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
/* The arrow keeps its size where the bar is tight (EN at 1024px). */
.nav__trigger svg { flex: none; width: 14px; height: 14px; opacity: 0.7; transition: transform 0.35s var(--ease); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__group { position: relative; }
.nav__panel { position: absolute; top: calc(100% + 16px); left: 50%; width: 320px; padding: 8px; border-radius: 16px; background: rgba(24, 24, 24, 0.86); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); color: #fff; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 0.25s, transform 0.4s var(--ease), visibility 0s 0.4s; }
.nav__group.is-open .nav__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s, transform 0.4s var(--ease); }
.nav__panel a { display: block; padding: 10px 14px; border-radius: 11px; text-decoration: none; }
.nav__panel a:hover { background: rgba(255, 255, 255, 0.08); }
.nav__panel b { display: block; font-size: 14px; font-weight: 500; }
.nav__panel span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.64); }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* The page in view: a light mark on its link, or on its section of the bar. */
.nav__links > li > a[aria-current="page"], .nav__group:has([aria-current="page"]) > .nav__trigger { background: rgba(255, 255, 255, 0.12); }
.nav__panel a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }
.menu__inner > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav__menu-btn { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.nav__menu-btn i { position: relative; width: 18px; height: 8px; }
.nav__menu-btn i::before, .nav__menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); }
.nav__menu-btn i::before { top: 0; }
.nav__menu-btn i::after { bottom: 0; }
.nav__menu-btn[aria-expanded="true"] i::before { transform: translateY(3.25px) rotate(45deg); }
.nav__menu-btn[aria-expanded="true"] i::after { transform: translateY(-3.25px) rotate(-45deg); }
.nav.is-floating .nav__bar { background: rgba(28, 28, 28, 0.42); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); }
.nav.is-light { color: var(--ink); }
.nav.is-light.is-floating .nav__bar { background: rgba(244, 244, 243, 0.8); box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.28); }
.nav.is-light .nav__links > li > a:hover, .nav.is-light .nav__trigger:hover, .nav.is-light .nav__trigger[aria-expanded="true"] { background: rgba(0, 0, 0, 0.05); }
.nav.is-light .nav__panel { background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.3); }
.nav.is-light .nav__panel a:hover { background: rgba(0, 0, 0, 0.045); }
.nav.is-light .nav__links > li > a[aria-current="page"], .nav.is-light .nav__group:has([aria-current="page"]) > .nav__trigger, .nav.is-light .nav__panel a[aria-current="page"] { background: rgba(0, 0, 0, 0.05); }
.nav.is-light .nav__panel span { color: var(--ink-2); }
.nav.is-light .nav__login { background: rgba(0, 0, 0, 0.06); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-light .nav__login:hover { background: rgba(0, 0, 0, 0.1); }
.nav.is-light .nav__signup { background: var(--ink); color: #fff; }
.nav.is-light .nav__signup:hover { background: #26363a; }
/* Language: a small switch in the bar, with the four languages in a panel at
   its right; on small screens the languages are in the menu. Each language
   has its name in its own language. */
.nav__lang .nav__trigger { padding: 8px 10px; font-size: 13.5px; letter-spacing: 0.02em; }
.nav__panel--lang { left: auto; right: 0; width: 180px; transform: translateY(-6px); }
.nav__lang.is-open .nav__panel--lang { transform: none; }
.nav__panel--lang a { font-size: 14px; font-weight: 500; }
.nav__panel--lang a[aria-current="true"] { background: rgba(255, 255, 255, 0.08); }
.nav.is-light .nav__panel--lang a[aria-current="true"] { background: rgba(0, 0, 0, 0.05); }
.menu__langs { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 20px; line-height: 1.5; }
.menu__langs a { text-decoration: none; color: rgba(255, 255, 255, 0.7); }
.menu__langs a[aria-current="true"] { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* Menu for small screens */
.menu { position: fixed; inset: 0; z-index: 55; overflow-y: auto; padding: calc(var(--nav-space) + 8px) var(--gutter) 32px; background: #141414; color: #fff; }
.menu[hidden] { display: none; }
.menu__inner { display: flex; flex-direction: column; }
.menu__inner > a { font-family: var(--font-title); font-size: 30px; line-height: 1.3; letter-spacing: -0.02em; text-decoration: none; }
.menu__group { margin: 22px 0 6px; font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.menu__group:first-child { margin-top: 8px; }
.menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { color: #fff; }
/* Film grain: one moving layer over every video, the same for all clips. The
   noise is a tile of 240 px, so a move of up to half a tile in each direction
   gives a new pattern at each step; the layer is only 120 px larger than its
   box on each side (it was twice its box: four times the memory). next.js
   moves it to the next of nine places ten times a second, only while it is
   on screen. A CSS animation in steps made the browser draw the screen again
   at each frame (120 times a second on a ProMotion screen), also between the
   steps: three times the work of the GPU while the page stands still. */
.grain {
  position: absolute;
  inset: -120px;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  will-change: transform;
}
/* Off screen, the animations that never end stop (next.js marks them
   is-off): each running animation costs the page some work at every frame,
   also where nobody sees it. */
.term.is-off .term__cursor, .footer__status.is-off i::after { animation-play-state: paused; }
/* Sheet: the light page that comes up over the hero */
/* --space: the one space between two sections, on every page (home.css and
   pages.css): from the last thing you see in a section to the first thing
   you see in the next one. --trim-h2: the empty part above the letters of a
   section title, taken off when a section starts with a title. */
.sheet { position: relative; z-index: 3; margin-top: calc(-1 * var(--sheet-r)); border-radius: var(--sheet-r) var(--sheet-r) 0 0; background: var(--paper); --space: clamp(84px, 9vw, 150px); --trim-h2: calc(var(--h2-size) * 0.13); }
.center-head { display: grid; justify-items: center; margin-bottom: clamp(40px, 5vw, 72px); text-align: center; }
.center-head .h2 { max-width: 15em; }
/* The popup of the extension, as a copy (extension.html and the home). */
.popup { padding: 16px; border: var(--rule-w) solid var(--rule); border-radius: 22px; background: #fff; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.popup__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.popup__logo { width: 116px; height: 24px; color: var(--ink); }
.popup__pill { padding: 3px 10px; border-radius: 999px; background: var(--fill-2); font-size: 12px; font-weight: 500; color: var(--ink-2); transition: background-color 0.3s, color 0.3s; }
.popup.is-capturing .popup__pill { background: rgba(29, 122, 78, 0.12); color: #1d7a4e; }
.popup__card { padding: 14px; border-radius: 16px; background: var(--card); }
.popup__switch-row { display: flex; align-items: flex-start; gap: 14px; }
.popup__switch-row b { display: block; font-size: 14px; font-weight: 600; }
.popup__switch-row span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.popup__switch { position: relative; flex: none; width: 40px; height: 24px; margin-top: 2px; border-radius: 999px; background: rgba(17, 27, 29, 0.18); transition: background-color 0.3s; }
.popup__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.3s var(--ease); }
.popup.is-capturing .popup__switch { background: var(--teal); }
.popup.is-capturing .popup__switch::after { transform: translateX(16px); }
.popup__counts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.popup__counts div { padding: 10px 12px; border-radius: 12px; background: #fff; }
.popup__counts b { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.popup__counts span { font-size: 12px; color: var(--ink-2); }
.popup__actions { display: flex; gap: 8px; margin-top: 12px; }
.popup__btn { flex: 1; padding: 8px 10px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; text-align: center; transition: transform 0.15s var(--ease); }
.popup__btn--ink { background: var(--ink); color: #fff; }
.popup__btn.is-pressed { transform: scale(0.94); }
.popup__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.popup__foot b { font-weight: 500; color: var(--ink); }
.popup__foot code { padding: 0; background: none; font-size: 12px; color: var(--ink-2); }
.term { container-type: inline-size; overflow: hidden; border-radius: var(--radius-lg); background: #071315; color: #dfeceb; }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.term__bar span { flex: 1; margin-right: 44px; font-size: 12px; text-align: center; color: rgba(223, 236, 235, 0.55); }
.term__bar button { padding: 2px 4px; font-size: 12px; color: rgba(223, 236, 235, 0.65); }
/* A line that scrolls up out of the screen fades under the title bar. */
.term__screen { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px); mask-image: linear-gradient(180deg, transparent 0, #000 14px); }
.term__screen { height: 380px; overflow: hidden; padding: 16px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; }
.term__line { min-height: 1.6em; white-space: pre-wrap; overflow-wrap: anywhere; }
.term__line--cmd { margin-top: 6px; }
.term__line--banner { margin: 6px 0 2px; white-space: pre; overflow-wrap: normal; font-size: min(12.5px, calc((100cqi - 40px) / 40)); line-height: 1.2; color: var(--teal-light); }
.term__line--step { padding-left: 4ch; text-indent: -4ch; }
.term__line--dim { color: rgba(223, 236, 235, 0.55); }
.term__line--accent, .term__accent { color: #8fd3b2; }
.term__prompt { font-weight: 700; color: var(--teal-light); }
.term__cursor { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--teal-light); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Cookie settings: a panel that the footer link opens. No banner: the site
   sets no cookie that needs consent. */
html:has(dialog.cookies[open]) { overflow: hidden; }
.cookies { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.45); }
.cookies[open] { animation: cookies-in 0.35s var(--ease); }
.cookies::backdrop { background: rgba(11, 23, 25, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes cookies-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.cookies__card { display: grid; gap: 16px; padding: 28px; }
.cookies__title { font-family: var(--font-title); font-size: 24px; font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }
.cookies__lead { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cookies__list { display: grid; gap: 10px; }
.cookies__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--card); }
.cookies__list b { display: block; font-size: 14.5px; font-weight: 500; }
.cookies__list span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.cookies__list i { padding: 4px 10px; border-radius: 999px; background: var(--fill-2); font-size: 12px; font-style: normal; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cookies__end { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 4px; }
.cookies__end a { font-size: 13.5px; color: var(--ink-2); text-underline-offset: 3px; }
.reduce .cookies[open] { animation: none; }
/* Call to action: a dark card with ribbons of light that move (a small canvas
   that next.js draws and blurs; a CSS blur on it cost the GPU a pass at each
   frame); the CSS streaks are the fallback. The height and the title follow
   the card at the end of Primefold. */
.cta { padding: var(--space) 0 36px; }
.cta__card { position: relative; display: grid; place-items: center; min-height: clamp(320px, 27vw, 400px); overflow: hidden; border-radius: var(--radius-xl); background: var(--night); color: #fff; text-align: center; isolation: isolate; }
.cta__streaks { position: absolute; inset: 0; z-index: -1; filter: blur(42px); }
.cta__streaks i { position: absolute; top: -40%; width: 15%; height: 180%; border-radius: 999px; transform: rotate(32deg); animation: streak 20s ease-in-out infinite alternate; }
.cta__streaks i:nth-child(1) { left: 2%; background: rgba(80, 151, 166, 0.85); }
.cta__streaks i:nth-child(2) { left: 18%; width: 9%; background: rgba(143, 203, 214, 0.5); animation-duration: 24s; animation-delay: -6s; }
.cta__streaks i:nth-child(3) { left: 62%; width: 11%; background: rgba(224, 123, 103, 0.55); animation-duration: 26s; animation-delay: -3s; }
.cta__streaks i:nth-child(4) { left: 78%; background: rgba(227, 166, 74, 0.6); animation-duration: 22s; animation-delay: -9s; }
.cta__streaks i:nth-child(5) { left: 40%; width: 7%; background: rgba(80, 151, 166, 0.35); animation-duration: 30s; }
@keyframes streak { to { transform: rotate(32deg) translateX(40%); } }
.cta__flow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; transform: scale(1.1); }
.cta__card.has-flow .cta__streaks { display: none; }
.cta__inner { position: relative; display: grid; justify-items: center; gap: 20px; padding: 64px var(--gutter); }
.cta .display { font-size: clamp(40px, 5vw, 72px); }
.cta .lead { max-width: 30em; color: rgba(255, 255, 255, 0.82); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
/* Footer (after Primefold): the light page ends in a sheet with round lower
   corners and a thin edge, no shadow, over a band of the same colour where
   the name of the product, very large, sinks below the end of the page. In the sheet: the logo and the
   link columns, then a row with the copyright, the legal pages and the e-mail,
   then a row with the flag and what the service stands on. */
.footer { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); }
/* The measures of the Primefold footer: 64px above the content and above the
   first rule, rows of 57px with 12px text, corners of 24px. Every line is a
   real border of the same width, also the round lower edge of the sheet (a
   ring of box-shadow looked thicker than the rules on his screen). */
/* On a screen with a ratio between 1 and 2 (a page zoom, a scaled display),
   Safari draws a 1px border as one device pixel, while Primefold's 1px lines
   take two. 1.61px gives two device pixels from a ratio of 1.25 to 1.85. */
@media (min-resolution: 1.2dppx) and (max-resolution: 1.85dppx), (-webkit-min-device-pixel-ratio: 1.2) and (-webkit-max-device-pixel-ratio: 1.85) {
  :root { --rule-w: 1.61px; }
}
.footer__sheet { position: relative; z-index: 1; padding-top: 64px; border-radius: 0 0 24px 24px; background: var(--paper); }
/* The lower edge: a border on a layer a little wider than the page, so that
   its sides stay out of sight and only the bottom and the corners show. */
.footer__sheet::after { content: ""; position: absolute; top: 0; right: calc(-1 * var(--rule-w)); bottom: calc(-1 * var(--rule-w)); left: calc(-1 * var(--rule-w)); border: var(--rule-w) solid var(--rule); border-top: 0; border-radius: 0 0 calc(24px + var(--rule-w)) calc(24px + var(--rule-w)); pointer-events: none; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.footer__brand { display: inline-flex; }
.footer__brand svg { width: auto; height: 26px; }
.footer__about p { max-width: 24em; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
/* The state of the service, where Primefold has its newsletter form. */
.footer__status { display: none; align-items: center; gap: 10px; height: 40px; margin-top: 24px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 13.5px; font-weight: 500; line-height: 1; color: var(--ink); }
.js .footer__status { display: inline-flex; }
.footer__status i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b9bfc1; transition: background-color 0.4s; }
.footer__status.is-ok i { background: #3fb46e; }
.footer__status.is-down i { background: var(--coral); }
/* The pulse is a ring that grows and fades: scale and opacity only, so the
   compositor plays it and the page itself does no work for it. */
.footer__status.is-ok i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(63, 180, 110, 0.45); animation: status-pulse 2.4s ease-out infinite; }
@keyframes status-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(2.5); opacity: 0; } }
.reduce .footer__status i::after { animation: none; opacity: 0; }
.footer__cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; gap: clamp(32px, 5.5vw, 96px); }
.footer__cols h2 { margin-bottom: 15px; font-size: 16px; font-weight: 500; line-height: 24px; }
.footer__cols li { line-height: 20px; }
.footer__cols li + li { margin-top: 12px; }
.footer__cols a, .footer__legal a { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.footer__cols a:hover, .footer__legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; padding: 20px 0; border-top: var(--rule-w) solid var(--rule); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.footer__top + .footer__row { margin-top: 64px; }
.footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer__legal a { font-size: 12px; }
.footer__mail { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -8px; border-radius: 50%; color: var(--ink); transition: background-color 0.2s; }
.footer__mail:hover { background: rgba(17, 27, 29, 0.06); }
.footer__mail svg { width: 16px; height: 16px; }
.footer__note { display: inline-flex; align-items: flex-start; gap: 12px; }
.footer__facts > span { white-space: nowrap; }
.footer__facts i { font-style: normal; }
.footer__flag { flex: none; width: 16px; height: 16px; border-radius: 3px; }
.footer__facts { display: flex; flex-wrap: wrap; column-gap: 0.3em; }
/* The name: the letters of the logo, cut at about two thirds of their height. */
.footer__word { aspect-ratio: 2109 / 215; margin-top: 32px; overflow: hidden; }
.footer__word svg { display: block; width: 100%; height: auto; color: var(--ink); }
/* Motion: words that rise into place, blocks that fade in */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(112%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 34ms + var(--d, 0ms)); }
.js [data-split].is-in .w > span { transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.15s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* The hero while the page moves on: its text rises more slowly than the page
   and fades, and its picture comes a little closer, over the height of the
   hero (--hero-h, from next.js). These animations follow the scroll, so the
   browser moves them together with the page. Without them, next.js does the
   same at each frame. */
@supports (animation-timeline: scroll()) {
  .js:not(.reduce) [data-hero-inner], .js:not(.reduce) [data-hero-media] { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0px var(--hero-h, 100vh); }
  .js:not(.reduce) [data-hero-inner] { animation-name: hero-text; }
  .js:not(.reduce) [data-hero-media] { animation-name: hero-media; }
}
@keyframes hero-text { 0% { transform: none; opacity: 1; } 66.667% { opacity: 0; } 100% { transform: translate3d(0, calc(var(--hero-h, 100vh) * 0.32), 0); opacity: 0; } }
@keyframes hero-media { to { transform: scale(1.07); } }
/* Dashboards: the employee's dashboard or the HR view, in a window over a
   video, with a switch (the home and the product page; next.js: data-views). */
.product__bar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.seg { display: inline-flex; flex: none; padding: 4px; border-radius: 999px; background: rgba(17, 27, 29, 0.06); }
.seg button { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(17, 27, 29, 0.35); }
.frame { position: relative; overflow: hidden; padding: clamp(28px, 5.4vw, 84px) clamp(14px, 6.6vw, 110px); border-radius: var(--radius-xl); background: var(--night); isolation: isolate; }
.frame__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px); transform: scale(1.05); opacity: 0; transition: opacity 0.9s var(--ease); }
.frame__video.is-on { opacity: 1; }
.frame__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 23, 25, 0.55), rgba(11, 23, 25, 0.35) 45%, rgba(11, 23, 25, 0.6)); }
.frame__window { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #f2f4f4; box-shadow: 0 50px 110px -40px rgba(0, 0, 0, 0.8); will-change: transform; }
/* The window moves a little slower than the page while the frame crosses the
   screen: 8 % of the distance from the middle of the frame to the middle of
   the screen (--frame-h, from next.js). This animation follows the scroll, so
   the browser moves it together with the page. Without it, next.js does the
   same at each frame. Not on a small screen. */
@supports (animation-timeline: view()) {
  @media (min-width: 961px) {
    .js:not(.reduce) .frame { view-timeline: --frame block; }
    .js:not(.reduce) .frame__window { animation-name: frame-lift; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --frame; animation-range: cover 0% cover 100%; }
  }
}
@keyframes frame-lift {
  from { transform: translate3d(0, calc((100vh + var(--frame-h, 0px)) * 0.04), 0); }
  to { transform: translate3d(0, calc((100vh + var(--frame-h, 0px)) * -0.04), 0); }
}
.frame__chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #e6eaea; }
.frame__chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(17, 27, 29, 0.16); }
.frame__chrome span { flex: 1; margin-right: 41px; font-size: 12px; font-weight: 500; text-align: center; color: var(--ink-2); }
.frame__screens { position: relative; aspect-ratio: 16 / 10; }
.frame__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease); }
.frame__shot.is-on { opacity: 1; }
.frame__shot[hidden] { display: block; visibility: hidden; }
.frame__note { position: absolute; right: 16px; bottom: 14px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(11, 23, 25, 0.5); font-size: 11.5px; color: var(--on-night-2); }
/* On a small screen the note goes under the window, not on the dashboard. */
@media (max-width: 640px) {
  .frame { padding: 18px 12px 48px; }
  .frame__note { bottom: 12px; }
  .frame__chrome { height: 26px; }
  .frame__chrome span { font-size: 10.5px; }
}
/* Medium screens */
@media (max-width: 1180px) {
  .nav__links > li > a, .nav__trigger { padding: 8px 9px; }
  .nav__links { font-size: 14px; }
}
/* Small screens */
@media (max-width: 960px) {
  :root { --bar-h: 56px; --nav-space: calc(72px + var(--safe-top)); --sheet-r: 28px; }
  .nav__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__links, .nav__login, .nav__signup, .nav__lang { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer__cols { justify-content: start; }
  .term__screen { height: 340px; }
}
/* Where the row of the copyright does not hold on one line: the e-mail at the
   end of its first line, the legal pages on the lines below. */
@media (max-width: 767px) {
  .footer__top + .footer__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
  .footer__top + .footer__row .footer__end { display: contents; }
  .footer__mail { grid-row: 1; grid-column: 2; }
  .footer__legal { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --radius-xl: 22px; }
  .nav__bar { padding: 0 4px; }
  .nav__brand { margin-left: 4px; }
  .nav__brand svg { height: 24px; }
  .footer__cols { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 20px; hyphens: manual; }
  /* German, French and Italian are too long for three columns: two columns,
     Product and Company on the first line, Explore below Product. Each
     column is at least as wide as its longest link, so no link breaks. */
  :lang(de) .footer__cols, :lang(fr) .footer__cols, :lang(it) .footer__cols { grid-template-columns: repeat(2, minmax(max-content, 1fr)); justify-content: stretch; gap: 32px 20px; }
  :lang(de) .footer__cols > :nth-child(2), :lang(fr) .footer__cols > :nth-child(2), :lang(it) .footer__cols > :nth-child(2) { grid-row: 2; grid-column: 1; }
  :lang(de) .footer__cols > :nth-child(3), :lang(fr) .footer__cols > :nth-child(3), :lang(it) .footer__cols > :nth-child(3) { grid-row: 1; grid-column: 2; }
  /* The legal pages in two lines of two, as far apart as the first line. */
  .footer__legal { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 8px 16px; }
  .footer__facts { flex-direction: column; }
  .footer__facts > span { white-space: normal; }
  .footer__sheet { padding-top: 48px; }
  .footer__top + .footer__row { margin-top: 48px; }
  .footer__facts i { display: none; }
  /* The menu fits the visible screen of a phone without scrolling, the
     buttons included (svh: the height with the browser bars shown): the
     words get a little smaller on a shorter screen. */
  .menu { padding-bottom: 16px; }
  .menu__inner > a { font-size: clamp(17px, 3.5svh, 26px); line-height: 1.25; }
  .menu__group { margin: clamp(8px, 2.1svh, 22px) 0 4px; }
  .menu__group:first-child { margin-top: 4px; }
  .menu__langs { font-size: clamp(15px, 2.5svh, 20px); }
  .menu__actions { margin-top: clamp(12px, 2.6svh, 32px); }
  .cta__inner { padding: 56px 20px; }
}
/* The shortest phones (an iPhone SE with the browser bars): the menu a
   little tighter still, so that it fits too. */
@media (max-width: 640px) and (max-height: 600px) {
  .menu__inner > a { font-size: 16.5px; }
  .menu__group { margin-top: 8px; }
  .menu__langs { font-size: 15px; }
}
/* Less motion: nothing moves with the scroll, and no words or blocks rise. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}
.reduce [data-split] .w > span, .reduce [data-reveal] { transform: none; opacity: 1; }