/* Custodian, new site (preview): every page other than the home. Loaded after
   next.css. The content of each page keeps the markup of the first site
   (apps/landing), and so its class names; this file draws those parts in the
   look of the home: warm paper, white cards with no border, dark cards for the
   pictures, Instrument Sans, pill buttons, thin rules. */

/* Tokens of the first site, put on the new palette. */
:root {
  --brand: var(--teal);
  --brand-ink: var(--teal-ink);
  --brand-deep: var(--night);
  --brand-deeper: #071315;
  --brand-soft: #e8e6e0;
  --brand-tint: var(--fill-2);
  --brand-line: rgba(17, 27, 29, 0.14);
  --ink-3: #5f696b; /* 4.5:1 or more on white and on --card */
  --success: #1d7a4e;
  --success-soft: #e3f1e8;
  --warning: #9a5510;
  --warning-soft: #f8ecdc;
  --danger: #b42318;
  --danger-soft: #f9e6e3;
  --shadow: 0 1px 2px rgba(17, 27, 29, 0.04), 0 14px 34px -16px rgba(17, 27, 29, 0.16);
  --shadow-lg: 0 34px 80px -34px rgba(17, 27, 29, 0.38);
}

/* ---------- page head ---------- */

/* The top of a page: the title, a short lead and, on some pages, buttons, on
   the white page. The content starts close under it, so the first screen
   shows the content too, as on the pages of Primefold and Papermark. The head
   has the width of the content under it, so the title starts where the
   content starts. */
.page-head { padding-top: calc(var(--nav-space) + clamp(36px, 5vw, 80px)); }
.page-head--reading .wrap { max-width: calc(720px + 2 * var(--gutter)); }
.page-head h1 { max-width: 15em; font-family: var(--font-title); font-size: clamp(34px, 2.4vw + 28px, 64px); font-weight: 400; line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; color: var(--ink); }
/* A page title breaks a word only where the translation marks it (a soft
   hyphen in Auftrags-bearbeitungs-vertrag), never at a point of the
   dictionary of the browser. */
:root:not([lang|="en"]) .page-head h1 { -webkit-hyphens: manual; hyphens: manual; }
.page-head__lead { max-width: 36em; margin-top: 20px; font-size: var(--lead-size); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.page-head__lead strong { font-weight: 500; color: var(--ink); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
/* The head in the middle, as on a product page of Papermark: the title, the
   lead and the two buttons centred (the pages of the bar, not the home, the
   sign-up and the legal pages). A picture under it (the terminal of the
   connector) keeps its text on the left. */
.page-head--center { text-align: center; }
.page-head--center h1, .page-head--center .page-head__lead { margin-left: auto; margin-right: auto; }
.page-head--center .page-head__actions { justify-content: center; }
.page-head__visual { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; text-align: left; }
/* The extension popup under the head of extension.html: a copy of the real
   one (apps/extension/popup.html). It plays once when it is on screen
   (pages.js): capture switches on, three chats wait, Send now sends them. */
.page-head__visual--popup { max-width: 380px; }
/* A head with a picture or a card next to the text (the connector, the pilot
   setup). On one column the picture comes after the text. */
.page-head__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 900px) { .page-head__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); } }
.page-head__split h1 { max-width: 12em; }
/* Under the head, the sheet has no corners to show: it starts at the top of
   the page, and its first part starts close under the head. */
.page-head + .sheet { margin-top: 0; border-radius: 0; }
/* A page with no head (try.html): the sheet starts under the bar. */
.sheet--first { margin-top: 0; border-radius: 0; padding-top: var(--nav-space); }
.page-head + .sheet > :first-child { padding-top: clamp(40px, 4.5vw, 64px); }
@media (max-width: 600px) { .page-head__actions .btn { flex: 1 1 auto; } .page-head--center .page-head__actions .btn { flex: 0 1 auto; } }

/* ---------- layout ---------- */

/* The head, the content, the call to action and the footer have the edges of
   the bar, as on the home: one edge for the whole page. The narrow wraps
   (forms, legal text) stay in the middle. */
.page-main .wrap { max-width: calc(1120px + 2 * var(--gutter)); }
.section .wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.section .wrap--reading { max-width: calc(720px + 2 * var(--gutter)); }

/* Sections as on the home (next.css, --space): one space between two
   sections, above each section only, and a little less when the section
   starts with a title. The last part of a page without the dark card keeps
   36px under it, as the card does, before the footer. */
.section { position: relative; padding: calc(var(--space) - var(--trim, 0px)) 0 0; }
.section:has(> .wrap > .section-head:first-child) { --trim: var(--trim-h2); }
.sheet > :last-child:not(.cta) { padding-bottom: 36px; }
.section--tint, .section--soft { background: var(--paper-2); }
.section--line-top { border-top: 1px solid var(--line); }
.section--deep { background: var(--night); color: var(--on-night); }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep p { color: rgba(255, 255, 255, 0.82); }
.section--deep a { color: #fff; }

/* The title of a section starts on the left, at the edge of what follows it,
   as on the product page; only the head of a page is in the middle. */
.section-head { max-width: 720px; margin: 0 0 clamp(36px, 4vw, 60px); text-align: left; }
.section-head .row { justify-content: flex-start; }
.section-head:last-child { margin-bottom: 0; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 + p, .section-head h1 + p { margin-top: 18px; }

/* Content type: Instrument Sans, regular titles, quiet text. */
.section h2, .onboard h2, .signup-hero h2, .page-main h1, .page-main h2, .centre-card h1, .onboard h1 { font-family: var(--font-title); font-weight: 400; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; color: var(--ink); }
.section h2, .page-main h2 { font-size: clamp(30px, 3.2vw, 46px); }
.page-main h1 { font-size: clamp(34px, 3.6vw, 52px); }
.section h3, .onboard h3, .page-main h3, .page-head h3 { font-family: var(--font-title); font-size: clamp(18px, 1.35vw, 20px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
.section h4, .onboard h4, .signup-hero h4, .page-main h4 { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.section p + p, .onboard p + p, .signup-hero p + p, .page-main p + p { margin-top: 1em; }
.section p, .onboard p, .signup-hero p, .page-main p { text-wrap: pretty; }
.section strong, .onboard strong, .signup-hero strong, .page-main strong { font-weight: 500; color: var(--ink); }
.section em { font-style: italic; }
.section a:not(.btn), .onboard a:not(.btn), .signup-hero a:not(.btn), .page-main a:not(.btn), .centre-card a:not(.btn):not(.brand) { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.section a:not(.btn):hover, .onboard a:not(.btn):hover, .signup-hero a:not(.btn):hover, .page-main a:not(.btn):hover { color: var(--teal-ink); }
.section--deep a:not(.btn) { color: #fff; }
/* No specificity: the margin helpers and the lists of components (.kind__list,
   .mt-3) must win over this reset. */
:where(.section) :where(ul, ol) { margin: 0; }
code { padding: 0.1em 0.42em; border-radius: 6px; background: rgba(17, 27, 29, 0.06); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; white-space: nowrap; }

.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tiny { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.tiny a { color: inherit; }
.center { text-align: center; }
.accent { color: var(--teal-ink); }

.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; } /* a long line inside a card must not widen the column */
/* Two cards a row from tablet width; four cards make two by two, never three and one. */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
/* Three cards: one column, then one row. Never two and one. */
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Four cards: one column, then two by two, then one row. Never three and one. */
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.grid--pair { grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 400px) { .grid--pair { grid-template-columns: 1fr; } }
.grid--split { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 900px) { .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); } }
@media (min-width: 900px) { .grid--split-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.grid--top { align-items: start; }
/* On one column the text of a step comes before its picture. */
@media (max-width: 899px) { .grid--split > :has(> .eyebrow, > h2) { order: -1; } }
@media (max-width: 899px) { .grid--split > .text-first { order: -1; } }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row--center { justify-content: center; }

/* ---------- buttons of the first site, in the new look ---------- */

.btn { border: 0; }
.btn .ic { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.btn:hover .ic-arrow, .btn:focus-visible .ic-arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: #26363a; color: #fff; }
.btn--ghost, .btn--soft { background: rgba(17, 27, 29, 0.06); color: var(--ink); }
.btn--ghost:hover, .btn--soft:hover { background: rgba(17, 27, 29, 0.11); color: var(--ink); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #ecebe7; color: var(--ink); }
.btn--outline-white { background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.btn--lg { height: 50px; padding: 0 22px; font-size: 15.5px; }
.btn--block { width: 100%; height: auto; min-height: 50px; padding-top: 12px; padding-bottom: 12px; white-space: normal; line-height: 1.25; }
/* On the narrowest phones a long label wraps inside its button. */
@media (max-width: 400px) { .btn { height: auto; min-height: 46px; padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; line-height: 1.25; } }

.text-link { display: inline-flex; align-items: center; gap: 6px; margin: -10px 0; padding: 10px 0; font-weight: 500; text-decoration: none; } /* 44px to tap, same layout */
.section a.text-link, .page-main a.text-link { text-decoration: none; }
.text-link .ic { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.text-link:hover .ic { transform: translateX(3px); }

/* ---------- icons (CSS masks, currentColor) ---------- */

.ic { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E"); }
.ic-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.ic-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ic-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.6-3 8.3-7 9.5-4-1.2-7-4.9-7-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 018 0v3'/%3E%3C/svg%3E"); }
.ic-eye-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.3A9.8 9.8 0 0112 6c4.5 0 8 3.2 9.5 6-.5.9-1.2 1.9-2.1 2.8M6.6 6.8C4.6 8 3.2 9.9 2.5 12c1.5 2.8 5 6 9.5 6 1.5 0 2.9-.3 4.1-.9'/%3E%3Cpath d='M9.9 9.9a3 3 0 004.2 4.2'/%3E%3C/svg%3E"); }
.ic-pause { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E"); }
.ic-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.5-3.5 3.2-5.5 6.5-5.5s6 2 6.5 5.5'/%3E%3Cpath d='M16 5a3.2 3.2 0 010 6.3M18 14.6c2 .6 3.3 2.2 3.5 4.4'/%3E%3C/svg%3E"); }
.ic-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.7-4 3.8-6.5 7.5-6.5s6.8 2.5 7.5 6.5'/%3E%3C/svg%3E"); }
.ic-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M5 15l4-5 4 3 6-7'/%3E%3C/svg%3E"); }
.ic-cpu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Cpath d='M9 2.5v3.5M15 2.5v3.5M9 18v3.5M15 18v3.5M2.5 9H6M2.5 15H6M18 9h3.5M18 15h3.5'/%3E%3C/svg%3E"); }
.ic-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E"); }
.ic-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M7 7l.8 12.5h8.4L17 7'/%3E%3C/svg%3E"); }
.ic-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.ic-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); }
.ic-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8 4.5-8 4.5-8-4.5z'/%3E%3Cpath d='M4 13l8 4.5 8-4.5M4 17.5L12 22l8-4.5'/%3E%3C/svg%3E"); }
.ic-compass { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.ic-spark { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 4.6 3.4 7.4 8 8-4.6.6-7.4 3.4-8 8-.6-4.6-3.4-7.4-8-8 4.6-.6 7.4-3.4 8-8z'/%3E%3C/svg%3E"); }
.ic-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); }
.ic-warn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.5'/%3E%3C/svg%3E"); }
.ic-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E"); }
.ic-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2'/%3E%3C/svg%3E"); }
.ic-ring { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 84 84'%3E%3Cpath fill='%23000' d='M9,85h24v6H9V85z%20M67,85v6h24v-6H67z%20M22,43c0-15.4,12.6-28,28-28s28,12.6,28,28c0,9-4.3,17.1-11,22.2v7.2%20C77.2,66.5,84,55.6,84,43C84,24.2,68.8,9,50,9S16,24.2,16,43c0,12.6,6.8,23.5,17,29.4v-7.2C26.3,60.1,22,52,22,43z%20M47,91h6V66h-6%20V91z%20M57,91h6V66h-6V91z%20M37,91h6V66h-6V91z'/%3E%3C/svg%3E"); }

/* ---------- cards ---------- */

.card { padding: 26px; border-radius: var(--radius-lg); background: var(--card); }
.card--stack .checks { margin-bottom: 32px; } /* a plan: the list keeps clear of the button below it */
.card--soft { background: var(--card); }
.section--tint .card--soft, .section--soft .card--soft { background: var(--card); }
.card--tint { background: var(--card); }
/* A table in a card (how-it-works, step 2): only the card has a surface; the
   table and its head row have none of their own. */
.card--table .table-wrap { border-radius: 0; background: none; }
.card--table .table thead th { background: none; }
.card--deep { background: var(--night); color: #fff; }
.card--deep h3, .card--deep h4 { color: #fff; }
.card--deep p, .card--deep li { color: rgba(255, 255, 255, 0.84); }
/* Text, the same on every page: 18px from a section title to its text,
   8px from the title of a card, a note or a step to its paragraph (as the
   steps of the home), 14px from a card title to a list or a table. These win
   over the margin helpers (.mt-1, .mt-2) on purpose. */
.section h2:not(.prose h2) + :is(p, .lead) { margin-top: 18px; }
.card h3 + p, .card h4 + p { margin-top: 8px; }
.card :is(h3, h4) + :is(ul, ol, table, .table-wrap) { margin-top: 14px; }
.card p { color: var(--ink-2); }
.card--deep p { color: rgba(255, 255, 255, 0.84); }
.card .tiny { color: var(--ink-3); }
.card > .text-link { margin-top: 8px; }
.card--stack { display: flex; flex-direction: column; }
.card--stack > .text-link, .card--stack > .btn { margin-top: auto; }
.card--stack > p + .text-link, .card--stack > ul + .text-link { padding-top: 28px; }

/* A value or a document in a list: a thin rule, then its title and text. */
.note { padding-top: 20px; border-top: 1px solid var(--line-2); }
.note h3 + p, .note h4 + p { margin-top: 8px; }
.note p { color: var(--ink-2); }
.grid:has(> .note) { row-gap: 36px; }

.checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px; border-radius: 999px; background: rgba(80, 151, 166, 0.14); }
.checks li::after { content: ""; position: absolute; left: 4px; top: calc(0.15em + 4px); width: 12px; height: 12px; background: var(--teal-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.checks--ink li { color: var(--ink); }
.section--deep .checks li, .card--deep .checks li { color: rgba(255, 255, 255, 0.9); }
.section--deep .checks li::before, .card--deep .checks li::before { background: rgba(255, 255, 255, 0.14); }
.section--deep .checks li::after, .card--deep .checks li::after { background: #fff; }
.checks--nots li::before { background: var(--danger-soft); }
.checks--nots li::after { background: var(--danger); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

.bullets { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; list-style: disc; color: var(--ink-2); }
.bullets--ink { color: var(--ink); }

/* ---------- stats ---------- */

.stat { container-type: inline-size; padding: 26px; border-radius: var(--radius-lg); background: var(--card); }
.stat__n { display: block; font-family: var(--font-title); font-size: clamp(40px, 3.6vw, 56px); font-weight: 400; line-height: 0.95; letter-spacing: -0.04em; white-space: nowrap; color: var(--ink); }
/* In a narrow card the figure shrinks with the card, so a range such as 50–200% fits. */
@supports (font-size: 1cqi) { .stat__n { font-size: min(clamp(40px, 3.6vw, 56px), 19cqi); } }
.stat__l { display: block; margin-top: 14px; font-weight: 500; color: var(--ink); }
.stat__s { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.stat__src { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
/* Counters that run while the page is open (why-it-matters, [data-live]):
   figures with digits of one width, so they do not shake while they grow,
   and a pause button under them. */
.live .stat__n { font-variant-numeric: tabular-nums; }
.live__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.live__time { font-size: 14px; color: var(--ink-2); }
.live__time b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.live__pause { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(17, 27, 29, 0.06); color: var(--ink); transition: background-color 0.2s; }
.live__pause:hover { background: rgba(17, 27, 29, 0.11); }
.live__pause svg { width: 12px; height: 12px; }
.live__pause .i-play, .live__pause[aria-pressed="true"] .i-pause { display: none; }
.live__pause[aria-pressed="true"] .i-play { display: block; }
.stat__src a { color: inherit; }
.stat--deep { background: rgba(255, 255, 255, 0.08); }
.stat--deep .stat__n, .stat--deep .stat__l { color: #fff; }
.stat--deep .stat__s { color: rgba(255, 255, 255, 0.8); }

/* ---------- charts of published figures (why-it-matters.html) ---------- */

/* A section of evidence: a chart on one side, its figures on the other. */
.evidence { align-items: stretch; }
.evidence__stats { display: grid; gap: 16px; }
/* Side by side with a chart, the cards share the height of the column. */
@media (min-width: 900px) { .evidence__stats { grid-auto-rows: 1fr; } }
.evidence__col { display: flex; flex-direction: column; }
.evidence__col > .evidence__stats { flex: 1; }
.chart { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.chart__title { display: block; font-size: 17px; font-weight: 500; color: var(--ink); }
.chart__sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.chart__note { margin-top: auto; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.chart__note + .stat__src { margin-top: -12px; }

/* Bars: each row has its label, a track of 0 to 100 %, and the value. */
.chart__bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.evidence .chart__bars { flex: 1 1 auto; align-content: space-evenly; }
.chart__bars li { display: grid; grid-template-columns: minmax(0, 12.5rem) 1fr 2.75rem; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.chart__bars b { text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart__track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--fill-2); }
.chart__track i { display: block; width: calc(var(--v) * 1%); height: 100%; border-radius: inherit; background: var(--c, var(--teal)); transform-origin: left center; }
@media (max-width: 560px) {
  .chart__bars li { grid-template-columns: 1fr 2.75rem; row-gap: 6px; }
  .chart__bars li > span:first-child { grid-column: 1 / -1; }
}

/* A line over survey years. The stroke does not scale with the plot, and the
   dots and labels are HTML: all stay sharp. min-width 0: on a phone the plot
   has a ratio of 3 to 2 and a height of 260 px or more, and from these
   WebKit made it at least 390 px wide, wider than the screen. */
.chart__plot { position: relative; flex: 1 1 auto; min-width: 0; min-height: 220px; margin: 18px 10px 30px 48px; }
@media (max-width: 899px) { .chart__plot { flex: none; min-height: 0; aspect-ratio: 3 / 2; } }
.chart--wide .chart__plot { min-height: 260px; }
.chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__line { fill: none; stroke: var(--c); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__grid { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 1%); border-top: 1px dashed var(--line-2); }
.chart__grid span { position: absolute; right: calc(100% + 12px); top: -0.65em; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart__point { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); width: 10px; height: 10px; margin: 0 0 -5px -5px; border: 2px solid var(--c); border-radius: 50%; background: var(--card); }
.chart__point b { position: absolute; bottom: 12px; left: 50%; padding: 0 3px; border-radius: 4px; background: var(--card); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.chart__point--below b { top: 12px; bottom: auto; }
.chart__point--key { width: 14px; height: 14px; margin: 0 0 -7px -7px; background: var(--c); }
.chart__point--key b { bottom: 16px; font-size: 14px; color: var(--ink); }
.chart__point--first b { left: -2px; transform: none; }
.chart__point--key b { right: -2px; left: auto; transform: none; }
.chart__year { position: absolute; top: calc(100% + 10px); left: calc(var(--x) * 1%); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; transform: translateX(-50%); }
@media (max-width: 480px) {
  .chart__point:not(.chart__point--edge) b, .chart__year--minor { display: none; }
}

/* In view: bars grow, the line draws, the dots fade in. */
.reveal .chart__track i { transform: scaleX(0); transition: transform 1s var(--ease); }
.reveal.visible .chart__track i { transform: none; }
.reveal .chart__bars li:nth-child(2) i { transition-delay: 0.08s; }
.reveal .chart__bars li:nth-child(3) i { transition-delay: 0.16s; }
.reveal .chart__bars li:nth-child(4) i { transition-delay: 0.24s; }
.reveal .chart__bars li:nth-child(5) i { transition-delay: 0.32s; }
.reveal .chart__bars li:nth-child(6) i { transition-delay: 0.4s; }
.reveal .chart__plot svg { clip-path: inset(-8px 100% -8px -8px); transition: clip-path 1.4s 0.2s var(--ease); }
.reveal.visible .chart__plot svg { clip-path: inset(-8px -8px -8px -8px); }
/* Each dot comes in when the line reaches it; the last one, the latest
   figure, then sends out a ring twice and stays still. */
.reveal .chart__point { opacity: 0; transform: scale(0.4); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); transition-delay: calc(0.3s + var(--x) * 0.012s); }
.reveal.visible .chart__point { opacity: 1; transform: none; }
.chart__point--key::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--c); border-radius: 50%; opacity: 0; pointer-events: none; }
.reveal.visible .chart__point--key::after { animation: point-ring 1.4s 1.8s var(--ease) 2; }
@keyframes point-ring { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(3); } }

/* Vertical bar chart of the HR view test (security.html#hr-view). Bar
   heights are percent of 0-100; the dashed line marks the limit of 5%. */
.vchart { --vchart-h: 220px; margin-left: 0; margin-right: 0; padding: 26px 28px; }
.vchart figcaption { margin-bottom: 12px; }
.vchart .chart__note { margin-top: 18px; }
.vchart__legend { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-2); }
.vchart__swatch { display: inline-block; width: 12px; height: 12px; margin-left: 6px; border-radius: 3px; }
.vchart__swatch--stress, .vchart__bar--stress { background: var(--coral); }
.vchart__swatch--states, .vchart__bar--states { background: var(--amber); }
.vchart__plot { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 28px; }
.vchart__limit { position: absolute; left: -6px; right: -6px; bottom: 5%; z-index: 1; border-top: 2px dashed var(--ink-2); pointer-events: none; }
.vchart__group { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vchart__bars { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 100%; height: var(--vchart-h); border-bottom: 1px solid var(--line-2); }
.vchart__bar { position: relative; width: min(28px, 40%); height: var(--v); border-radius: 5px 5px 0 0; }
.vchart__value { position: absolute; bottom: 100%; left: 50%; z-index: 2; margin-bottom: 3px; padding: 0 3px; border-radius: 4px; background: var(--card); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; transform: translateX(-50%); }
.vchart__name { height: 60px; margin: 8px 0 4px; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.vchart__group--current .vchart__name { font-weight: 500; color: var(--ink); }
.chart__verdict { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.chart__verdict--fail { background: var(--danger-soft); color: var(--danger); }
.chart__verdict--warn { background: var(--warning-soft); color: var(--warning); }
.chart__verdict--pass { background: var(--success-soft); color: var(--success); }
/* On a phone the four columns are too narrow for their names: each design
   is a row, with its name, its two bars drawn sideways and its verdict. The
   dashed limit is then a line down each row, at 5% of the width. */
@media (max-width: 560px) {
  .vchart { padding: 20px 16px; }
  .vchart__plot { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
  .vchart__group { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line-2); text-align: left; }
  .vchart__group:first-child { border-top: 0; padding-top: 8px; }
  .vchart__name { order: -1; height: auto; margin: 0; font-size: 14px; }
  .vchart__bars { flex-direction: column; align-items: flex-start; gap: 6px; height: auto; padding: 2px 0; border-bottom: 0; border-left: 1px solid var(--line-2); }
  .vchart__bar { width: var(--v); min-width: 2px; height: 10px; border-radius: 0 4px 4px 0; }
  /* The value covers the dashed line where they meet. */
  .vchart__value { top: 50%; bottom: auto; left: 100%; margin: 0 0 0 6px; padding: 1px 3px; font-size: 12px; line-height: 1; transform: translateY(-50%); }
  .vchart__limit { top: -4px; bottom: -4px; left: 5%; right: auto; border-top: 0; border-left: 2px dashed var(--ink-2); }
}

/* Footnote numbers and their list (security.html#hr-view). */
.fn-ref { margin-left: 1px; font-size: 0.7em; line-height: 0; }
.fn-ref a { color: var(--teal-ink); text-decoration: none; }
.section .fn-ref a { color: var(--teal-ink); text-decoration: none; }
.footnotes { margin: 14px 0 0; padding: 10px 0 0 1.25rem; border-top: 1px solid var(--line); list-style: decimal; font-size: 13px; color: var(--ink-3); }
.footnotes li { margin: 2px 0; }
#references .footnotes { margin-top: 8px; padding-top: 0; border-top: 0; }

/* Two tones in a title: the second part in the soft ink. */
.two-tone .accent { display: block; color: var(--ink-soft); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius); background: var(--card); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { border-top: 0; background: var(--fill-2); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.table--keys th:first-child { width: 44%; }
.table--tools th:first-child, .table--tools td:first-child { width: 1%; white-space: nowrap; }
.table--tools th:nth-child(2) { width: 46%; }
/* The name of a button in an answer stays on one line. */
.table--tools td em, .cmd-table td em { white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td strong { color: var(--ink); }
@media (max-width: 600px) {
  .table { font-size: 14px; }
  .table th, .table td { padding: 10px; overflow-wrap: break-word; }
}

/* ---------- prose (legal pages) ---------- */

.prose { font-size: 17px; color: var(--ink-2); }
.prose h2 { margin: 56px 0 16px; font-size: clamp(24px, 2.2vw, 30px); }
.prose h2 + h3 { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; font-size: 19px; }
.prose p + p { margin-top: 12px; }
.prose ul, .prose ol { display: grid; gap: 6px; margin: 12px 0; padding-left: 1.4em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose strong { color: var(--ink); }
.prose .table-wrap { margin: 16px 0; }
.prose .contact-box { margin-top: 16px; }
.prose > :first-child { margin-top: 0; }

.summary { padding: 24px 26px; border-radius: var(--radius-lg); background: var(--card); color: var(--ink-2); }
.summary strong { color: var(--ink); }
.contact-box { padding: 20px 24px; border-radius: var(--radius); background: var(--card); }
.meta-line { color: var(--ink-3); }
@media (max-width: 600px) { .meta-line .meta-sep { display: none; } .meta-line > .nowrap { display: block; } }

/* ---------- forms ---------- */

.field { display: grid; gap: 8px; }
.field > span:first-child, .label { font-size: 15px; font-weight: 500; color: var(--ink); }
.input { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; /* 16px or more: iOS does not zoom into the field */ transition: border-color 0.2s, box-shadow 0.2s; }
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(17, 27, 29, 0.08); }
.help { font-size: 14px; color: var(--ink-2); }
.field__optional { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
textarea.input { min-height: 150px; line-height: 1.5; resize: vertical; }
/* A select looks like the other fields: no system arrow, a small chevron. */
select.input { -webkit-appearance: none; appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525d5f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 12px; }
/* The contact form's trap for programs: out of view, out of the tab order. */
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Contact: the check of Cloudflare (a box of 300 x 65) and the button share a
   line where they fit; on a narrow card the button goes under it, full width. */
.contact__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* Where the card is narrower than the box (a phone of 360 px), the box
   reaches into the padding of the card, the same on both sides. */
.contact__send .turnstile { flex: 0 0 300px; margin-inline: min(0px, (100% - 300px) / 2); }
.contact__send .btn { flex: 1 1 200px; width: auto; }
#contact-form textarea.input { min-height: 112px; }
/* Email and Topic side by side only where the card is wide enough for the
   longest topic of every language. */
.contact__duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1360px) {
  .contact__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.form-status { padding: 12px 16px; border-radius: 12px; background: var(--fill-2); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.form-status:empty, .form-status[hidden] { display: none; }
form p:empty { display: none; }
.form-status[data-state="neutral"] { padding: 0; background: none; font-weight: 400; }
.form-status[data-state="success"] { background: var(--success-soft); color: var(--success); }
.form-status[data-state="warning"] { background: var(--warning-soft); color: var(--warning); }
.form-status[data-state="error"] { background: var(--danger-soft); color: var(--danger); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(17, 27, 29, 0.06); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--teal); }
.chip[data-state="success"] { background: var(--success-soft); color: var(--success); }
.chip[data-state="warning"] { background: var(--warning-soft); color: var(--warning); }
.chip[data-state="error"] { background: var(--danger-soft); color: var(--danger); }
.chip[data-state] ::before, .chip[data-state]::before { background: currentColor; }
.chip--plain::before { display: none; }

.checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink); }
.checkbox input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }

.code-block { display: block; margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: rgba(17, 27, 29, 0.06); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

.notice { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--fill-2); font-size: 15px; color: var(--ink-2); }
.notice .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--teal-ink); }
.notice--success { background: var(--success-soft); color: var(--success); }
.notice--success .ic { color: var(--success); }
.notice--warning { background: var(--warning-soft); color: var(--warning); }
.notice--warning .ic { color: var(--warning); }
.turnstile { min-height: 65px; }

/* ---------- the trial page: the sign-up, then steps 2 and 3 ---------- */

.onboard { padding: clamp(32px, 4vw, 56px) 0 0; }

.stepper { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.stepper::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: var(--line-2); }
.stepper li { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; padding: 8px 0; font-weight: 500; color: var(--ink-2); }
.stepper b { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line-2); border-radius: 999px; background: var(--paper); font-weight: 500; color: var(--ink-2); }
.stepper small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.stepper li[aria-current="step"] { color: var(--ink); }
.stepper li[aria-current="step"] b { border-color: var(--ink); background: var(--ink); color: #fff; }

.step-card { padding: 22px; scroll-margin-top: calc(var(--nav-space) + 16px); }
.step-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-card__head h2, .step-card__head h3 { flex: 1; font-size: 22px; }
/* The connector: its three steps, one card under the other. */
.connect-steps { display: grid; gap: 16px; padding: 0; list-style: none; }
.step-card__n { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); font-size: 14px; font-weight: 500; color: #fff; }
.step-card__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.step-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Sign-up after app.papermark.com/login (his requests of 4 October 2026): one
   screen with no bar and no footer, only the sign-up. On a desktop the page
   does not scroll; a half scrolls by itself only in a window too low for it.
   On the left, on white, the form; on the right the dashboard of an employee
   and the three steps, then steps 2 and 3 once the account is made. */
.signup-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
@media (min-width: 1024px) {
  body.auth-page { overflow: hidden; }
  .signup-hero { height: 100svh; }
  .signup-hero__side, .signup-hero__aside { overflow-y: auto; overscroll-behavior: contain; }
}
/* Auto margins centre the panel, and let it start at the top when it is
   higher than the window (centred content would be cut at the top). */
.signup-hero__side { display: flex; flex-direction: column; padding: clamp(20px, 4.5vh, 48px) clamp(20px, 5vw, 64px); }
.signup-hero__panel { width: 100%; max-width: 400px; margin: auto; }
.signup-hero__panel [hidden] { display: none; }
.auth__brand { display: inline-flex; margin-bottom: clamp(18px, 3.6vh, 36px); color: var(--ink); }
.auth__brand svg { width: auto; height: 26px; }
.signup-hero__panel h1 { font-family: var(--font-title); font-size: clamp(28px, 2.4vw, 36px); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); }
.signup-hero__lead { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* Each sentence of the lead goes to a new line as a whole. */
.signup-hero__lead span { display: inline-block; }
.signup-hero__panel .step-form { margin-top: clamp(16px, 2.6vh, 22px); }
.signup-hero__panel .checkbox { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.signup-hero__panel .checkbox input { width: 20px; height: 20px; }
.signup-hero__panel .form-status { margin-top: 14px; }
/* A message (an error, the trial closed) takes the place of the lead. */
.signup-hero__panel:has(> .form-status:is([data-state="error"], [data-state="warning"])) .signup-hero__lead { display: none; }
.signup-hero__panel .form-status[data-state="neutral"] { display: none; }
.signup-hero__panel #register-success { margin-top: 0; }
.signup-hero__panel #register-success p + p { margin-top: 8px; }
.signup-hero__foot { margin-top: clamp(12px, 2vh, 16px); font-size: 14px; color: var(--ink-2); }
.signup-hero__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The account is made: the panel keeps only the notice; steps 2 and 3 take
   the place of the picture. */
.signup-hero.is-done :is(.signup-hero__panel > h1, .signup-hero__lead, .signup-hero__foot) { display: none; }
.signup-hero__aside { display: flex; flex-direction: column; padding: clamp(20px, 4.5vh, 48px) clamp(28px, 4vw, 72px); background: var(--card); }
.signup-hero__preview[hidden] { display: none; }
.signup-hero__preview { display: grid; justify-items: center; gap: clamp(14px, 2.6vh, 22px); width: 100%; margin: auto; }
/* The picture is as wide as the height of the window allows. */
.signup-hero__shot { width: min(600px, 100%, calc((100svh - 340px) * 1.6)); margin: 0; overflow: hidden; border: var(--rule-w) solid var(--rule); border-radius: 18px; background: #fff; }
.signup-hero__shot img { display: block; width: 100%; height: auto; }
.signup-hero__aside .stepper { width: min(360px, 100%); }
.signup-hero__note { font-size: 12px; color: var(--ink-3); }
.signup-hero__next { display: grid; gap: 16px; width: min(600px, 100%); margin: auto; }
.signup-hero__next[hidden] { display: none; }
.signup-hero__next .card { background: #fff; border: var(--rule-w) solid var(--rule); }
/* Steps 2 and 3 in one screen: smaller gaps and text than on other pages. */
.signup-hero__next { gap: 12px; }
.signup-hero__next .step-card { padding: 18px 20px; }
.signup-hero__next .step-card__head { margin-bottom: 10px; }
.signup-hero__next .step-card__head h2 { font-size: 20px; }
.signup-hero__next .choice .tabs { margin-bottom: 10px; }
.signup-hero__next :is(.muted, .numbered) { font-size: 14px; line-height: 1.5; }
.signup-hero__next .numbered { gap: 5px; }
.signup-hero__next :is(.mt-3, .mt-2) { margin-top: 10px; }
.signup-hero__next .btn--block { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 1023px) {
  .signup-hero { grid-template-columns: minmax(0, 1fr); }
  .signup-hero__side { padding: 24px 20px 40px; }
  .signup-hero__aside { display: none; }
  .signup-hero.is-done .signup-hero__aside { display: flex; padding: 0 20px 40px; background: none; }
  .signup-hero__next .card { background: var(--card); border: 0; }
}
/* On a low screen the form is a little wider, so that long words (German)
   take fewer lines, and below 760px the gaps are smaller. */
@media (min-width: 1024px) and (max-height: 800px) {
  .signup-hero__side { padding-inline: clamp(20px, 4vw, 64px); }
  .signup-hero__panel { max-width: 440px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .signup-hero__side { padding-top: 16px; padding-bottom: 16px; }
  .auth__brand { margin-bottom: 14px; }
  .signup-hero__panel .step-form { gap: 10px; margin-top: 14px; }
  .signup-hero__panel .input { min-height: 44px; height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .signup-hero__panel .btn--block { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .signup-hero__panel .form-status { margin-top: 10px; padding: 10px 14px; font-size: 14px; }
  .signup-hero__foot { margin-top: 10px; }
}
@media (min-width: 1024px) and (max-height: 680px) {
  .signup-hero__side { padding-top: 12px; padding-bottom: 12px; }
  .signup-hero__panel h1 { font-size: 28px; }
  .signup-hero__lead { margin-top: 6px; font-size: 14px; }
  .signup-hero__panel .checkbox { font-size: 13.5px; line-height: 1.45; }
  .signup-hero__panel .step-form .help { font-size: 12.5px; line-height: 1.4; }
}

/* "What is collected": a dialog over the sign-up, so that the page keeps one
   screen and the box of consent keeps its link. */
.collected { width: min(980px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: clamp(20px, 3vw, 32px); overflow-y: auto; border: var(--rule-w) solid var(--rule); border-radius: var(--radius-lg); background: #fff; color: var(--ink); }
.collected::backdrop { background: rgba(17, 27, 29, 0.36); }
.collected__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.collected__head h2 { font-family: var(--font-title); font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.collected__close { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(17, 27, 29, 0.06); color: var(--ink); }
.collected__close:hover { background: rgba(17, 27, 29, 0.11); }
.collected__close svg { width: 16px; height: 16px; }
.collected__lead { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.collected .grid { margin-top: 20px; }
.collected .card { padding: 20px; }
.collected .kind__title { font-family: var(--font-title); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.collected .kind__list { margin-top: 12px; }
@media (min-width: 900px) { .collected .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html:has(.collected[open]) { overflow: hidden; }

/* The check of Cloudflare shows only when it needs the person. */
.turnstile--quiet { min-height: 0; }
.turnstile--quiet:empty { display: none; }
.step-form .field { gap: 6px; }
.step-form .input { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
.step-form__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 480px) { .step-form__pair { grid-template-columns: minmax(0, 1fr); } }
.step-form__help { margin-top: -6px; }
.step-form .help { font-size: 13px; line-height: 1.45; }
/* A problem with a field, in place of its help (try.js). */
.step-form .help.is-error { font-weight: 500; color: var(--danger); }
.step-form .input[aria-invalid="true"] { border-color: var(--danger); }
.step-form .checkbox { font-size: 14px; }
.step-card .form-status[data-state="neutral"] { display: none; }
.step-card #register-success { margin-top: 0; }
.choice .tabs { margin-bottom: 16px; }
.step-card .install-cmd code { font-size: 13px; }
@media (max-width: 480px) { .step-card__head { flex-wrap: wrap; } .step-card__head h2 { flex: 1 1 calc(100% - 44px); } .step-card__head .chip { margin-left: 44px; } }
.numbered { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; list-style: decimal; font-size: 15px; color: var(--ink-2); }
.numbered li::marker { font-weight: 500; color: var(--ink); }
@media (max-width: 600px) { .step-card { padding: 18px; } }

/* ---------- install command (connector) ---------- */

.install-cmd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--brand-deeper); color: #dfeceb; }
.install-cmd code { flex: 1 1 auto; min-width: 0; padding: 0; background: none; font-size: 14px; color: inherit; white-space: normal; }
/* One command per block line. A long command wraps between words only, and
   its continuation is indented, so each command still reads as one. */
.install-cmd code > span { display: block; padding-left: 2ch; text-indent: -2ch; white-space: pre-wrap; overflow-wrap: break-word; }
.install-cmd .btn { flex: 0 0 auto; background: rgba(255, 255, 255, 0.12); color: #dfeceb; }
.install-cmd .btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.install-cmd .btn.is-copied { color: var(--teal-light); }
@media (max-width: 600px) {
  .install-cmd { flex-wrap: wrap; padding: 12px 10px; }
  .install-cmd code { flex-basis: 100%; font-size: 12px; }
}

.cmd-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmd-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmd-table td:first-child { width: 1%; padding-right: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap; color: var(--ink); }
.cmd-table tr:last-child td { border-bottom: 0; }
/* The controls of the extension: their labels in the text face, as on the
   buttons of the extension, not in the face of the terminal. */
.cmd-table--ui td:first-child { font-family: inherit; font-size: 15px; font-weight: 500; }
/* A group of commands: a small title row over its commands. */
.cmd-table__group th { padding: 22px 0 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; color: var(--ink-2); }
.cmd-table tbody > .cmd-table__group:first-child th { padding-top: 0; }
@media (max-width: 600px) {
  .cmd-table, .cmd-table tbody, .cmd-table tr, .cmd-table td { display: block; width: auto; }
  .cmd-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .cmd-table tr:last-child { border-bottom: 0; }
  .cmd-table td { padding: 0; border: 0; }
  .cmd-table td:first-child { width: auto; padding: 0 0 4px; white-space: normal; overflow-wrap: anywhere; }
  .cmd-table .cmd-table__group { padding: 0; border-bottom: 0; }
  .cmd-table__group th { display: block; padding-top: 18px; }
}

/* ---------- pictures: mock-ups, timeline, compare ---------- */

/* A soft wash of colour behind a section. */
.glow { isolation: isolate; overflow: hidden; }
.glow::before { content: ""; position: absolute; inset: -10% -10% auto; z-index: -1; height: 120%; background: radial-gradient(40% 45% at 85% 30%, rgba(80, 151, 166, 0.1), transparent 70%), radial-gradient(30% 35% at 70% 75%, rgba(227, 166, 74, 0.08), transparent 70%), radial-gradient(35% 40% at 10% 90%, rgba(140, 136, 201, 0.07), transparent 70%); pointer-events: none; }

/* Small pictures of what a dashboard shows: dark, like the step pictures of the home. */
.view__pic { position: relative; display: grid; align-content: center; gap: 9px; min-height: 132px; padding: 16px; overflow: hidden; border-radius: var(--radius); background: radial-gradient(70% 80% at 85% 0%, rgba(80, 151, 166, 0.36), rgba(80, 151, 166, 0) 70%), var(--night); font-size: 13px; color: var(--on-night-2); }
.view__pic b, .view__pic strong { color: #fff; }

.pic-bars { display: grid; gap: 8px; }
.pic-bars div { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; }
.pic-bars i { display: block; width: var(--w); height: 8px; border-radius: 999px; background: var(--c); }
.pic-lines svg { width: 100%; height: 76px; overflow: visible; }
.pic-lines path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pic-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.pic-key span { display: inline-flex; align-items: center; gap: 5px; }
.pic-key span::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--c); }
.pic-next { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; }
.pic-next b { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-night-2); }
.pic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 500; color: #fff; }
.pic-chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--c); }
.pic-chip--ghost { border: 1px dashed rgba(255, 255, 255, 0.3); background: transparent; }
.pic-safety { display: grid; gap: 10px; }
.pic-safety__bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 999px; }
.pic-safety__bar i { display: block; height: 100%; }
.pic-redact { font-size: 14px; line-height: 2; color: #fff; }
.pic-redact mark { padding: 2px 7px; border-radius: 6px; background: rgba(143, 203, 214, 0.18); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--teal-light); }
.pic-group { display: flex; align-items: center; gap: 12px; }
.pic-group__faces { display: flex; }
.pic-group__faces i { width: 30px; height: 30px; margin-left: -9px; border: 3px solid var(--night); border-radius: 999px; background: var(--c); }
.pic-group__faces i:first-child { margin-left: 0; }
.pic-group b { font-size: 22px; font-weight: 500; color: #fff; }
.pic-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pic-switch { display: inline-flex; align-items: center; justify-self: start; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 500; color: #fff; }
.pic-switch i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--teal); }
.pic-switch i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 999px; background: #fff; }

/* A card that opens with a picture: the product page. */
.card--pic { display: flex; flex-direction: column; padding: 8px; overflow: hidden; }
.card--pic > .view__pic { min-height: 170px; padding: 22px 24px; border-radius: 16px; }
.card--pic > .card__body { display: flex; flex: 1; flex-direction: column; padding: 20px 16px 16px; }
.card--pic > .card__body > .text-link { margin-top: auto; padding-top: 28px; }
.card--pic .checks:last-child { margin-bottom: 0; }
.card--pic .card__title { display: flex; align-items: center; gap: 12px; }

/* Steps joined by a line: the path of a conversation. */
.timeline { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.timeline__step { position: relative; padding-top: 64px; }
.timeline__step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--c, var(--teal)); border-radius: 999px; background: var(--paper); font-weight: 500; color: var(--ink); }
.timeline__step::after { content: ""; position: absolute; top: 22px; left: 52px; right: -12px; height: 2px; background: linear-gradient(90deg, var(--c, var(--teal)), var(--line)); }
.timeline__step:last-child::after { display: none; }
.timeline__step h3 { font-size: 18px; }
.timeline__step p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 899px) {
  .timeline__step { min-height: 44px; padding: 0 0 0 60px; }
  .timeline__step::after { top: 50px; bottom: -12px; left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--c, var(--teal)), var(--line)); }
}
@media (min-width: 900px) { .timeline--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 900px) {
  .timeline--center .timeline__step { text-align: center; }
  .timeline--center .timeline__step::before { left: 50%; margin-left: -22px; }
  .timeline--center .timeline__step::after { left: calc(50% + 30px); right: calc(-50% - 2px); }
}
.section--tint .timeline__step::before { background: var(--paper-2); }

/* Compare: the message as sent and as stored, one over the other; the range
   input moves the edge. Each replaced part has the width of the wider version
   (pages.js), so the two lines stay in register. */
.compare { position: relative; display: grid; overflow: hidden; border-radius: var(--radius-lg); --pos: 50%; }
.compare__layer { display: grid; align-content: start; gap: 10px; grid-area: 1 / 1; padding: 24px; background: var(--card); }
.compare__layer--after { background: var(--night); clip-path: inset(0 0 0 var(--pos)); }
.compare__layer--after .compare__label { text-align: right; color: var(--on-night-2); }
.compare__layer--after .compare__text { color: #fff; }
.compare__label { max-width: calc(50% - 36px); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.compare__layer--after .compare__label { justify-self: end; }
/* On a phone the line of the handle cuts the message where nothing was
   replaced: the two versions one under the other, with no handle. */
@media (max-width: 640px) {
  .compare__layer { grid-area: auto; }
  .compare__layer--after { clip-path: none; }
  .compare__label { max-width: none; }
  .compare__layer--after .compare__label { justify-self: start; text-align: left; }
  .compare__handle, .compare__range, .compare__hint { display: none; }
}
.compare__text { line-height: 2.1; color: var(--ink); }
.compare .tok { display: inline-block; border-radius: 6px; line-height: 1.5; text-align: center; }
.compare__layer:not(.compare__layer--after) .tok { background: rgba(224, 123, 103, 0.18); box-shadow: inset 0 -1px 0 rgba(224, 123, 103, 0.7); }
.compare__layer--after .tok { background: rgba(143, 203, 214, 0.18); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--teal-light); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--teal-light); pointer-events: none; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.compare__handle::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 14px; height: 10px; margin: -5px 0 0 -7px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M4 1L0 5l4 4M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M4 1L0 5l4 4M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare:has(.compare__range:focus-visible) .compare__handle::after { outline: 2px solid var(--teal); outline-offset: 3px; }
.compare__hint { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* How often a plan refreshes, drawn as a row of ticks. */
.plan__rhythm { display: grid; gap: 6px; margin: 14px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--fill-2); font-size: 14px; font-weight: 500; color: var(--ink); }
/* A plan is a little tighter than other cards. */
.plan .eyebrow { margin-bottom: 14px; }
.card--stack.plan .checks { gap: 8px; margin-bottom: 24px; }
.cadence { position: relative; display: flex; align-items: center; justify-content: space-between; height: 16px; padding: 0 2px; }
.cadence::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line-2); }
.cadence i { position: relative; width: 4px; height: 16px; border-radius: 2px; background: var(--c); }

/* Facts read as a spec sheet: the label on the left, the value on the right. */
.facts { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); }
.facts__row { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 18px 22px; }
/* On the narrowest phones the label goes above its value. */
/* The dates of a legal page: on one line with a dot between them where
   they fit; on a phone one date for each line, with no dot left at the end
   of the first. */
@media (max-width: 640px) {
  .meta-sep { display: none; }
  .page-head__lead:has(> .meta-sep) > .nowrap { display: block; }
}
/* On a phone the name goes above its value: side by side, an address such
   as info@custodian.health has no room in German, French or Italian. */
@media (max-width: 640px) { .facts__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 18px; } }
.facts__row > div { display: contents; }
.facts--text { max-width: 860px; margin-left: auto; margin-right: auto; }
.facts--text .facts__row { grid-template-columns: minmax(8rem, 11rem) 1fr; padding: 20px 26px; }
.facts--text .facts__row div > span { font-weight: 400; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 600px) { .facts--text .facts__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; } }
.facts__row + .facts__row { border-top: 1px solid var(--line); }
.facts__row b { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.facts__row div > span { display: block; font-weight: 500; color: var(--ink); }

/* The ring of the logo, drawn large, in the colour of the logo, with no
   background (his request of 4 October 2026). */
.shen { display: grid; place-items: center; width: 100%; max-width: 360px; margin: 0 auto; color: var(--ink); }
.shen svg { width: clamp(150px, 16vw, 230px); height: auto; }

.subhead { margin: clamp(48px, 5vw, 72px) 0 20px; text-align: center; }
.subhead h3 { font-size: clamp(20px, 1.6vw, 24px); }

/* Dashboard pictures in a browser frame, with tabs. */
.shots { max-width: 980px; margin: 0 auto; }
.tabs { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: rgba(17, 27, 29, 0.06); }
.tabs button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(17, 27, 29, 0.35); }
.browser { margin: 0; overflow: hidden; border-radius: 14px; background: #f2f4f4; box-shadow: var(--shadow-lg); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #e6eaea; }
.browser__bar i { width: 9px; height: 9px; border-radius: 999px; background: rgba(17, 27, 29, 0.16); }
.browser__bar span { flex: 1; max-width: 340px; margin: 0 auto; text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.browser img { display: block; width: 100%; height: auto; }
.browser img[hidden] { display: none; }
.shots__note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* What is collected, what is not, what happens: one colour per card. */
.kind { background: color-mix(in srgb, var(--c) 7%, #fff); }
.kind__title { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.kind__list { gap: 12px; margin-top: 18px; }
.kind__list li { color: var(--ink-2); }
.kind .checks li::before { background: color-mix(in srgb, var(--c) 18%, #fff); }
.kind .checks li::after { background: color-mix(in srgb, var(--c) 80%, #111b1d); }

/* ---------- pictures that move ----------
   Each picture starts still and plays once, when its card is revealed. */
.reveal .pic-bars i { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease); }
.reveal.visible .pic-bars i { transform: none; }
.reveal .pic-bars div:nth-child(2) i { transition-delay: 0.12s; }
.reveal .pic-bars div:nth-child(3) i { transition-delay: 0.24s; }
.reveal .pic-bars div:nth-child(4) i { transition-delay: 0.36s; }
.reveal .pic-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.reveal.visible .pic-lines path { stroke-dashoffset: 0; }
.reveal .pic-lines path:nth-child(2) { transition-delay: 0.15s; }
.reveal .pic-lines path:nth-child(3) { transition-delay: 0.3s; }
.reveal .pic-lines path:nth-child(4) { transition-delay: 0.45s; }
.reveal .pic-chip, .reveal .pic-switch, .reveal .pic-group__faces i, .reveal .pic-redact mark { opacity: 0; transform: translateY(6px) scale(0.92); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.visible .pic-chip, .reveal.visible .pic-switch, .reveal.visible .pic-group__faces i, .reveal.visible .pic-redact mark { opacity: 1; transform: none; }
.reveal .pic-chip:nth-child(2), .reveal .pic-group__faces i:nth-child(2), .reveal .pic-redact mark:nth-of-type(2) { transition-delay: 0.1s; }
.reveal .pic-chip:nth-child(3), .reveal .pic-group__faces i:nth-child(3), .reveal .pic-redact mark:nth-of-type(3) { transition-delay: 0.2s; }
.reveal .pic-chip:nth-child(4), .reveal .pic-group__faces i:nth-child(4) { transition-delay: 0.3s; }
.reveal .pic-chip:nth-child(5), .reveal .pic-group__faces i:nth-child(5) { transition-delay: 0.4s; }
.reveal .pic-chip:nth-child(n+6) { transition-delay: 0.5s; }
.reveal .pic-redact mark { display: inline-block; transition-delay: 0.3s; }
/* The predicted states breathe: they are a forecast, not a fact. */
.reveal.visible .pic-chip--ghost { animation: forecast 2.8s ease-in-out 1s infinite; }
@keyframes forecast { 50% { opacity: 0.55; } }
.reveal .pic-safety__bar i { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease); }
.reveal.visible .pic-safety__bar i { transform: none; }
.reveal .pic-safety__bar i:nth-child(2) { transition-delay: 0.5s; }
.reveal .pic-safety__bar i:nth-child(3) { transition-delay: 0.75s; }
/* The switch in the capture picture turns on after the card appears. */
.reveal .pic-switch i { background: rgba(255, 255, 255, 0.2); transition: background 0.4s 0.6s; }
.reveal .pic-switch i::after { right: 17px; transition: right 0.4s 0.6s var(--ease); }
.reveal.visible .pic-switch i { background: var(--teal); }
.reveal.visible .pic-switch i::after { right: 3px; }
/* Timeline: the line between two steps draws itself. */
.timeline__step.reveal::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.8s 0.35s var(--ease); }
.timeline__step.reveal.visible::after { transform: none; }
@media (max-width: 899px) {
  .timeline__step.reveal::after { transform: scaleY(0); transform-origin: top center; }
  .timeline__step.reveal.visible::after { transform: none; }
}
/* Refresh rhythm on the plans: the ticks appear one after the other. */
.reveal .cadence i { transform: scaleY(0); transition: transform 0.4s var(--ease); }
.reveal.visible .cadence i { transform: none; }
.reveal.visible .cadence i:nth-child(n) { transition-delay: calc(var(--k, 0) * 18ms + 0.2s); }

/* ---------- small pages (404, checkout result, demo notices) ---------- */

.centre-page { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 32px 20px; background: var(--night); isolation: isolate; overflow: hidden; }
.centre-page > .cta__streaks { position: fixed; overflow: hidden; opacity: 0.55; }
.centre-card { width: 100%; max-width: 560px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-xl); background: #fff; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.6); }
.centre-card .brand { display: flex; width: fit-content; margin-bottom: 28px; color: var(--ink); }
.centre-card .brand svg { width: auto; height: 26px; }
.centre-card h1 { font-size: clamp(30px, 3vw, 42px); }
.centre-card .lead { margin-top: 14px; }
.centre-card .row { margin-top: 28px; }
@media (max-width: 480px) { .centre-card .row .btn { flex: 1 1 100%; } }

/* The checkout: a bar with the logo only, so the payment stays in focus. */
.simple-head { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.simple-head .wrap { max-width: calc(1120px + 2 * var(--gutter)); }
.simple-head__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.simple-head .brand { color: var(--ink); }
.simple-head .brand svg { width: auto; height: 26px; }
.page-main { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 6vw, 104px); }

/* ---------- motion ---------- */

/* Short and small: a block must never look missing while the page scrolls. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.06s; }
.reveal-d2 { transition-delay: 0.12s; }
.reveal-d3 { transition-delay: 0.18s; }

/* ---------- utilities toggled by scripts ---------- */

.hidden { display: none !important; }
/* Spacing utilities come after the components, so a component that resets its
   margin (.checks, .bullets) does not cancel them. */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-6 { margin-bottom: 48px; }
.nowrap { white-space: nowrap; }
.opacity-50 { opacity: 0.5; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[id] { scroll-margin-top: calc(var(--nav-space) + 16px); }

/* ---------- small screens ---------- */

@media (max-width: 600px) {
  .section-head { margin-bottom: 28px; }
  .prose { font-size: 16px; }
  .prose h2 { margin-top: 44px; }
  .card { padding: 20px; }
  .card--pic { padding: 6px; }
  .card--pic > .view__pic { min-height: 120px; padding: 18px; }
  .card--pic > .card__body { padding: 16px 14px 14px; }
  .summary { padding: 20px; }
  .grid { gap: 14px; }
  .grid--split { gap: 32px; }
  /* Figures two by two. */
  .grid--4:has(> .stat), .grid--pair { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat { padding: 18px; }
  .stat__l { margin-top: 10px; font-size: 15px; line-height: 1.35; }
  .stat__s { font-size: 14px; }
  /* Buttons fill the row: two short ones share it, a long one takes it all. */
  .row > .btn { flex: 1 1 auto; }
  /* Tables marked to stack: one block per row, each value with its label. */
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: auto; }
  .table--stack tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  .table--stack tbody tr:first-child { border-top: 0; }
  .table--stack td { padding: 2px 0; border: 0; text-align: left; }
  .table--stack td:first-child { margin-bottom: 2px; font-weight: 500; color: var(--ink); }
  .table--stack td + td::before { content: attr(data-label) ": "; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-3); }
  /* French puts a no-break space before the colon. */
  :lang(fr) .table--stack td + td::before { content: attr(data-label) "\00a0: "; }
  .table--stack td.num { text-align: left; }
  /* The narrow first column of the desktop table is a full line here. */
  .table--stack.table--tools td:first-child { width: auto; white-space: normal; }
  /* Icon or step number next to the title; the text below uses the full width. */
  .card:has(> .step__n:first-child) { display: grid; grid-template-columns: 40px 1fr; align-content: start; align-items: center; column-gap: 14px; }
  .card:has(> .step__n:first-child) > * { grid-column: 1 / -1; }
  .card:has(> .step__n:first-child) > :first-child { grid-column: 1; margin: 0; }
  .card:has(> .step__n:first-child) > :first-child + :is(h3, h4) { grid-column: 2; margin: 0; }
  .centre-page { place-items: start center; padding-top: 32px; }
}

/* Less motion: every picture in its final state. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal .chart__track i, .reveal .pic-bars i, .reveal .pic-safety__bar i, .reveal .cadence i, .timeline__step.reveal::after { transform: none; }
  .reveal.visible .chart__point--key::after { animation: none; }
  .reveal, .reveal .chart__point, .reveal .pic-chip, .reveal .pic-switch, .reveal .pic-group__faces i, .reveal .pic-redact mark { opacity: 1; transform: none; }
  .reveal .chart__plot svg { clip-path: none; }
  .reveal .pic-lines path { stroke-dashoffset: 0; }
  .reveal.visible .pic-chip--ghost { animation: none; }
}