/* Lorne & Vale, lornevale.com
   One stylesheet. No inline styles (the CSP forbids them).
   Breakpoints follow Apple's: 1068px and 734px. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #6e6e73;
  --line: #d2d2d7;
  --hair: rgba(0, 0, 0, .08);
  --paper: #ffffff;
  --mist: #f5f5f7;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link: #0066cc;
  --indigo: #5e5ce6;
  --green: #30d158;

  --night: #000000;
  --night-2: #101012;
  --night-3: #1c1c1e;
  --night-line: rgba(255, 255, 255, .12);
  --on-night: #f5f5f7;
  --on-night-2: #a1a1a6;
  --link-night: #2997ff;
  --focus: #0071e3;

  /* One accent: Apple blue into indigo. Lighter stops on dark grounds. */
  --accent-grad: linear-gradient(92deg, #0071e3 0%, #5e5ce6 100%);

  --gutter: 22px;
  --max: 1180px;
  --radius: 28px;
  --radius-s: 18px;
  --nav-h: 52px;
  --ease: cubic-bezier(.22, .7, .2, 1);
}

@media (min-width: 735px) { :root { --gutter: 40px; } }

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 12px; text-decoration: none; }

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

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

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 980px); }
.wrap--text { width: min(100% - 2 * var(--gutter), 720px); }

.section { padding-block: clamp(88px, 11vw, 160px); position: relative; background-color: var(--paper); }
.section--tight { padding-block: clamp(64px, 8vw, 110px); }
.section--flush-top { padding-top: 0; }
.bg-mist { background: var(--mist); }
.bg-night { background: var(--night); color: var(--on-night); }
.bg-night-2 { background: var(--night-2); color: var(--on-night); }

.section-head { text-align: center; max-width: 860px; margin: 0 auto clamp(48px, 6vw, 84px); }
.section-head--left { text-align: left; margin-left: 0; }
.section-head .lead { margin-top: 18px; }

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

.eyebrow {
  display: inline-block;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  color: var(--ink);
}
.eyebrow--accent {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.bg-night .eyebrow, .bg-night-2 .eyebrow { color: var(--on-night-2); }
.bg-night .eyebrow--accent, .bg-night-2 .eyebrow--accent { color: transparent; }
.bg-night, .bg-night-2, .sec-hero, .phero--night { --accent-grad: linear-gradient(92deg, #2997ff 0%, #8e8cf5 100%); --focus: #2997ff; }

.display-xl, .display-l, .display-m, .title-l {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}
.display-xl { font-size: clamp(44px, 7.2vw, 96px); line-height: 1.03; letter-spacing: -.035em; }
.display-l { font-size: clamp(36px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -.032em; }
.display-m { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.028em; }
.title-l { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.024em; }

.grad {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}
.grad-silver {
  background: linear-gradient(180deg, #ffffff 0%, #c7c7cc 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -.018em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead strong { color: var(--ink); font-weight: 600; }
.bg-night .lead, .bg-night-2 .lead { color: var(--on-night-2); }
.bg-night .lead strong, .bg-night-2 .lead strong { color: var(--on-night); }

.statement {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink-3);
  text-wrap: balance;
}
.statement strong { color: var(--ink); font-weight: 700; }
.bg-night .statement { color: #6e6e73; }
.bg-night .statement strong { color: var(--on-night); }

.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.bg-night .muted, .bg-night-2 .muted { color: var(--on-night-2); }
.center { text-align: center; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px;
  border-radius: 980px; border: 0;
  background: var(--blue); color: #fff;
  font-size: 17px; font-weight: 400; letter-spacing: -.022em; line-height: 1;
  cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--blue-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e8e8ed; }
.btn--small { min-height: 30px; padding: 6px 14px; font-size: 14px; }
.bg-night .btn--ghost, .bg-night-2 .btn--ghost { color: var(--link-night); box-shadow: inset 0 0 0 1px var(--link-night); }
.bg-night .btn--ghost:hover, .bg-night-2 .btn--ghost:hover { background: var(--link-night); color: #000; }

.more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 17px; color: var(--link);
}
.more::after { content: "\203A"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }
.bg-night .more, .bg-night-2 .more { color: var(--link-night); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 32px; }
.cta-row--left { justify-content: flex-start; }

/* ---------- Global navigation ---------- */

.gnav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(251, 251, 253, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}
.gnav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.gnav__brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -.02em;
  margin-right: auto;
}
.gnav__brand:hover { text-decoration: none; }
.gnav__brand img { width: 22px; height: 22px; border-radius: 6px; }
.gnav__links { display: flex; align-items: center; gap: 26px; }
.gnav__links a { color: var(--ink); font-size: 14px; opacity: .82; transition: opacity .2s; }
.gnav__links a:hover { opacity: 1; text-decoration: none; }
.gnav__links a[aria-current="page"] { opacity: 1; font-weight: 600; }
.gnav__lang { font-weight: 600; letter-spacing: .02em; }
.gnav__toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: transparent; cursor: pointer; position: relative;
}
.gnav__toggle span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease);
}
.gnav__toggle span:first-of-type { top: 18px; }
.gnav__toggle span:nth-of-type(2) { top: 25px; }
.gnav.is-open .gnav__toggle span:first-of-type { top: 21.5px; transform: rotate(45deg); }
.gnav.is-open .gnav__toggle span:nth-of-type(2) { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .gnav__inner { gap: 12px; }
  .gnav__toggle { display: block; }
  .gnav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px var(--gutter) 34px;
    background: #fbfbfd;
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  }
  .gnav.is-open .gnav__links {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .gnav__links a {
    font-size: 28px; font-weight: 600; letter-spacing: -.03em; opacity: 1;
    padding: 8px 0;
  }
  .gnav__links .gnav__lang { font-size: 17px; margin-top: 14px; color: var(--ink-2); }
}
html.nav-open { overflow: hidden; }

/* ---------- Device: current iPhone Pro, front ---------- */

.device {
  --w: 300px;
  position: relative;
  flex: none;
  width: var(--w);
  padding: calc(var(--w) * .011);
  border-radius: calc(var(--w) * .178);
  background:
    linear-gradient(135deg, #f4f4f6 0%, #c3c3c8 14%, #fafafa 30%, #8e8e93 52%, #d9d9de 74%, #a5a5aa 100%);
  box-shadow:
    0 calc(var(--w) * .1) calc(var(--w) * .22) rgba(15, 15, 30, .16),
    0 calc(var(--w) * .02) calc(var(--w) * .05) rgba(15, 15, 30, .10);
}
.device::before, .device::after {
  content: ""; position: absolute; width: calc(var(--w) * .012);
  background: linear-gradient(90deg, #8e8e93, #d1d1d6);
  border-radius: 2px;
}
.device::before {
  /* action button, then volume up and down */
  left: calc(var(--w) * -.009); top: 17%; height: 4.6%;
  box-shadow: 0 calc(var(--w) * .16) 0 0 #a1a1a6, 0 calc(var(--w) * .30) 0 0 #a1a1a6;
}
.device::after {
  /* side button, then camera control */
  right: calc(var(--w) * -.009); top: 25%; height: 11%;
  box-shadow: 0 calc(var(--w) * .58) 0 calc(var(--w) * -.004) #a1a1a6;
}
.device__bezel {
  padding: calc(var(--w) * .021);
  border-radius: calc(var(--w) * .167);
  background: #050506;
  box-shadow: inset 0 0 0 calc(var(--w) * .003) rgba(255, 255, 255, .08);
}
.device__screen {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--w) * .145);
  aspect-ratio: 1206 / 2622;
  background: #f2f2f7;
}
.device__screen img { width: 100%; height: 100%; object-fit: cover; }
.device__screen::after {
  /* the smaller island of iPhone 18 Pro */
  content: ""; position: absolute; z-index: 3;
  top: calc(var(--w) * .036); left: 50%;
  width: 21%; aspect-ratio: 2.65;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.device--dark {
  background:
    linear-gradient(135deg, #5a5a5f 0%, #2c2c2e 18%, #6e6e73 34%, #1c1c1e 56%, #48484a 78%, #2c2c2e 100%);
  box-shadow:
    0 calc(var(--w) * .1) calc(var(--w) * .24) rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .06);
}
.device--dark::before, .device--dark::after { background: linear-gradient(90deg, #3a3a3c, #636366); }
.device--dark::before { box-shadow: 0 calc(var(--w) * .16) 0 0 #48484a, 0 calc(var(--w) * .30) 0 0 #48484a; }
.device--dark::after { box-shadow: 0 calc(var(--w) * .58) 0 calc(var(--w) * -.004) #48484a; }

/* Stacked screens that cross-fade (step scroller) */
.device__screen .shot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.device__screen .shot.is-active { opacity: 1; }
.device__screen .shot:first-child { position: relative; }

/* ---------- Home hero ---------- */

.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(56px, 9vw, 120px);
  background:
    radial-gradient(56% 42% at 50% 80%, rgba(0, 113, 227, .10), rgba(94, 92, 230, .05) 45%, rgba(94, 92, 230, 0) 72%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
}
.hero__copy { text-align: center; position: relative; z-index: 2; }
.hero__copy .lead { max-width: 760px; margin: 22px auto 0; }
.hero__stage {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start;
  margin-top: clamp(48px, 6vw, 80px);
}
.hero__stage .device { --w: clamp(230px, 25vw, 320px); }
.hero__stage .hero__side { --w: clamp(196px, 21vw, 272px); margin-top: clamp(48px, 5vw, 72px); }
.hero__stage .hero__side--left { margin-right: calc(var(--w) * -.22); z-index: 1; }
.hero__stage .hero__side--right { margin-left: calc(var(--w) * -.22); z-index: 1; }
.hero__stage .hero__center { z-index: 2; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.hero__eyebrow { color: var(--ink); }

/* iPhone: a tighter first screen with one phone, centred, rising into view */
@media (max-width: 734px) {
  .hero { padding-top: 44px; }
  .hero__eyebrow { font-size: 15px; margin-bottom: 12px; color: var(--ink-2); }
  .hero__title { font-size: clamp(26px, 8.6vw, 46px); line-height: 1.05; letter-spacing: -.034em; white-space: nowrap; }
  .hero__copy .lead { font-size: 17px; line-height: 1.45; margin-top: 16px; }
  .hero__cta { margin-top: 24px; gap: 12px 20px; }
  .hero__cta .btn { min-height: 44px; padding: 11px 20px; font-size: 16px; }
  .hero__cta .more { font-size: 16px; }
  .hero__assure { margin-top: 16px; font-size: 13px; }
  .hero__stage { margin-top: 36px; }
  .hero__stage .hero__side { display: none; }
  .hero__stage .hero__center { --w: min(70vw, 280px); }
  .hero::after { height: 120px; }
}
@media (max-width: 380px) {
  .hero__cta { gap: 12px 14px; }
  .hero__cta .btn { padding-inline: 18px; }
}

/* ---------- Home hero: the iPhone app at work ----------
   A scripted run of the app's real screens (site/partials/demo-phone.html, played by site.js).
   The app is laid out at the iPhone's own size, 402 by 874 points, one px per point, then scaled
   into the frame: every size in .app is the point size measured on the captures in assets/screens.
   --wn is the phone's width in px, without a unit, so the scale can be worked out in CSS. */

.hero__stage .demo { --wn: 320; --w: calc(var(--wn) * 1px); --k: calc(var(--wn) * .936 / 402); }
@media (max-width: 1239px) { .hero__stage .demo { --wn: 280; } }
@media (max-width: 1067px) { .hero__stage .demo { --wn: 250; } }
@media (max-width: 734px) { .hero__stage .demo { --wn: 280; } }
@media (max-width: 399px) { .hero__stage .demo { --wn: 262; } }
@media (max-width: 369px) { .hero__stage .demo { --wn: 240; } }
@media (max-width: 339px) { .hero__stage .demo { --wn: 224; } }

.demo__screen { background: #f2f2f7; }
.app {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 402px; height: 874px; overflow: hidden;
  transform: scale(var(--k)); transform-origin: 0 0;
  color: #000; font-family: var(--font); font-size: 17px; line-height: 22px; letter-spacing: -.41px;
  font-synthesis: none; text-align: left;
  -webkit-user-select: none; user-select: none;
}
.app :where(p, ul, ol) { margin: 0; padding: 0; list-style: none; }
.app :where(b) { font-weight: 600; }
.app-i { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-dim, .app-shade, .app-touch, .app-navfade, .app-sb { pointer-events: none; }
.app.is-snap, .app.is-snap * { transition: none !important; animation: none !important; }
.app[data-variant="b"] [data-v="a"], .app:not([data-variant="b"]) [data-v="b"] { display: none; }
@keyframes app-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* status bar */
.app-sb { position: absolute; left: 0; top: 0; z-index: 6; width: 402px; height: 54px; }
.app-sb__time { position: absolute; left: 74px; top: 21.5px; transform: translateX(-50%); font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.app-sb svg { position: absolute; top: 26.3px; height: 12px; fill: currentColor; }
.app-sb .app-sb__signal { left: 288.3px; width: 19px; }
.app-sb .app-sb__wifi { left: 315.3px; width: 16px; }
.app-sb .app-sb__battery { left: 339.3px; top: 26px; width: 27px; height: 13px; }
.app-sb__case { fill: none; stroke: currentColor; stroke-opacity: .38; stroke-width: 1.1; }
.app-sb__cap { fill-opacity: .4; }

/* the two screens, Requests and a request, and the buttons they share */
.app-list, .app-detail { position: absolute; left: 0; top: 0; width: 402px; height: 874px; overflow: hidden; }
/* a part gets its own layer only while it moves, so moving it repaints nothing and resting costs no memory */
.app-list.is-moving, .app-detail.is-moving, .app-sheet.is-moving, .app-scroll.is-moving, .app-touch, .app-req { will-change: transform; }
/* the grouped background of the app's lists, flat */
.app-list { z-index: 1; background: #f2f2f7; }
.app-detail { z-index: 2; visibility: hidden; background: #f2f2f7; transform: translateX(402px); box-shadow: -10px 0 30px rgba(0, 0, 0, .07); }
.app-shade { position: absolute; left: 0; top: 0; z-index: 9; width: 402px; height: 874px; background: #000; opacity: 0; }
.app-btn {
  position: absolute; top: 62px; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; color: #006bd8;
  background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(40, 50, 80, .09), 0 0 0 .5px rgba(0, 0, 0, .04);
  transition: transform .14s ease;
}
.app-btn--l { left: 16px; }
.app-btn--r { left: 342px; }
.app-btn.is-pressed { transform: scale(.9); }
.app-i--sort { width: 25px; height: 21px; stroke-width: 2; }
.app-i--compose { width: 22px; height: 22px; stroke-width: 1.9; }
.app-i--back { width: 11px; height: 18.5px; stroke-width: 2.4; color: #000; }
.app-i--more { width: 22.5px; height: 22.5px; stroke-width: 1.9; }

/* Requests */
.app-large { position: absolute; left: 16px; top: 119.7px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .1px; }
.app-search {
  position: absolute; left: 16px; top: 169px; display: flex; align-items: center; gap: 11px;
  width: 370px; height: 44px; padding-left: 14px; border-radius: 22px;
  background: rgba(118, 118, 128, .12); color: #85868c;
}
.app-i--search { width: 16px; height: 16px; stroke-width: 2; color: rgba(0, 0, 0, .78); }
/* the filter chips: the chosen one filled with the action colour, the others recessed */
.app-chips { position: absolute; left: 16px; top: 237px; display: flex; gap: 8px; width: 386px; height: 34px; overflow: hidden; white-space: nowrap; }
.app-chips span {
  flex: none; padding: 0 14px; border-radius: 17px; background: #e5e5ea;
  font-size: 15px; line-height: 34px; font-weight: 600; letter-spacing: -.24px; color: #1c1c1e;
}
.app-chips .is-on { color: #fff; background: #006bd8; }
/* The request as Mail draws an inbox row, in a one-row inset grouped section: the title, the status said once in
   its colour, one line of what happens next; the chevron inside the row (AutonomousRequestRow). */
.app-req {
  position: absolute; left: 16px; top: 292px; width: 370px; padding: 13px 36px 14px 16px;
  border-radius: 26px; background: #fff;
  transition: transform .14s ease, background-color .14s ease;
}
.app-req.is-pressed { transform: scale(.98); background: #e5e5ea; }
.app-req__title { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.41px; }
.app-req__status, .app-req__sub { font-size: 15px; line-height: 20px; letter-spacing: -.24px; }
.app-req__s { display: none; }
.app-req__s--plan { color: #48484a; }
.app-req__s--ask { color: #875000; }
.app-req__s--done { color: #1f6c32; }
.app-req:not(.is-plan):not(.is-done) .app-req__s--ask,
.app-req.is-plan .app-req__s--plan, .app-req.is-done .app-req__s--done { display: inline; animation: app-in .35s ease both; }
.app-req__sub { color: #48484a; }
.app-req.is-plan .app-req__sub, .app-req__ask, .app-req__done { display: none; }
.app-req:not(.is-plan):not(.is-done) .app-req__ask, .app-req.is-done .app-req__done { display: block; animation: app-in .35s ease both; }
.app-req__sub > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-req__chev { position: absolute; right: 20px; top: 50%; width: 7.5px; height: 13px; margin-top: -6.5px; stroke-width: 2; color: #c5c5c7; }

/* a request */
.app-scroll { position: absolute; left: 0; top: 0; width: 402px; padding: 134.4px 16px 160px; }
.app-detail__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.26px; }
.app-slot { position: relative; margin-top: 24px; }
.app-slot > * { position: absolute; left: 0; top: 0; width: 370px; pointer-events: none; }
.app.is-asking .app-ask { pointer-events: auto; }
.app-card { border: 1px solid transparent; border-radius: 26px; background: #fff; }
.app-navfade { position: absolute; left: 0; top: 0; z-index: 2; width: 402px; height: 128px; background: linear-gradient(180deg, #f2f2f7 0, #f2f2f7 104px, rgba(242, 242, 247, 0)); }
.app-navtitle { position: absolute; left: 0; top: 72.8px; z-index: 3; width: 402px; text-align: center; font-weight: 600; }

/* The question: its header outside its card, as a grouped section's is; the answers are stacked system buttons,
   neutral, with one trailing slot that shows a check once chosen (ConciergeClarificationCard). */
.app-ask__head { margin-bottom: 8px; font-weight: 600; }
.app-ask__card { padding: 16px 16px 20px; border: 0; }
.app-ask__q { font-weight: 600; }
.app-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; margin-top: 12px;
  padding: 0 20px; border-radius: 25px; background: #d1d1d1;
  transition: background-color .15s ease, transform .15s ease;
}
.app-opt + .app-opt { margin-top: 8px; }
.app-opt__ok { width: 17px; height: 15px; stroke-width: 2.2; visibility: hidden; }
.app.is-asking .app-opt { cursor: pointer; }
@keyframes app-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 107, 216, 0); } 50% { box-shadow: 0 0 0 4px rgba(0, 107, 216, .22); } }
.app.is-hinting .app-opt { animation: app-hint 1.8s ease-in-out infinite; }
.app.is-hinting .app-opt + .app-opt { animation-delay: .3s; }
.app.is-asking .app-opt:hover { background: #c7c7cc; }
.app .app-opt.is-pressed { background: #bcbcc0; transform: scale(.985); }
.app-opt.is-chosen .app-opt__ok { visibility: visible; }
.app-ask__other { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: #006bd8; }
.app-ask__other .app-i { width: 8px; height: 14px; stroke-width: 2.2; color: #000; }

.app-wait { height: 330px; border-color: #d4d3d8; }
.app-wait__head { position: absolute; left: 19.6px; right: 19.6px; top: 16.1px; height: 22px; font-size: 15px; font-weight: 600; letter-spacing: -.24px; color: #005cbf; }
.app-wait__s { display: none; align-items: center; gap: 11px; height: 22px; }
.app-wait.is-work .app-wait__s--work, .app-wait.is-done .app-wait__s--done,
.app-wait:not(.is-work):not(.is-done) .app-wait__s--wait { display: inline-flex; animation: app-in .35s ease both; }
.app-wait__s--done { color: #1f6c32; }
.app-wait__s .app-i { width: 16.3px; height: 16.3px; stroke-width: 1.9; }
.app-i--spin { animation: app-spin 1.1s linear infinite; }
.app-wait__more { position: absolute; right: 13.4px; top: 23.2px; width: 15.4px; height: 3.4px; fill: currentColor; }
/* The number and its label sit in the middle of the ring with room all round, whatever the font. */
.app-ring { position: absolute; left: 14px; top: 74px; width: 160px; height: 160px; }
.app-ring__svg { display: block; width: 160px; height: 160px; overflow: visible; }
.app-seg { fill: none; stroke: #b9b9b9; stroke-width: 12; stroke-linecap: round; transition: stroke .5s ease; }
.app-seg.is-wait { stroke: #a05a00; }
.app-seg--fill { stroke: #207d32; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .7s cubic-bezier(.3, .7, .2, 1), opacity .15s ease; }
.app-seg--fill.is-done { stroke-dashoffset: 0; opacity: 1; }
.app-ring__mid { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 160px; text-align: center; }
.app-ring__mid b { font-size: 31px; line-height: 35px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.app-ring__mid span { margin-top: 2px; font-size: 11.5px; line-height: 15px; letter-spacing: 0; color: #6e6e73; white-space: nowrap; }
.app-legend { position: absolute; left: 202.3px; top: 86px; width: 124.7px; }
.app-legend li {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 40px; padding-left: 17.7px; font-size: 15px; line-height: 18px; letter-spacing: -.24px;
}
.app-legend li + li { margin-top: 8px; }
.app-legend li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7.7px; height: 7.7px; margin-top: -3.85px; border-radius: 50%; background: #b9b9b9; }
.app-legend .app-legend--done::before { background: #207d32; }
.app-legend .app-legend--wait::before { background: #a05a00; }
.app-legend b { font-variant-numeric: tabular-nums; }
.app-wait__label { position: absolute; left: 19.6px; top: 265.4px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: -.08px; color: #005cbf; }
.app-wait__next { position: absolute; left: 19.6px; right: 19.6px; top: 285.4px; font-size: 15px; line-height: 20px; letter-spacing: -.24px; color: #48484a; }
/* once the request is done there is nothing left to watch for, as in the app */
.app-wait__label, .app-wait__next { transition: opacity .3s ease; }
.app-wait.is-done .app-wait__label, .app-wait.is-done .app-wait__next { opacity: 0; }

.app-steps { padding: 13.1px 19.6px 19px; border-color: #d4d3d8; }
.app-steps__head { display: flex; align-items: baseline; justify-content: space-between; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: 0; }
.app-steps__head span { font-size: 15px; font-weight: 400; letter-spacing: -.24px; color: #48484a; }
.app-dots { display: flex; align-items: center; gap: 8px; margin: 24.6px 0 0 6.4px; }
.app-dots i { display: block; width: 21.7px; height: 1.7px; border-radius: 1px; background: #d6d6da; transition: background-color .4s ease; }
.app-dots i.is-done { background: #207d32; }
.app-dot {
  position: relative; display: grid; place-items: center; flex: none; width: 32.3px; height: 32.3px;
  border: 1px solid #e2e2e6; border-radius: 50%; background: #f6f6f7; color: #aeaeb2;
  font-size: 15px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.app-dot.is-running { border-color: #a9c7ee; background: #e3eefb; color: #006bd8; }
.app-dot.is-waiting { border-color: #e5c69c; background: #f7ebdb; color: #a05a00; }
.app-dot.is-done { border-color: #9fc8a7; background: #e3f0e6; color: transparent; }
.app-dot.is-done::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 6px; margin: -4.6px 0 0 -5.5px;
  border-left: 2.3px solid #207d32; border-bottom: 2.3px solid #207d32; transform: rotate(-45deg);
  animation: app-in .3s ease both;
}
.app-rows { margin-top: 24px; }
.app-row { position: relative; min-height: 66px; padding: 13.1px 40px 12px 61px; border-radius: 20px; background: #e5e5ea; }
.app-row + .app-row { margin-top: 16px; }
.app-row > .app-dot { position: absolute; left: 13px; top: 50%; width: 33px; height: 33px; margin-top: -16.5px; }
.app-row__body b { display: block; line-height: 20px; }
.app-st { display: block; height: 20px; margin-top: 1.3px; font-size: 15px; line-height: 20px; letter-spacing: -.24px; }
.app-st__s { display: none; align-items: center; gap: 8px; height: 20px; }
.app-st__s .app-i { width: 12px; height: 12px; stroke-width: 1.6; }
.app-row:not(.is-running):not(.is-waiting):not(.is-done) .app-st__s--planned,
.app-row.is-running .app-st__s--running, .app-row.is-waiting .app-st__s--waiting, .app-row.is-done .app-st__s--done { display: inline-flex; animation: app-in .3s ease both; }
.app-st__s--planned { color: #8e8e93; }
.app-st__s--running { color: #005cbf; }
.app-st__s--running .app-i { animation: app-spin 1.1s linear infinite; }
.app-st__s--waiting { color: #875000; }
.app-st__s--done { color: #1f6c32; }
.app-st__disc { fill: #207d32; stroke: none; }
.app-st__tick { stroke: #fff; stroke-width: 1.8; }
.app-row__chev { position: absolute; right: 14.3px; top: 50%; width: 7px; height: 12px; margin-top: -6px; stroke-width: 2; color: #8e8e93; }

.app-done { padding: 21.7px 24.6px 25px; }
.app-done__head { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: 0; }
.app-done__head .app-i { width: 20px; height: 20px; stroke-width: 1.9; }
.app-done__text { margin-top: 15.1px; }
.app-done__share {
  display: inline-flex; align-items: center; gap: 12px; height: 58px; margin: 15.9px 0 0 -2px; padding: 0 22px 0 14.4px;
  border-radius: 29px; background: #fff; color: #006bd8;
  box-shadow: 0 8px 22px rgba(40, 50, 80, .1), 0 0 0 .5px rgba(0, 0, 0, .05);
}
.app-done__share .app-i { width: 14.3px; height: 18.4px; stroke-width: 1.8; }
.app-done__list { margin-top: 14.4px; }
.app-done__list li { display: flex; gap: 11.6px; font-size: 15px; line-height: 20px; letter-spacing: -.24px; color: #48484a; }
.app-done__list li + li { margin-top: 13.7px; }
.app-done__list .app-i { width: 12px; height: 15.4px; margin-top: 2.3px; stroke-width: 1.5; }

.app-ready { padding: 21.7px 24.6px 24px; }
.app-ready__head { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: 0; }
.app-ready__head .app-i { width: 17px; height: 21px; stroke-width: 1.8; }
.app-ready__item { position: relative; display: flex; gap: 14px; margin-top: 18px; padding: 16px 40px 16px 17px; border-radius: 20px; background: #e5e5ea; }
.app-ready__item > span { display: block; font-size: 12px; line-height: 16px; color: #48484a; }
.app-ready__item b { display: block; margin-bottom: 4px; font-size: 15px; line-height: 20px; letter-spacing: -.24px; color: #000; }
.app-ready__item span span { display: block; }
.app-ready__doc { width: 14.3px; height: 17.6px; margin-top: 1px; stroke-width: 1.6; color: #006bd8; }
.app-ready__open { position: absolute; right: 17px; top: 16px; width: 9px; height: 9px; stroke-width: 1.6; color: #48484a; }

/* the request's own rows, one grouped section with the list's separators and chevrons */
.app-links { border: 0; }
.app-links p { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-left: 16px; padding-right: 17px; }
.app-links p + p { box-shadow: inset 0 .5px 0 #c6c6c8; }
.app-links .app-i { width: 7.5px; height: 13px; stroke-width: 2; color: #c5c5c7; }

/* tab bar */
.app-tabbar {
  position: absolute; left: 20.7px; top: 791px; z-index: 3; width: 360.3px; height: 62px; border-radius: 31px;
  background: rgba(251, 250, 253, .94); box-shadow: 0 10px 30px rgba(40, 40, 60, .1), 0 0 0 .5px rgba(0, 0, 0, .06);
}
.app-tabbar__sel { position: absolute; left: 89.6px; top: 4px; width: 96.4px; height: 53.3px; border-radius: 26.7px; background: #ebeaef; }
.app-tab {
  position: absolute; top: 0; width: 84px; height: 62px; padding-top: 38.6px;
  font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: .1px; text-align: center; white-space: nowrap; color: #000;
}
.app-tab--today { left: 10.6px; }
.app-tab--req { left: 95.6px; color: #006bd8; }
.app-tab--dec { left: 182.8px; }
.app-tab--co { left: 265.8px; }
.app-tab__i { position: absolute; left: 50%; top: 23.7px; transform: translate(-50%, -50%); }
.app-tab__i--today { width: 24.7px; height: 24.7px; }
.app-tab__i--req { width: 25.7px; height: 22.6px; }
.app-tab__i--dec { width: 28.3px; height: 27px; }
.app-tab__i--co { width: 21.7px; height: 26.3px; }
.app-badge {
  position: absolute; left: 49.8px; top: 6px; width: 19.3px; height: 19.3px; padding: 0;
  border-radius: 50%; background: #ff3b30; color: #fff; font-size: 13px; line-height: 19.3px; letter-spacing: 0; text-align: center;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.app-badge.is-off { transform: scale(0); }

/* new request sheet */
.app-dim { position: absolute; left: 0; top: 0; z-index: 4; width: 402px; height: 874px; background: rgba(0, 0, 0, .2); opacity: 0; }
.app-sheet {
  position: absolute; left: 0; top: 62px; z-index: 5; width: 402px; height: 812px; border-radius: 42px 42px 0 0;
  background: #f2f2f7;
  visibility: hidden; box-shadow: 0 -6px 30px rgba(0, 0, 0, .06); transform: translateY(812px);
}
.app-sheet__close, .app-sheet__go {
  position: absolute; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  transition: transform .14s ease, background-color .2s ease, color .2s ease;
}
.app-sheet__close { left: 16px; background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px rgba(40, 50, 80, .1), 0 0 0 .5px rgba(0, 0, 0, .04); color: #1d1d1f; }
.app-sheet__close .app-i { width: 14px; height: 14px; stroke-width: 2.2; }
.app-sheet__go { left: 342px; background: #006ad6; color: #fff; box-shadow: 0 6px 16px rgba(0, 95, 210, .22); }
.app-sheet__go .app-i { width: 13px; height: 17px; stroke-width: 2.4; }
.app-sheet__go.is-pressed { transform: scale(.9); }
.app-sheet.is-empty .app-sheet__go { background: rgba(118, 118, 128, .12); color: rgba(60, 60, 67, .3); box-shadow: none; }
.app-sheet__title { position: absolute; left: 0; top: 27.4px; width: 402px; text-align: center; font-weight: 600; }
/* the field: three lines at least, growing with the request; its prompt shows while it is empty */
.app-sheet__card {
  position: absolute; left: 16px; top: 78px; width: 370px; min-height: 96px; padding: 16px;
  border: 1.5px solid #006bd8; border-radius: 26px; background: #fff;
}
.app-caret { display: inline-block; width: 2px; height: 20px; margin: 0 0 -4.5px 1px; border-radius: 1px; background: #006bd8; opacity: 0; }
.app-sheet__hint { display: none; position: absolute; left: 16px; top: 16px; width: 335px; color: #85868c; }
.app-sheet.is-empty .app-sheet__hint { display: block; }
/* while the field is empty, the app's starters: a header with the info button, then two columns of tiles that
   share each row's height (ConciergeAskView, ConciergeTaskStarter); a first letter typed puts them away */
.app-start { display: none; position: absolute; left: 16px; top: 198px; width: 370px; }
.app-sheet.is-empty .app-start { display: block; }
.app-start__head { display: flex; align-items: center; justify-content: space-between; height: 44px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.24px; color: #48484a; }
.app-start__info { width: 22px; height: 22px; margin-right: 11px; stroke-width: 1.7; color: #006bd8; }
.app-start__dot { fill: currentColor; }
.app-start__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.app-start__grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: 26px; background: #fff; }
.app-start__i { width: 24px; height: 24px; stroke-width: 1.6; color: #48484a; }
.app-start__badge { fill: #fff; }
.app-start__grid b { font-size: 15px; line-height: 20px; letter-spacing: -.24px; }
.app-start__grid li > span { font-size: 12px; line-height: 16px; letter-spacing: 0; color: #48484a; }
.app-sheet__tool {
  position: absolute; top: 722px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px rgba(40, 50, 80, .1), 0 0 0 .5px rgba(0, 0, 0, .04); color: #1d1d1f;
}
.app-sheet__tool--attach { left: 16px; }
.app-sheet__tool--dictate { left: 74px; }
.app-sheet__tool--attach .app-i { width: 15.3px; height: 18.5px; stroke-width: 1.8; }
.app-sheet__tool--dictate .app-i { width: 11.3px; height: 17.6px; stroke-width: 1.8; }

/* a finger on the glass, as in a screen recording */
.app-touch {
  position: absolute; left: 0; top: 0; z-index: 7; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(60, 60, 67, .26); box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 8px 18px rgba(0, 0, 0, .16); opacity: 0;
}

/* Before the script runs, the phone shows the request waiting for an answer, as the hero always did.
   With script and motion allowed, it starts from an empty list instead, so nothing flashes. */
@media (prefers-reduced-motion: no-preference) {
  .js .app:not(.is-live) .app-req { opacity: 0; }
  .js .app:not(.is-live) .app-badge { transform: scale(0); }
}

/* Captions and controls, under the phone */
.demo-bar { display: none; }
.js .demo-bar {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  width: min(100% - 2 * var(--gutter), 520px); margin: clamp(26px, 3vw, 40px) auto clamp(44px, 5vw, 72px); text-align: center;
}
.demo-bar__text { margin-bottom: 14px; }
.demo-bar__title, .demo-bar__event { display: grid; }
.demo-bar__title > span, .demo-bar__event > span { grid-area: 1 / 1; align-self: end; opacity: 0; transition: opacity .18s ease-in; }
.demo-bar__title > .is-on, .demo-bar__event > .is-on { opacity: 1; transition: opacity .38s var(--ease) .16s; }
.demo-bar__title { font-family: var(--font-display); font-size: 21px; line-height: 26px; font-weight: 600; letter-spacing: -.021em; color: var(--ink); }
.demo-bar__event { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--ink-2); }
.demo-bar__event time { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-bar__event .demo-bar__hint { color: var(--link); font-weight: 500; }
.demo-bar__event time::after { content: "\00B7"; margin: 0 .45em; color: var(--ink-2); font-weight: 400; }
.demo-bar__controls {
  display: flex; align-items: center; padding: 4px 4px 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 26px rgba(15, 15, 30, .1), 0 0 0 1px rgba(15, 15, 30, .06);
}
.demo-bar__steps { display: flex; }
.demo-bar__step { display: flex; align-items: center; width: 60px; height: 36px; padding: 0 5px; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.demo-bar__track { position: relative; display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(29, 29, 31, .14); transition: background-color .2s var(--ease); }
.demo-bar__step:hover .demo-bar__track { background: rgba(29, 29, 31, .24); }
.demo-bar__fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.demo-bar__toggle {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: 6px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(29, 29, 31, .07); color: var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.demo-bar__toggle:hover { background: rgba(29, 29, 31, .13); }
.demo-bar__toggle svg { width: 16px; height: 16px; }
.demo-bar__i-play, .demo-bar__toggle.is-paused .demo-bar__i-pause { display: none; }
.demo-bar__toggle.is-paused .demo-bar__i-play { display: block; margin-left: 2px; }
@media (max-width: 734px) {
  .demo-bar__text { margin-bottom: 10px; }
  .demo-bar__title { font-size: 17px; line-height: 22px; }
  .demo-bar__event { margin-top: 2px; font-size: 13px; line-height: 18px; }
  .demo-bar__step { width: 50px; }
}

/* Page heroes (inner pages) */
.phero { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(40px, 6vw, 72px); text-align: center; }
.phero .lead { max-width: 760px; margin: 22px auto 0; }
.phero__alt { margin-top: 18px; }
.phero--night { background: var(--night); color: var(--on-night); }

/* ---------- The film ---------- */

.play-link { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--link); }
.play-link svg { width: 24px; height: 24px; flex: none; transition: transform .25s var(--ease); }
.play-link:hover svg { transform: scale(1.08); }

.film { padding-top: clamp(72px, 9vw, 128px); }
.film__stage { max-width: 1120px; margin: 0 auto; }
.film__frame {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; border-radius: var(--radius);
  background: #fbfbfd;
  box-shadow: 0 40px 100px rgba(15, 15, 30, .12), 0 10px 28px rgba(15, 15, 30, .07), 0 0 0 1px rgba(15, 15, 30, .05);
}
.film__loop { width: 100%; height: 100%; object-fit: cover; }
.film__play {
  position: absolute; left: clamp(12px, 2.2vw, 28px); bottom: clamp(12px, 2.2vw, 28px); z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 20px 8px 8px; border-radius: 980px;
  background: rgba(29, 29, 31, .74); color: #fff;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-size: 17px; font-weight: 500; letter-spacing: -.02em; line-height: 1;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.film__play:hover { background: rgba(29, 29, 31, .88); color: #fff; text-decoration: none; transform: scale(1.02); }
.film__play-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1d1d1f; }
.film__play-icon svg { width: 18px; height: 18px; margin-left: 2px; }
.film__time { color: rgba(255, 255, 255, .62); font-weight: 400; font-variant-numeric: tabular-nums; }
.film__toggle {
  position: absolute; right: clamp(12px, 2.2vw, 28px); bottom: clamp(12px, 2.2vw, 28px); z-index: 2;
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(29, 29, 31, .56); color: #fff;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transition: background-color .25s var(--ease);
}
.js .film__toggle { display: grid; }
.film__toggle:hover { background: rgba(29, 29, 31, .78); }
.film__toggle svg { width: 18px; height: 18px; }
.film__toggle .film__i-play, .film__toggle.is-paused .film__i-pause { display: none; }
.film__toggle.is-paused .film__i-play { display: block; margin-left: 2px; }
.film .cta-row { margin-top: clamp(28px, 3.5vw, 44px); }
@media (max-width: 734px) {
  .hero__cta .play-link { font-size: 16px; }
  .play-link svg { width: 22px; height: 22px; }
  .film__frame { border-radius: var(--radius-s); }
  .film__play { gap: 9px; padding: 6px 14px 6px 6px; font-size: 15px; }
  .film__play-icon { width: 32px; height: 32px; }
  .film__play-icon svg { width: 15px; height: 15px; }
  .film__toggle { width: 36px; height: 36px; }
  .film__toggle svg { width: 15px; height: 15px; }
}
@media (max-width: 359px) { .film__time { display: none; } }

/* The full film, in a lightbox */
.lightbox {
  width: min(94vw, calc((100vh - 140px) * 16 / 9), 1600px);
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0;
  background: transparent; color: #fff; overflow: visible;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox[open] { animation: lightbox-in .4s var(--ease); }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__inner { position: relative; }
.lightbox__video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-s); background: #000; }
.lightbox__close {
  position: absolute; top: -56px; right: 0;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; transition: background-color .2s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close svg { width: 20px; height: 20px; }
html.film-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

/* ---------- Statement ---------- */

.statement-wrap { max-width: 980px; margin: 0 auto; text-align: center; }

/* ---------- Step scroller (home) ---------- */

.steps__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.steps__media { display: none; }
.step { padding: 0 0 72px; }
.step:last-child { padding-bottom: 0; }
.step__num {
  display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: var(--indigo); margin-bottom: 12px;
}
.step h3 { margin-bottom: 12px; }
.step p { color: var(--ink-2); font-size: 19px; line-height: 1.42; max-width: 480px; }
.step__phone { margin-top: 36px; display: flex; justify-content: center; }
.step__phone .device { --w: min(78vw, 300px); }

@media (min-width: 1069px) {
  .steps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
  .steps__media {
    display: flex; justify-content: center; align-items: center;
    position: sticky; top: calc(var(--nav-h) + 4vh); height: calc(100vh - var(--nav-h) - 8vh);
    order: 2;
  }
  .steps__media .device { --w: min(340px, 38vh); }
  .steps__list { order: 1; }
  .step { min-height: 78vh; padding: 0; display: flex; flex-direction: column; justify-content: center; }
  .step__phone { display: none; }
}
/* The steps away from the phone's screen step back in colour, not in opacity, so every line stays
   readable: the title and number go to the secondary ink (5.0:1 on white), the text already is. */
@media (min-width: 1069px) and (prefers-reduced-motion: no-preference) {
  .step h3, .step__num { transition: color .5s var(--ease); }
  .js .step:not(.is-current) h3, .js .step:not(.is-current) .step__num { color: var(--ink-2); }
}

/* ---------- Tiles and bento ---------- */

.bento { display: grid; gap: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile {
  grid-column: span 2;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--paper);
}
.bg-mist .tile { background: var(--paper); }
.section:not(.bg-mist) .tile { background: var(--mist); }
.bg-night .tile, .bg-night-2 .tile { background: var(--night-3); color: var(--on-night); }
.tile--wide { grid-column: span 3; }
.tile--full { grid-column: span 6; }
.tile--two { grid-column: span 4; }
.tile__icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 22px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(160deg, #3a3a3c 0%, #1d1d1f 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .10);
}
.tile__icon svg { width: 24px; height: 24px; }
.bg-night .tile__icon, .bg-night-2 .tile__icon {
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.tile__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 700; letter-spacing: -.026em;
  text-wrap: balance;
}
.tile__text { margin-top: 10px; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.bg-night .tile__text, .bg-night-2 .tile__text { color: var(--on-night-2); }
.tile__peek {
  margin: 32px calc(-1 * clamp(28px, 3vw, 40px)) calc(-1 * clamp(28px, 3vw, 40px));
  height: 330px; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
}
.tile__peek .device { --w: 270px; }
.tile__peek--tall { height: 420px; }
.tile .more { margin-top: auto; padding-top: 20px; }

@media (max-width: 1068px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--wide, .tile--two { grid-column: span 1; }
  .tile--full { grid-column: span 2; }
}
@media (max-width: 734px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tile, .tile--wide, .tile--two, .tile--full { grid-column: auto; }
  .tile__peek { height: 300px; }
}

/* ---------- Split feature (text + phone) ---------- */

.split {
  display: grid; align-items: center; gap: clamp(40px, 6vw, 96px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split--flip .split__media { order: -1; }
.split__media { display: flex; justify-content: center; gap: 24px; }
.split__media .device { --w: clamp(240px, 26vw, 320px); }
.split__copy .lead { margin-top: 18px; }
.split__copy .points { margin-top: 30px; }
@media (max-width: 1068px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__media { order: 0; }
  .split__copy { text-align: center; }
  .split__copy .points { text-align: left; max-width: 520px; margin-inline: auto; }
  .split__copy .cta-row { justify-content: center; }
}

/* Feature points with icons */
.points { display: grid; gap: 22px; }
.points li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.points svg { width: 26px; height: 26px; color: var(--blue); margin-top: 1px; }
.points h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.points p { color: var(--ink-2); margin-top: 2px; }
.bg-night .points svg, .bg-night-2 .points svg { color: var(--link-night); }
.bg-night .points p, .bg-night-2 .points p { color: var(--on-night-2); }
.points--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
@media (max-width: 734px) { .points--grid { grid-template-columns: minmax(0, 1fr); } }

/* Pair of phones */
.duo { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 48px); }
.duo .device { --w: clamp(150px, 26vw, 320px); }
.duo .duo__lower { margin-top: clamp(40px, 6vw, 90px); }

/* Gallery (horizontal scroll) */
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px var(--gutter) 30px; margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery__item { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gallery__item .device { --w: 250px; }
.gallery__item figcaption { text-align: center; font-size: 17px; color: var(--ink-2); max-width: 250px; }
.gallery__item figcaption strong { display: block; color: var(--ink); font-size: 19px; margin-bottom: 4px; }
@media (min-width: 1200px) {
  .gallery { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 8px 0 0; }
  .gallery__item .device { --w: 240px; }
}

/* ---------- Timeline (the record) ---------- */

.timeline {
  background: var(--paper); border-radius: var(--radius); padding: 30px 32px;
  box-shadow: 0 30px 60px rgba(15, 15, 30, .08), 0 0 0 1px var(--hair);
  max-width: 420px; width: 100%;
}
.timeline__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; margin-bottom: 18px; }
.timeline__head strong { font-size: 17px; }
.timeline__head span { font-size: 13px; color: var(--ink-3); }
.timeline ol { position: relative; }
.timeline ol::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #e5e5ea; }
.timeline li { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 9px 0 9px 28px; font-size: 15px; }
.timeline li::before {
  content: ""; position: absolute; left: 1px; top: 14px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px var(--blue);
}
.timeline li.is-done::before { background: var(--blue); }
.timeline li time { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline__seal {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5e5ea;
  display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2);
}
.timeline__seal svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.record-stage { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.record-stage .device { --w: clamp(230px, 24vw, 300px); }

/* ---------- Numbers band ---------- */

.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; }
.numbers__value {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em;
  font-size: clamp(44px, 5.6vw, 76px); line-height: 1;
}
.numbers__label { margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.numbers__label strong { display: block; color: var(--ink); }
.bg-night .numbers__label, .bg-night-2 .numbers__label { color: var(--on-night-2); }
.bg-night .numbers__label strong, .bg-night-2 .numbers__label strong { color: var(--on-night); }
@media (max-width: 1068px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } }

/* ---------- Security (night) ---------- */

.sec-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 100%, rgba(94, 92, 230, .30), rgba(0, 0, 0, 0) 70%), #000;
  color: var(--on-night);
  padding-top: clamp(72px, 10vw, 140px);
  text-align: center;
}
.sec-hero .lead { max-width: 760px; margin: 24px auto 0; }
.lattice { width: min(100%, 980px); margin: clamp(40px, 6vw, 72px) auto 0; }
.lattice svg { width: 100%; height: auto; overflow: visible; }
.lattice .l-line { stroke: url(#lv-lat-line); stroke-width: 1.2; }
.lattice .l-node { fill: #8e8cf5; }
.lattice .l-glow { fill: url(#lv-lat-glow); }
.lattice .l-core { fill: #fff; }
.lattice .l-pulse { fill: none; stroke: #8e8cf5; stroke-width: 1.5; opacity: 0; transform-origin: 490px 230px; animation: lv-pulse 4.8s var(--ease) infinite; }
.lattice .l-pulse--2 { animation-delay: 1.6s; }
.lattice .l-pulse--3 { animation-delay: 3.2s; }
.lattice .l-twinkle { animation: lv-twinkle 3.6s ease-in-out infinite; }
.lattice .l-twinkle--b { animation-delay: 1.2s; }
.lattice .l-twinkle--c { animation-delay: 2.4s; }
@keyframes lv-pulse { 0% { opacity: .0; transform: scale(.4); } 18% { opacity: .55; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes lv-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.glass {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.layer { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.layer__tag {
  align-self: flex-start;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; margin-bottom: 22px;
  color: #d0cffe; background: rgba(94, 92, 230, .22); box-shadow: inset 0 0 0 1px rgba(142, 140, 245, .35);
}
.layer__tag--classic { color: #c7c7cc; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.layer h3 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.028em; line-height: 1.12; }
.layer > p { margin-top: 12px; color: var(--on-night-2); font-size: 17px; }
.layer details { margin-top: auto; padding-top: 24px; }
.layer summary {
  cursor: pointer; list-style: none; color: var(--link-night); font-size: 15px; display: inline-flex; gap: 6px; align-items: center;
}
.layer summary::-webkit-details-marker { display: none; }
.layer summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform .25s var(--ease); }
.layer details[open] summary::after { transform: rotate(45deg); }
.spec { margin-top: 14px; display: grid; gap: 8px; font-size: 14px; color: var(--on-night-2); }
.spec div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--night-line); }
.spec dt { color: var(--on-night); }
.spec code, .algo { font-family: var(--mono); font-size: 13px; color: #d0cffe; }
@media (max-width: 1068px) { .layers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .spec div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.stack { width: 100%; border-collapse: collapse; font-size: 15px; }
.stack th, .stack td { text-align: left; padding: 16px 12px; border-bottom: 1px solid var(--night-line); vertical-align: top; }
.stack th { color: var(--on-night-2); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.stack td:first-child { color: var(--on-night); font-weight: 600; width: 22%; }
.stack td { color: var(--on-night-2); }
.stack-wrap { overflow-x: auto; }
@media (max-width: 734px) {
  .stack thead { display: none; }
  .stack tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--night-line); }
  .stack td { display: block; border: 0; padding: 3px 0; width: auto !important; }
}

/* ---------- Pricing ---------- */

.billing {
  display: inline-flex; padding: 4px; border-radius: 999px; background: #e8e8ed; margin-top: 30px;
}
.billing button {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.billing button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); }
.billing .save { color: var(--link); font-weight: 600; }
html:not(.js) .billing { display: none; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; gap: 28px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 32px 34px; border-radius: var(--radius);
  background: var(--paper); box-shadow: 0 0 0 1px var(--hair);
}
.plan--featured { box-shadow: 0 0 0 2px var(--blue), 0 30px 60px rgba(0, 113, 227, .10); }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  color: #fff; background: var(--blue); padding: 6px 12px; border-radius: 999px;
}
.plan__name { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.plan__for { color: var(--ink-2); margin-top: 4px; min-height: 2.9em; }
.plan__price { margin-top: 22px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-size: 56px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.plan__unit { color: var(--ink-2); font-size: 15px; line-height: 1.3; }
.plan__note { margin-top: 8px; font-size: 14px; color: var(--ink-2); min-height: 2.6em; }
.plan .btn { margin-top: 26px; width: 100%; }
.plan__list { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e5ea; display: grid; gap: 12px; }
.plan__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.4; }
.plan__list svg { width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }
.plan__list .plan__lead { grid-template-columns: minmax(0, 1fr); font-weight: 600; }
@media (max-width: 1068px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 30px; }
  .plan__for, .plan__note { min-height: 0; }
}

/* A plan priced on quote: a word in place of the amount, on the same line height so the cards stay aligned */
.plan__amount--word { font-size: 44px; line-height: 56px; letter-spacing: -.035em; }
/* The first-month promise, right under the button */
.plan__promise {
  margin-top: 14px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; background: var(--mist); font-size: 14px; line-height: 1.4; font-weight: 500;
}
.plan__promise svg { width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }

/* The first month in three steps: set up, work, review */
.journey { margin-top: clamp(72px, 9vw, 120px); text-align: center; }
.journey h2 { max-width: 760px; margin-inline: auto; }
.journey__steps {
  margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  text-align: left;
}
.journey__step { position: relative; padding: 30px 28px 32px; border-radius: var(--radius); background: var(--mist); }
.journey__step--end { background: var(--paper); box-shadow: 0 0 0 2px var(--blue), 0 30px 60px rgba(0, 113, 227, .10); }
.journey__step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -17px; width: 10px; height: 10px;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: translateY(-50%) rotate(45deg);
}
.journey__when {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.journey__when svg { width: 18px; height: 18px; color: var(--blue); }
.journey__title { margin-top: 14px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.journey__step p { margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 1068px) {
  .journey__steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .journey__step:not(:last-child)::after { top: auto; right: auto; bottom: -19px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
/* The pilot's rules, under the three steps (#pilot, #pilote): the target, how it is measured, what counts, the refund */
.pilotrules { margin-top: 24px; padding: 34px 36px 36px; border-radius: var(--radius); background: var(--mist); text-align: left; }
.pilotrules__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pilotrules .plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; margin-top: 22px; padding-top: 22px; border-top-color: var(--line); }
.pilotrules .plan__list li { color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
.pilotrules .plan__list strong { color: var(--ink); font-weight: 600; }
.pilotrules__more { margin-top: 22px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.pilotrules__more a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@media (max-width: 1068px) {
  .pilotrules { max-width: 520px; margin-inline: auto; padding: 30px 28px 32px; }
  .pilotrules .plan__list { grid-template-columns: minmax(0, 1fr); }
}

/* What every company gets: four short lists, side by side on a wide screen */
.included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.included h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.included .plan__list { margin-top: 14px; padding-top: 18px; }
@media (max-width: 1068px) { .included { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .included { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Positioned, so the screen-reader labels inside the table scroll with it instead of widening the page. */
.compare-wrap { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
/* It takes focus so a keyboard can scroll it; where it reaches the window's edges, the ring is drawn inside. */
.compare-wrap--desk:focus-visible { outline-offset: -3px; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 15px 10px; border-bottom: 1px solid #e5e5ea; text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; padding-left: 0; }
/* Above 734 px the wrapper scrolls sideways, which makes it the header's scroll container: a sticky header could
   only stick to the wrapper, which never scrolls up or down, and its offset pushed it over the first rows ("Price
   per month"). The header stays in its row; each table fits one screen. On phones it sticks under the bar (below). */
.compare thead th { font-size: 17px; font-weight: 700; padding-bottom: 18px; background: var(--mist); }
.compare tbody th { font-weight: 400; }
.compare .group th { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); padding-top: 34px; }
.compare svg { width: 20px; height: 20px; color: var(--blue); margin: 0 auto; }
.compare .none { display: block; width: 14px; height: 2px; margin: 0 auto; border-radius: 1px; background: #8e8e93; }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.022em; line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) center / 14px 1.6px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) center / 1.6px 14px no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 48px 28px 0; color: var(--ink-2); font-size: 17px; }
.faq .answer p + p { margin-top: 12px; }

/* ---------- About ---------- */

.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.person { text-align: center; padding: 40px 24px; border-radius: var(--radius); background: var(--mist); }
.person img { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 20px; object-fit: cover; }
.person h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.person p { color: var(--ink-2); margin-top: 4px; font-size: 15px; }
@media (max-width: 834px) { .people { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; } }

/* ---------- Examples (what you can hand over) ---------- */

.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.example {
  padding: 28px; border-radius: var(--radius-s); background: var(--paper);
  font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
}
.example span { display: block; font-family: var(--font); margin-top: 10px; font-size: 15px; font-weight: 400; color: var(--ink-2); letter-spacing: -.01em; }
.example svg { width: 26px; height: 26px; color: var(--indigo); margin-bottom: 16px; }
@media (max-width: 1068px) { .examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 734px) { .examples { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: start; }
.form { padding: clamp(28px, 4vw, 44px); border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 30px 60px rgba(15, 15, 30, .06); }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form__note { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.aside-card { padding: 32px; border-radius: var(--radius); background: var(--mist); }
.aside-card + .aside-card { margin-top: 20px; }
.aside-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.aside-card p { color: var(--ink-2); }
.aside-card a.big { display: inline-block; margin-top: 10px; font-size: 19px; font-weight: 600; }
@media (max-width: 1068px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Closing CTA ---------- */

.closing { text-align: center; }
.closing .lead { max-width: 680px; margin: 20px auto 0; }
.closing__icon { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 30px; box-shadow: 0 20px 40px rgba(0, 0, 0, .18); }

/* ---------- Prose (legal) ---------- */

.prose { font-size: 17px; line-height: 1.6; }
.prose h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.024em; margin: 48px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 600; margin: 28px 0 8px; }
.prose p, .prose ul { margin-bottom: 14px; color: #424245; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose .updated { color: var(--ink-3); font-size: 15px; }
.facts { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid #e5e5ea; margin: 18px 0 8px; }
.facts dt, .facts dd { margin: 0; padding: 12px 0; border-bottom: 1px solid #e5e5ea; }
.facts dt { font-weight: 600; color: var(--ink); padding-right: 16px; }
.facts dd { color: #424245; }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts dt { border-bottom: 0; padding-bottom: 0; } }
.providers { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.providers th, .providers td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid #e5e5ea; vertical-align: top; }
.providers th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
/* On the narrowest phones a long word (réservation, Prestataire) set the table wider than the screen. */
@media (max-width: 374px) {
  .providers { font-size: 14px; }
  .providers th, .providers td { padding-right: 8px; overflow-wrap: anywhere; hyphens: auto; }
  .providers th { font-size: 11.5px; letter-spacing: .03em; }
}

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

.gfoot { background: var(--mist); color: var(--ink-2); font-size: 12px; line-height: 1.5; padding: 44px 0 28px; }
.gfoot__cols { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.gfoot__brand { display: inline-flex; gap: 8px; align-items: center; color: var(--ink); font-weight: 600; font-size: 15px; }
.gfoot__brand img { width: 22px; height: 22px; border-radius: 6px; }
.gfoot__tag { margin-top: 10px; max-width: 280px; }
.gfoot h2 { color: var(--ink); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.gfoot li + li { margin-top: 8px; }
.gfoot a { color: var(--ink-2); }
.gfoot a:hover { color: var(--ink); }
.gfoot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 18px; }
.gfoot__lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.gfoot__lang a + a { margin-left: 14px; }
@media (max-width: 834px) {
  .gfoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gfoot__about { grid-column: 1 / -1; }
}

/* ---------- Reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--d1 { transition-delay: .08s; }
.js .reveal--d2 { transition-delay: .16s; }
.js .reveal--d3 { transition-delay: .24s; }

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

/* ---------- 404 ---------- */

.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 120px 0; }

.section-follow { margin-top: clamp(48px, 6vw, 84px); }
.section-lead { margin-top: 14px; }

/* Night heroes: lead text and highlights on black */
.sec-hero .lead, .phero--night .lead { color: var(--on-night-2); }
.sec-hero .lead strong, .phero--night .lead strong { color: var(--on-night); }
.sec-hero .eyebrow, .phero--night .eyebrow { color: var(--on-night-2); }
.sec-hero .eyebrow--accent, .phero--night .eyebrow--accent { color: transparent; }

/* Pricing footnote */
.plans-foot { margin-top: 28px; font-size: 14px; }

@media (max-width: 734px) {
  .duo { gap: 14px; }
  .duo .device { --w: 42vw; }

  /* Comparison on iPhone: plan names stay pinned under the bar; each feature
     reads on its own line, with the three plans in columns beneath it. */
  .compare-wrap { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .compare, .compare thead, .compare tbody { display: block; }
  .compare { min-width: 0; font-size: 15px; }
  .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; border-bottom: 1px solid #e5e5ea; }
  .compare th, .compare td { display: block; border: 0; padding: 0; }
  .compare thead {
    position: sticky; top: var(--nav-h); z-index: 2;
    background: rgba(245, 245, 247, .92);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .compare thead tr { border-bottom-color: var(--line); }
  .compare thead th { position: static; padding: 14px 2px 13px; font-size: 15px; letter-spacing: -.01em; text-align: center; background: transparent; }
  .compare thead th:first-child { display: none; }
  .compare tbody th[scope="row"] { grid-column: 1 / -1; padding: 18px 0 10px; font-size: 15px; line-height: 1.35; text-align: left; }
  .compare tbody td { padding: 0 6px 18px; font-size: 14px; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
  .compare tr.group { display: block; border-bottom: 0; }
  .compare tr.group th { padding: 40px 0 6px; text-align: left; }
  .compare tbody tr.group:first-child th { padding-top: 26px; }
  .compare svg { width: 20px; height: 20px; }
}

.answer a, .prose a, .faq a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* Security page: dark navigation, as on Apple's dark product pages */
.page-security .gnav { background: rgba(22, 22, 23, .9); border-bottom-color: rgba(255, 255, 255, .08); }
.page-security .gnav__brand, .page-security .gnav__links a { color: #f5f5f7; }
.page-security .gnav__toggle span { background: #f5f5f7; }
/* Black page ground for the overscroll area under the dark bar; every section paints its own. */
.page-security { background: #000; }
@media (max-width: 1023px) {
  .page-security .gnav__links { background: #161617; border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
  .page-security .gnav__links .gnav__lang { color: #a1a1a6; }
}

/* ---------- Device: MacBook Pro (front), with a browser on screen ---------- */
/* Every size is in cqw, a share of the laptop's own width, so it scales as one piece. */

.macbook {
  --w: 980px;
  position: relative;
  width: min(100%, var(--w));
  margin-inline: auto;
  container-type: inline-size;
}
.macbook__lid {
  position: relative;
  padding: 1.6cqw 1.35cqw 2.2cqw;
  border-radius: 2.4cqw 2.4cqw 0.9cqw 0.9cqw;
  background: #0b0b0c;
  box-shadow:
    inset 0 0 0 0.12cqw #48484c,
    inset 0 0 0 0.3cqw #141416,
    0 3cqw 7cqw rgba(15, 15, 30, .14);
}
.macbook__lid::after {
  /* camera housing, as tall as the menu bar it sits in */
  content: ""; position: absolute; top: 1.6cqw; left: 50%; z-index: 3;
  width: 12.4cqw; height: 2.4cqw; transform: translateX(-50%);
  background: #0b0b0c; border-radius: 0 0 0.85cqw 0.85cqw;
}
.macbook__screen {
  position: relative; overflow: hidden;
  border-radius: 1.05cqw 1.05cqw 0.15cqw 0.15cqw;
  background: #f5f5f7;
  display: flex; flex-direction: column;
}
.macbook__menubar {
  flex: none; height: 2.4cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5cqw 0 1.6cqw;
  background: #ececef; color: #1d1d1f;
  font-size: 0.78cqw; line-height: 1; letter-spacing: 0; white-space: nowrap;
}
.macbook__menus { display: flex; gap: 1.45cqw; }
.macbook__menus b { font-weight: 700; }
.macbook__status { display: flex; align-items: center; gap: 1.1cqw; }
.macbook__status svg { width: 1.15cqw; height: 1.15cqw; }
.macbook__status svg.macbook__battery { width: 1.95cqw; height: 0.98cqw; }
.macbook__base {
  /* the base reads wider than the lid, but never wider than the page gutter allows */
  --overhang: min(5.5cqw, calc(var(--gutter) - 2px));
  position: relative;
  width: calc(100% + 2 * var(--overhang)); margin-left: calc(-1 * var(--overhang));
  height: 2.2cqw;
  border-radius: 0.3cqw 0.3cqw 4cqw 4cqw / 0.3cqw 0.3cqw 2.2cqw 2.2cqw;
  background: linear-gradient(180deg, #f2f2f4 0%, #d4d4d8 30%, #b3b3b9 72%, #8e8e94 100%);
  box-shadow: 0 2cqw 3cqw rgba(15, 15, 30, .16), 0 0.5cqw 0.8cqw rgba(15, 15, 30, .10);
}
.macbook__base::before {
  /* thumb scoop */
  content: ""; position: absolute; top: 0; left: 50%;
  width: 14cqw; height: 0.85cqw; transform: translateX(-50%);
  border-radius: 0 0 1.1cqw 1.1cqw;
  background: linear-gradient(180deg, #a9a9ae, #d0d0d4);
}
.macbook--dark .macbook__base { background: linear-gradient(180deg, #55555a 0%, #36363a 40%, #1f1f22 100%); box-shadow: 0 2cqw 3cqw rgba(0, 0, 0, .5); }
.macbook--dark .macbook__base::before { background: linear-gradient(180deg, #1d1d20, #3a3a3e); }

/* Browser chrome, macOS style, sized from the laptop width */
.mbrowser { display: flex; flex-direction: column; background: #fff; }
.mbrowser__bar {
  aspect-ratio: 1512 / 52; flex: none;
  display: flex; align-items: center; gap: 1.1cqw; padding: 0 1.3cqw;
  background: #f6f6f7; border-bottom: 0.08cqw solid #dcdce0;
  font-size: 0.86cqw; color: #6e6e73;
}
.mbrowser__dots { display: flex; gap: 0.55cqw; }
.mbrowser__dots i { width: 0.82cqw; height: 0.82cqw; border-radius: 50%; display: block; background: #ff5f57; }
.mbrowser__dots i:nth-child(2) { background: #febc2e; }
.mbrowser__dots i:nth-child(3) { background: #28c840; }
.mbrowser__nav { display: flex; gap: 0.9cqw; margin-left: 0.8cqw; color: #8e8e93; font-size: 1.1cqw; line-height: 1; }
.mbrowser__url {
  flex: 0 1 34%; margin: 0 auto; transform: translateX(-3cqw);
  display: flex; align-items: center; justify-content: center; gap: 0.45cqw;
  height: 2.1cqw; border-radius: 0.65cqw; background: #e9e9ec; color: #1d1d1f;
  font-size: 0.86cqw; letter-spacing: -.01em; white-space: nowrap;
}
.mbrowser__url svg { width: 0.8cqw; height: 0.8cqw; color: #6e6e73; }
.mbrowser img { display: block; width: 100%; aspect-ratio: 1512 / 906; object-fit: cover; object-position: top; }

/* ---------- Windows browser window ---------- */

.winwin {
  --w: 860px;
  width: min(100%, var(--w));
  container-type: inline-size;
  border-radius: 0.9cqw; overflow: hidden;
  background: #202020;
  box-shadow: 0 0 0 0.1cqw rgba(255, 255, 255, .10), 0 4cqw 9cqw rgba(0, 0, 0, .35);
}
.winwin__tabs {
  aspect-ratio: 1440 / 40; display: flex; align-items: flex-end; gap: 0.6cqw;
  padding: 0 0 0 0.9cqw; background: #1b1b1b; font-size: 0.9cqw; color: #e6e6e6;
}
.winwin__tab {
  display: flex; align-items: center; gap: 0.6cqw;
  height: 78%; padding: 0 1cqw; min-width: 16cqw;
  border-radius: 0.6cqw 0.6cqw 0 0; background: #2b2b2b;
}
.winwin__tab img { width: 1.1cqw; height: 1.1cqw; border-radius: 0.25cqw; }
.winwin__tab b { font-weight: 400; margin-right: auto; }
.winwin__plus { align-self: center; color: #bdbdbd; font-size: 1.2cqw; padding: 0 0.6cqw; }
.winwin__controls { margin-left: auto; align-self: stretch; display: flex; }
.winwin__controls i {
  position: relative; display: block; width: 4.2cqw; height: 100%;
}
.winwin__controls i::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.winwin__controls i:nth-child(1)::before { width: 0.85cqw; height: 0.07cqw; background: #e6e6e6; }
.winwin__controls i:nth-child(2)::before { width: 0.75cqw; height: 0.75cqw; border: 0.07cqw solid #e6e6e6; border-radius: 0.12cqw; }
.winwin__controls i:nth-child(3)::before, .winwin__controls i:nth-child(3)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.95cqw; height: 0.07cqw; background: #e6e6e6;
}
.winwin__controls i:nth-child(3)::before { transform: translate(-50%, -50%) rotate(45deg); }
.winwin__controls i:nth-child(3)::after { transform: translate(-50%, -50%) rotate(-45deg); }
.winwin__bar {
  aspect-ratio: 1440 / 40; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1cqw;
  background: #2b2b2b; border-bottom: 0.08cqw solid #3a3a3a; color: #bdbdbd; font-size: 1.05cqw;
}
.winwin__url {
  flex: 1; display: flex; align-items: center; gap: 0.6cqw; height: 66%;
  padding: 0 1.1cqw; border-radius: 99cqw; background: #1b1b1b; color: #e6e6e6; font-size: 0.92cqw;
}
.winwin__url svg { width: 0.9cqw; height: 0.9cqw; color: #bdbdbd; }
.winwin img.winwin__shot { display: block; width: 100%; aspect-ratio: 1440 / 828; object-fit: cover; object-position: top; }

/* ---------- Compositions ---------- */
/* An iPhone standing in front of a Mac or PC, sized in cqw of the whole composition. */

.continuity {
  --pw: 20.5cqw;                     /* iPhone width: about a fifth of the scene, as in life */
  container-type: inline-size;
  position: relative; max-width: 1080px; margin: 0 auto;
}
/* the phone stands a little in front of the laptop, so the laptop leaves room below it */
.continuity .macbook { width: 88cqw; margin: 0 0 3.6cqw; }
.continuity__phone { position: absolute; right: 0; bottom: 0; z-index: 2; width: var(--pw); }
.continuity__phone .device { --w: var(--pw); }
.continuity__phone .device::before, .continuity__phone .device::after { display: none; }
.continuity__phone::after {
  /* contact shadow on the desk */
  content: ""; position: absolute; z-index: -1;
  left: 10%; right: 10%; bottom: -2.2cqw; height: 4cqw;
  background: radial-gradient(closest-side, rgba(15, 15, 30, .30), rgba(15, 15, 30, 0));
}
.continuity--win { --pw: 19cqw; }
.continuity--win .winwin { width: 88cqw; margin: 0 0 6cqw; }
@media (max-width: 734px) {
  .continuity { --pw: 25cqw; }
  .continuity .macbook { width: 86cqw; margin-bottom: 5cqw; }
  .continuity--win { --pw: 24cqw; }
  .continuity--win .winwin { margin-bottom: 9cqw; }
}

.web-hero { padding-top: clamp(64px, 9vw, 128px); text-align: center; background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%); overflow: hidden; }
.web-hero .lead { max-width: 760px; margin: 22px auto 0; }
.web-hero__stage { margin-top: clamp(40px, 6vw, 72px); padding-inline: var(--gutter); }

.platform-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: clamp(48px, 6vw, 80px); }
.platform-points li { text-align: left; }
.platform-points svg { width: 28px; height: 28px; color: var(--blue); margin-bottom: 14px; }
.platform-points h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.platform-points p { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
.bg-night .platform-points p { color: var(--on-night-2); }
@media (max-width: 1068px) { .platform-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .platform-points { grid-template-columns: minmax(0, 1fr); } }

.compat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.compat__card { padding: 32px; border-radius: var(--radius); background: var(--mist); text-align: left; }
.bg-mist .compat__card { background: var(--paper); }
.compat__card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.024em; }
.compat__card p { margin-top: 8px; color: var(--ink-2); }
.compat__card ul { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.compat__card li { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.bg-mist .compat__card li { background: var(--mist); box-shadow: none; }
.compat__card svg { width: 30px; height: 30px; color: var(--ink); margin-bottom: 18px; }
@media (max-width: 1068px) { .compat { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
.winwin__bar svg { width: 1.25cqw; height: 1.25cqw; flex: none; }

/* ---------- App page: MacBook and iPhone hero, Windows stage, phone pairs ---------- */

.devices-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px);
  background:
    radial-gradient(56% 46% at 50% 82%, rgba(0, 113, 227, .10), rgba(94, 92, 230, .05) 45%, rgba(94, 92, 230, 0) 72%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
}
.devices-hero__stage { margin-top: clamp(36px, 4.5vw, 60px); padding-inline: var(--gutter); }
.winwin-stage { display: flex; justify-content: center; }
.winwin-stage .winwin { --w: 1040px; }

.split__media--pair { align-items: flex-start; }
.split__media--pair .device { --w: clamp(150px, 18vw, 250px); }
.split__media--pair .split__second { margin-top: clamp(48px, 6vw, 84px); }
@media (max-width: 734px) {
  .devices-hero { padding-top: 44px; }
  .split__media--pair { gap: 14px; }
  .split__media--pair .device { --w: 42vw; }
}

/* ---------- Security: trust chips and interactive demonstrations ---------- */

html:not(.js) [data-needs-js] { display: none !important; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 30px auto 0; max-width: 1100px; }
.trust li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--on-night);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.trust svg { width: 17px; height: 17px; color: #a5a3ff; flex: none; }
/* on the narrowest phones a label too long for one line ("Registre chaîné, points de contrôle signés") takes two
   even lines, its icon in the first one, instead of an icon stranded at the pill's edge */
@media (max-width: 380px) {
  .trust li { display: block; text-align: center; text-wrap: balance; }
  .trust svg { display: inline; margin-right: 8px; vertical-align: -3px; }
}

/* A pill button for dark grounds */
.pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 38px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--on-night);
  background: rgba(255, 255, 255, .10); transition: background-color .2s var(--ease);
}
.pill:hover { background: rgba(255, 255, 255, .16); }
.pill svg { width: 16px; height: 16px; }
.pill[hidden] { display: none; }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.seg button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--on-night-2);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.seg button[aria-pressed="true"] { background: #f5f5f7; color: #1d1d1f; }

/* Live encryption */
.cipher { max-width: 880px; margin: 0 auto; padding: clamp(22px, 3vw, 36px); }
.cipher__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.cipher__file { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--on-night); min-width: 0; }
.cipher__file svg { width: 22px; height: 22px; color: #a5a3ff; flex: none; }
.cipher__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cipher__body { display: grid; margin-top: 26px; }
.cipher__plain, .cipher__sealed { grid-area: 1 / 1; transition: opacity .45s var(--ease), visibility .45s; }
.cipher__plain { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--on-night); }
.cipher__plain p + p { margin-top: 6px; }
.cipher__title { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.02em; }
.cipher__out {
  font-family: var(--mono); font-size: clamp(12.5px, 1.25vw, 15px); line-height: 1.65; letter-spacing: .02em;
  word-break: break-all; color: #b9b8ff; text-shadow: 0 0 18px rgba(125, 122, 255, .45);
}
.cipher[data-view="plain"] .cipher__sealed, .cipher[data-view="sealed"] .cipher__plain { opacity: 0; visibility: hidden; }
html:not(.js) .cipher .cipher__sealed { opacity: 1; visibility: visible; grid-area: 2 / 1; margin-top: 22px; }
.cipher__meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--night-line);
}
.cipher__meta dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--on-night-2); }
.cipher__meta dd { margin: 4px 0 0; font-family: var(--mono); font-size: 13.5px; color: var(--on-night); }
.cipher__foot { display: flex; align-items: center; gap: 12px 18px; margin-top: 22px; flex-wrap: wrap; }
.cipher__foot p { font-size: 14px; color: var(--on-night-2); flex: 1 1 260px; }
@media (max-width: 734px) {
  .cipher__top { flex-direction: column; align-items: stretch; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding-inline: 8px; }
  .cipher__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Copied today, decrypted tomorrow */
.qsim { max-width: 900px; margin: 0 auto; }
.qsim__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.qsim__card {
  position: relative; text-align: center; border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px) clamp(14px, 2vw, 28px);
  background: var(--night-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.qsim__card h3 { font-size: clamp(16px, 1.8vw, 21px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.qsim__algo { margin-top: 6px; font-size: clamp(12px, 1.2vw, 14px); color: var(--on-night-2); }
.qsim__state { margin-top: 16px; font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; letter-spacing: -.01em; color: var(--on-night); min-height: 2.6em; display: grid; place-items: center; }
.qsim [data-s] { display: none; }
.qsim[data-stage="0"] [data-s="0"], .qsim[data-stage="1"] [data-s="1"], .qsim[data-stage="2"] [data-s="2"] { display: inline; }
.lock { position: relative; width: clamp(52px, 6vw, 68px); margin: 0 auto 18px; color: #f5f5f7; }
.lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.lock__body { fill: currentColor; }
.lock__hole { fill: var(--night-3); transition: fill .6s var(--ease); }
.lock__shackle { transform-origin: 46px 34px; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.qsim__copy {
  position: absolute; top: -6px; left: 62%; z-index: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; color: #1d1d1f; background: #ffd60a;
  opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.qsim[data-stage="1"] .qsim__copy, .qsim[data-stage="2"] .qsim__copy { opacity: 1; transform: none; }
.qsim[data-stage="2"] .qsim__card--classic { background: rgba(255, 69, 58, .14); box-shadow: inset 0 0 0 1px rgba(255, 105, 97, .45); }
.qsim[data-stage="2"] .qsim__card--classic .lock { color: #ff6961; }
.qsim[data-stage="2"] .qsim__card--classic .lock__hole { fill: #3a1a19; }
.qsim[data-stage="2"] .qsim__card--classic .lock__shackle { transform: translateY(-9px) rotate(32deg); }
.qsim[data-stage="2"] .qsim__card--classic .qsim__state { color: #ff6961; }
.qsim[data-stage="2"] .qsim__card--lv { background: linear-gradient(160deg, rgba(41, 151, 255, .22), rgba(94, 92, 230, .14)), var(--night-3); box-shadow: inset 0 0 0 1px rgba(142, 140, 245, .55), 0 24px 70px rgba(94, 92, 230, .30); }
.qsim[data-stage="2"] .qsim__card--lv .qsim__state { color: #a5a3ff; }
.qsim__caption { max-width: 660px; margin: 30px auto 0; text-align: center; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; color: var(--on-night-2); min-height: 4.4em; }
.qsim__caption strong { color: var(--on-night); }
.qsim__control { max-width: 560px; margin: 18px auto 0; }
.qsim__range {
  --p: 0%;
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
}
.qsim[data-stage="1"] .qsim__range { --p: 50%; }
.qsim[data-stage="2"] .qsim__range { --p: 100%; }
.qsim__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #2997ff 0, #7d7aff var(--p), rgba(255, 255, 255, .18) var(--p));
}
.qsim__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -12px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.qsim__range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.qsim__range::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2997ff, #7d7aff); }
.qsim__range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.qsim__range:focus-visible { outline: none; }
.qsim__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(41, 151, 255, .65), 0 2px 12px rgba(0, 0, 0, .45); }
.qsim__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(41, 151, 255, .65); }
.qsim__ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--on-night-2); }
.qsim__ticks li { cursor: pointer; flex: 1; text-align: center; }
.qsim__ticks li:first-child { text-align: left; }
.qsim__ticks li:last-child { text-align: right; }
.qsim[data-stage="0"] .qsim__ticks li:nth-child(1), .qsim[data-stage="1"] .qsim__ticks li:nth-child(2), .qsim[data-stage="2"] .qsim__ticks li:nth-child(3) { color: var(--on-night); font-weight: 600; }

/* Try to rewrite history */
.split--record { align-items: center; }
.chain { padding: clamp(20px, 2.6vw, 30px); max-width: 520px; width: 100%; margin-inline: auto; }
.chain__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; margin-bottom: 10px; padding: 0 6px; }
.chain__head strong { font-size: 17px; color: var(--on-night); }
.chain__head span { font-size: 13px; color: var(--on-night-2); }
.chain__list { position: relative; }
.chain__list::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 2px; background: rgba(255, 255, 255, .14); }
.chain__entry {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  width: 100%; padding: 11px 8px 11px 6px; border: 0; border-radius: 14px; background: transparent; cursor: pointer;
  text-align: left; color: var(--on-night); transition: background-color .2s var(--ease);
}
.chain__entry:hover { background: rgba(255, 255, 255, .05); }
.chain__entry::before {
  content: ""; grid-row: 1 / 3; justify-self: center; width: 12px; height: 12px; border-radius: 50%;
  background: #2997ff; box-shadow: 0 0 0 4px rgba(41, 151, 255, .18); transition: background-color .3s, box-shadow .3s;
}
.chain__entry time { grid-column: 2; font-size: 12px; color: var(--on-night-2); font-variant-numeric: tabular-nums; }
.chain__text { grid-column: 2; font-size: 15px; line-height: 1.35; }
.chain__hash {
  grid-column: 3; grid-row: 1 / 3; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 8px; color: #b9b8ff; background: rgba(142, 140, 245, .12);
  transition: color .3s, background-color .3s;
}
.chain__entry[aria-pressed="true"]::before { background: #ffd60a; box-shadow: 0 0 0 4px rgba(255, 214, 10, .22); }
.chain__entry[aria-pressed="true"] .chain__text { color: #ffd60a; }
.chain__entry.is-changed .chain__hash { color: #ff8a80; background: rgba(255, 69, 58, .16); animation: lv-flash .7s var(--ease); }
@keyframes lv-flash { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.chain__seal {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px 16px; border-radius: 16px;
  background: rgba(48, 209, 88, .10); box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .30);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.chain__seal > svg { width: 26px; height: 26px; color: #30d158; transition: color .4s; }
.chain__seal-title { font-size: 15px; font-weight: 600; color: var(--on-night); }
.chain__seal-algos { font-size: 12px; color: var(--on-night-2); margin-top: 2px; }
.chain__verdict { font-size: 14px; font-weight: 700; text-align: right; }
.chain__ok { color: #30d158; }
.chain__ko { color: #ff6961; display: none; }
.chain[data-state="broken"] .chain__seal { background: rgba(255, 69, 58, .12); box-shadow: inset 0 0 0 1px rgba(255, 105, 97, .45); }
.chain[data-state="broken"] .chain__seal > svg { color: #ff6961; }
.chain[data-state="broken"] .chain__ok { display: none; }
.chain[data-state="broken"] .chain__ko { display: inline; }
@media (max-width: 480px) {
  .chain__seal { grid-template-columns: 28px minmax(0, 1fr); }
  .chain__verdict { grid-column: 2; text-align: left; margin-top: -4px; }
}
.chain__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 0 6px; min-height: 38px; }
.chain__hint { font-size: 13px; color: var(--on-night-2); }

/* What if...? */
.whatif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1040px; margin: 0 auto; }
.whatif__item { border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 12px 30px rgba(15, 15, 30, .04); }
.whatif__item summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 22px;
}
.whatif__item summary::-webkit-details-marker { display: none; }
.whatif__item summary::after {
  content: ""; width: 14px; height: 14px; justify-self: end;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) center / 14px 1.6px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) center / 1.6px 14px no-repeat;
  transition: transform .3s var(--ease);
}
.whatif__item[open] summary::after { transform: rotate(45deg); }
.whatif__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #3a3a3c 0%, #1d1d1f 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.whatif__icon svg { width: 22px; height: 22px; }
.whatif__q { font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.whatif__a { padding: 0 22px 22px 78px; }
.whatif__a p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.whatif__tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12px !important; font-weight: 600; letter-spacing: .02em; color: var(--ink) !important;
  padding: 5px 10px; border-radius: 999px; background: var(--mist);
}
.whatif__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #30d158; }
@media (max-width: 834px) {
  .whatif { grid-template-columns: minmax(0, 1fr); }
  .whatif__a { padding-left: 20px; }
}

/* Field proof */
.proof__name { font-size: clamp(44px, 9vw, 128px); font-weight: 700; line-height: 1; letter-spacing: -.045em; margin: 18px 0 0; }
.proof__where { margin: 10px 0 36px; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-2); }
.proof .display-l { margin-top: 0; }
.proof .section-lead { margin-top: 28px; }
.proof__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 3vw, 40px); margin: 48px auto 0; max-width: 760px; }
.proof__num { font-size: clamp(48px, 7vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -.04em; margin: 0; }
.proof__label { margin: 12px auto 0; max-width: 24ch; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.35; color: var(--on-night-2); }
.proof__bars { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 18px; max-width: 760px; margin: 52px auto 0; text-align: left; }
.proof__bar-label { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-night-2); }
.proof__track { height: 44px; }
.proof__bar { display: flex; align-items: center; height: 100%; padding: 0 16px; border-radius: 12px; font-weight: 600; box-sizing: border-box; }
.proof__bar--before { width: 100%; background: rgba(255,255,255,.14); color: var(--on-night); }
.proof__bar--after { width: 12.5%; min-width: 64px; background: linear-gradient(90deg, #2f8cff, #7f8cf5); color: #fff; }
.proof__note { margin: 20px 0 0; font-size: 13px; color: var(--on-night-2); }
@media (max-width: 734px) { .proof__stats { grid-template-columns: 1fr; margin-top: 36px; } .proof__label { max-width: 30ch; } }
.proof { position: relative; overflow: hidden; background-image: radial-gradient(60% 50% at 50% 0%, rgba(47,140,255,.22), transparent 70%), radial-gradient(50% 40% at 85% 100%, rgba(127,140,245,.16), transparent 70%); }
.proof .wrap { position: relative; }
.proof__stat { padding: clamp(24px, 3vw, 40px) 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.proof__track { background: rgba(255,255,255,.05); border-radius: 12px; }
.proof__where::before, .proof__where::after { content: ""; display: inline-block; width: 36px; height: 1px; margin: 0 14px; vertical-align: middle; background: rgba(255,255,255,.28); }
@media (max-width: 734px) { .proof__where::before, .proof__where::after { display: none; } }
.proof .wrap { padding-top: clamp(8px, 2vw, 24px); }
.proof__name { margin-top: 0; }

/* ---------- Pricing: ladder, task cost, comparison and calculator ---------- */

/* Three plans side by side: the notes share a height so the two outer buttons line up */
.plans .plan__note { min-height: 4.4em; }
@media (max-width: 1068px) { .plans .plan__note { min-height: 0; } }

/* The founding price, right under the Team price */
.plan__founding {
  margin-top: 16px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45;
  background: linear-gradient(160deg, rgba(0, 113, 227, .08), rgba(94, 92, 230, .08));
  box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .22);
}
.plan__founding svg { width: 18px; height: 18px; color: var(--blue); margin-top: 1px; }
.plan__founding strong { font-weight: 600; color: var(--ink); }

/* Three tiles in a row, one column below the desktop breakpoint */
@media (max-width: 1068px) {
  .bento--three { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .bento--three .tile { grid-column: auto; }
}

/* What one task costs: bars scaled to the cost of a person */
.taskcost { margin-top: clamp(56px, 7vw, 96px); padding: clamp(26px, 4vw, 48px); border-radius: var(--radius); background: var(--paper); }
.taskcost__title, .numbers-table__title { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.026em; }
.taskcost__rows { margin-top: 28px; display: grid; gap: 18px; }
.taskcost__row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 72px; gap: 18px; align-items: center; }
.taskcost__label { font-size: 15px; color: var(--ink-2); }
.taskcost__track { display: block; height: 14px; border-radius: 7px; background: var(--mist); overflow: hidden; }
.taskcost__bar { display: block; height: 100%; border-radius: 7px; background: var(--accent-grad); transform-origin: left center; }
.taskcost__bar--person { width: 100%; background: #8e8e93; }
.taskcost__bar--team { width: 42.7%; }
.taskcost__bar--business { width: 31.4%; }
.taskcost__bar--founding { width: 25.5%; }
.taskcost__value { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-align: right; }
.taskcost__note { margin-top: 26px; max-width: 760px; font-size: 14px; color: var(--ink-2); }
.js .taskcost .taskcost__bar { transform: scaleX(0); transition: transform 1.1s var(--ease) .25s; }
.js .taskcost.is-in .taskcost__bar { transform: none; }
@media (max-width: 734px) {
  .taskcost__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .taskcost__track { grid-column: 1 / -1; grid-row: 2; }
}

/* The numbers behind each plan, and the comparison with other ways of getting the work done */
.numbers-table { margin-top: clamp(32px, 4vw, 48px); padding: clamp(26px, 4vw, 48px); border-radius: var(--radius); background: var(--paper); }
.numbers-table .compare-wrap { margin: 22px 0 0; padding-inline: 0; }
.numbers-table .compare thead th, .compare--paper thead th { background: var(--paper); }
.numbers-table__note, .compare-note { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.numbers-table__note { max-width: 760px; }
.compare-note { max-width: 820px; margin-inline: auto; font-size: 15px; text-align: center; }
@media (min-width: 735px) { .compare--lv { min-width: 900px; } }
.compare--lv td, .compare--lv tbody th { vertical-align: top; }
.compare .compare__lv { background: rgba(0, 113, 227, .06); font-weight: 600; }
.compare thead th.compare__lv { background: #eaf3fd; color: var(--link); border-radius: 14px 14px 0 0; }
.compare .group th { background: transparent; }

/* The calculator, on a night ground like the security demonstrations */
.calc { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; }
.calc__controls, .calc__result { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radius); background: var(--night-3); }
.calc__controls { display: grid; gap: 30px; align-content: center; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--on-night); }
.calc__out { flex: none; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--link-night); }
.calc__range {
  --p: 0%;
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer;
}
.calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2997ff 0, #7d7aff var(--p), rgba(255, 255, 255, .18) var(--p)); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.calc__range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.calc__range::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2997ff, #7d7aff); }
.calc__range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.calc__range:focus-visible { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus), 0 2px 12px rgba(0, 0, 0, .45); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--focus); }
.calc__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--night-line); }
.calc__line:first-child { padding-top: 0; }
.calc__k { font-size: 15px; color: var(--on-night-2); }
.calc__v { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-align: right; }
.calc__line--lv .calc__v { color: #a5a3ff; }
.calc__founding {
  margin-top: 16px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; color: var(--on-night-2);
  background: rgba(41, 151, 255, .12); box-shadow: inset 0 0 0 1px rgba(41, 151, 255, .30);
}
.calc__founding svg { width: 18px; height: 18px; color: var(--link-night); margin-top: 1px; }
.calc__founding strong { color: var(--on-night); }
.calc__verdict { margin-top: 24px; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.026em; line-height: 1.2; }
.calc__verdict strong { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.calc__verdict[hidden], .calc__founding[hidden] { display: none; }
.calc__foot { margin-top: 28px; font-size: 14px; }
html:not(.js) .calc__controls { display: none; }
html:not(.js) .calc { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
@media (max-width: 1068px) { .calc { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }

/* Pricing comparison on phones: one card per option instead of a squeezed table. */
.lvcards { display: none; }
@media (max-width: 734px) {
  .compare-wrap--desk { display: none; }
  .lvcards { display: grid; gap: 14px; }
  .lvcard { background: var(--mist); border-radius: 22px; padding: 22px 20px 12px; border: 1px solid transparent; }
  .lvcard--feat { background: #fff; border-color: var(--blue); box-shadow: 0 10px 30px rgba(0, 113, 227, .12); }
  .lvcard h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); }
  .lvcard--feat h3 { color: var(--blue); }
  .lvcard__price { margin-top: 6px; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
  .lvcard__sub { margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
  .lvcard ul { list-style: none; margin: 16px 0 0; padding: 0; }
  .lvcard li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 14.5px; line-height: 1.3; }
  .lvcard li span { flex: 1; }
  .lvcard li b { flex: none; max-width: 42%; font-weight: 500; text-align: right; color: var(--ink-2); }
  .lvcard li svg { width: 20px; height: 20px; color: var(--blue); display: block; }
}

/* A mobile call to action: shown once the page's first one has scrolled away (site.js) */
.stickycta { display: none; }
@media (max-width: 734px) {
  .stickycta:not([hidden]) {
    display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    padding: 15px 20px; border-radius: 999px; text-align: center; font-size: 17px; font-weight: 600;
    color: #fff; background: var(--blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  }
}

/* Booking: the setup call page (contact) */
.callmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.callmeta li { display: inline-flex; align-items: center; gap: 8px; }
.callmeta svg { width: 19px; height: 19px; color: var(--blue); }
.book [hidden] { display: none !important; }
.book__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.book__step + .book__step { margin-top: 32px; }
.book__legend { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; margin-bottom: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.book__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--ink); }
.book__aside { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.daygrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.timegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: grid; gap: 3px; justify-items: center; align-content: center; min-height: 58px; padding: 10px 4px;
  border-radius: 14px; text-align: center; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.chip small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.chip strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.chip--time span { justify-items: start; text-align: left; padding: 12px 16px; }
.chip--time small { order: 2; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.chip:hover span { box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .5); }
.chip input:checked + span { background: var(--accent-grad); box-shadow: 0 10px 24px rgba(0, 113, 227, .28); transform: translateY(-1px); }
.chip input:checked + span strong, .chip input:checked + span small { color: #fff; }
.chip input:focus-visible + span { outline: 3px solid rgba(0, 113, 227, .4); outline-offset: 2px; }
.book__details .field-row, .book__details > .field { margin-top: 0; }
.book__summary { margin: 8px 0 18px; padding: 14px 18px; border-radius: 14px; font-size: 15px; line-height: 1.4; color: var(--ink-2); background: var(--mist); transition: background .2s, color .2s; }
.book__summary.is-picked { color: var(--ink); font-weight: 600; background: rgba(0, 113, 227, .08); }
.book__form .btn { width: 100%; min-height: 54px; font-size: 17px; }
.book__form .btn[disabled] { opacity: .6; cursor: progress; }
.book__error { margin-top: 12px; font-size: 14px; font-weight: 600; color: #c4302b; }
.book__notice { margin-top: 12px; padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: #8a4b00; background: rgba(255, 159, 10, .14); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.book__done { padding: clamp(12px, 3vw, 28px) 4px; text-align: center; outline: none; }
.book__check { width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent-grad); box-shadow: 0 14px 30px rgba(0, 113, 227, .3); }
.book__check svg { width: 32px; height: 32px; }
.book__done h2 { font-size: clamp(28px, 4vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.book__done p { max-width: 470px; margin: 14px auto 0; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.book__done .cta-row { margin-top: 26px; justify-content: center; }
.callsteps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; }
.callsteps li { display: flex; gap: 14px; align-items: flex-start; }
.callsteps__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--blue); background: rgba(0, 113, 227, .1); }
.callsteps strong { display: block; font-size: 16px; }
.callsteps p { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 560px) {
  .daygrid { gap: 6px; }
  .chip span { min-height: 54px; padding: 8px 2px; border-radius: 12px; }
  .chip strong { font-size: 15px; }
  .chip small { font-size: 11px; }
  .chip--time span { padding: 10px 12px; }
  .chip--time small { font-size: 13px; }
  .callmeta { gap: 8px 18px; font-size: 14px; }
  .book__legend { flex-wrap: wrap; row-gap: 2px; }
  .book__aside { flex-basis: 100%; margin: 0 0 0 36px; }
}

/* ---------- Home hero, on a computer: the web platform on a MacBook, the iPhone app at work in front ----------
   From 1068 px wide the two side phones give way to the desk, so the first screen shows the platform and
   the app together. The phone stands a little in front of the laptop, so the laptop sits higher than the
   phone's foot. Below 1068 px the hero keeps its phones. */
.hero__desk { display: none; }
@media (min-width: 1068px) {
  .hero__stage { align-items: flex-end; margin-top: clamp(40px, 3.8vw, 56px); }
  .hero__stage .hero__side { display: none; }
  .hero__desk { display: block; flex: none; position: relative; z-index: 1; width: 800px; margin: 0 -100px 56px 0; }
  .hero__stage .demo { --wn: 250; }
}
@media (min-width: 1240px) {
  .hero__desk { width: 880px; margin-right: -120px; margin-bottom: 64px; }
  .hero__stage .demo { --wn: 280; }
}

/* ---------- Home: the platform tour ----------
   Six places of the web platform in one MacBook. A tab shows its screen and one line on what it is for.
   While in view, the tour moves on by itself every six seconds; a press on a tab, or the pause button,
   stops that, and nothing moves for visitors who prefer reduced motion. Without script: the first screen
   and every line, as a list. */
.tour__bar { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; margin: 0 auto clamp(24px, 3vw, 40px); }
.tour__tabs {
  display: flex; gap: 2px; min-width: 0; max-width: 100%; padding: 4px;
  border-radius: 999px; background: rgba(29, 29, 31, .06);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.tour__tabs::-webkit-scrollbar { display: none; }
.tour__tab {
  position: relative; flex: none; min-height: 40px; padding: 0 18px;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2);
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.tour__tab:hover { color: var(--ink); }
.tour__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tour__tab[aria-selected="true"] {
  background: var(--paper); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 15, 30, .12), 0 0 0 .5px rgba(15, 15, 30, .06);
}
.tour__tab::after {
  /* how long until the next place, while the tour moves on by itself */
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 1px;
  background: var(--blue); opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
}
.tour.is-playing .tour__tab[aria-selected="true"]::after { opacity: .85; animation: tour-progress 6s linear forwards; }
@keyframes tour-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tour__toggle {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(29, 29, 31, .06); color: var(--ink); cursor: pointer;
  transition: background-color .2s var(--ease);
}
.tour__toggle:hover { background: rgba(29, 29, 31, .12); }
.tour__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tour__toggle svg { width: 16px; height: 16px; }
.tour__i-play, .tour__toggle.is-paused .tour__i-pause { display: none; }
.tour__toggle.is-paused .tour__i-play { display: block; margin-left: 2px; }
.tour__toggle[hidden] { display: none; }

.tour__panel .mbrowser { position: relative; }
.js .tour__shot { transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.js .tour__shot:not(.is-active) { position: absolute; left: 0; bottom: 0; opacity: 0; visibility: hidden; }
.js .tour__shot.is-active { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
html:not(.js) .tour__shot:not(.is-active) { display: none; }

.tour__captions {
  display: grid; max-width: 700px; margin: clamp(24px, 3vw, 36px) auto 0;
  font-size: 19px; line-height: 1.45; color: var(--ink-2); text-align: center;
}
.tour__captions b { color: var(--ink); font-weight: 600; }
.js .tour__captions > p { grid-area: 1 / 1; opacity: 0; transition: opacity .18s ease-in; }
.js .tour__captions > p.is-on { opacity: 1; transition: opacity .38s var(--ease) .12s; }
html:not(.js) .tour__captions { gap: 12px; text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .tour.is-playing .tour__tab[aria-selected="true"]::after { animation: none; opacity: 0; }
  .js .tour__shot, .js .tour__shot.is-active, .js .tour__captions > p, .js .tour__captions > p.is-on { transition: none; }
}
@media (max-width: 734px) {
  .tour__bar { justify-content: flex-start; gap: 8px; }
  .tour__tab { min-height: 36px; padding: 0 14px; font-size: 14px; }
  .tour__tab::after { left: 12px; right: 12px; bottom: 4px; }
  .tour__toggle { width: 36px; height: 36px; }
  .tour__captions { font-size: 17px; }
}

/* ---------- Conversion: the first screen, proof and the booking form ----------
   Home hero: a result from the field above the title (it leads to the full figures and their source), and
   three facts under the buttons. On a laptop screen of 768 to 900 px in height the first screen keeps
   room for the platform: less space above, a slightly smaller title, a wider lead. */
.hero__proof {
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  margin: 0 auto 22px; padding: 5px 14px 5px 5px; border-radius: 999px;
  font-size: 14px; line-height: 1.25; color: var(--ink); text-align: left;
  background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px var(--hair), 0 6px 18px rgba(15, 15, 30, .06);
  transition: box-shadow .2s var(--ease);
}
.hero__proof:hover { text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0, 102, 204, .45), 0 6px 18px rgba(15, 15, 30, .08); }
.hero__proof b { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent-grad); }
.hero__proof span::after { content: "\203A"; margin-left: 6px; font-size: 1.2em; line-height: 1; color: var(--link); }
.hero__assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 22px auto 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.hero__assure li { display: inline-flex; align-items: center; gap: 7px; }
.hero__assure svg { flex: none; width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 734px) {
  .hero__proof { margin-bottom: 18px; font-size: 13px; }
  .hero__proof b { font-size: 12px; padding: 3px 9px; }
  .hero__assure { flex-direction: column; align-items: flex-start; gap: 6px; width: fit-content; max-width: 100%; text-align: left; }
  .hero__assure li { align-items: flex-start; }
  .hero__assure svg { margin-top: 1px; }
  .hero__assure svg { width: 16px; height: 16px; }
}
@media (min-width: 1068px) and (max-height: 940px) {
  .hero { padding-top: clamp(28px, 11vh - 50px, 120px); }
  .hero__title { font-size: clamp(56px, min(7.2vw, 10.5vh), 96px); }
  .hero__copy .lead { max-width: 880px; margin-top: 18px; }
  .hero__cta { margin-top: 26px; }
  .hero__assure { margin-top: 18px; }
  .hero__stage { margin-top: 36px; }
}

/* Booking form: optional fields say so, one wide button, and a copy of the request when no email app opens */
.field__opt { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.book__submit { width: 100%; }
.book__copy { max-width: 520px; margin: 28px auto 0; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; }
.book__copy > p:first-child { margin: 0 0 12px; max-width: none; font-size: 15px; }
.book__copy > p:first-child a { text-decoration: underline; text-underline-offset: 2px; }
.book__copytext {
  display: block; width: 100%; min-height: 150px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  font: 14px/1.45 var(--mono); color: var(--ink); background: var(--mist); resize: vertical;
}
.book__copytext:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
.book__copy .btn { margin-top: 12px; }
.book__done .book__copied { margin: 8px 0 0; min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--ink); }

/* Contact: the result from the field, beside the form */
.aside-card--proof { color: var(--on-night); background: var(--night-3); }
.aside-card--proof h3 { color: var(--on-night); }
.aside-card--proof p { color: var(--on-night-2); }
.aside-card--proof .more { color: var(--link-night); }
.aside-card__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.aside-card--proof .aside-card__kicker { color: var(--on-night-2); }

/* ---------- Platform page: the keynote film ----------
   One request on the iPhone app and the web platform at once (site/partials/keynote.html, played by
   assets/js/keynote.js). The film is drawn on a stage of fixed size, 1920 x 1080 on wide screens and
   1080 x 1920 on phones ("tall"), scaled to fit as one piece, so the same drawing makes the website's
   film and the recorded videos. Every moving part is set by the script from one clock: nothing on the
   stage uses a CSS transition or animation, so a paused or recorded frame is always exact. */
.kn-section { padding-bottom: clamp(56px, 7vw, 104px); overflow: hidden; }
.kn-section .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.kn { position: relative; width: min(100% - 2 * var(--gutter), 1280px); margin: 0 auto; }
.kn__screen {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 28px;
  background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 120px rgba(0, 0, 0, .6);
  isolation: isolate; contain: layout paint;
}
.kn__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.kn__stage { display: none; }
.js .kn__poster { display: none; }
.js .kn__stage {
  display: block; position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform: scale(var(--kn-s, .5)); transform-origin: 0 0;
  color: #f5f5f7; font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  -webkit-user-select: none; user-select: none;
}
.kn[data-layout="tall"] .kn__stage { width: 1080px; height: 1920px; }
@media (max-width: 734px) {
  .kn { width: 100%; }
  /* the tall stage is never taller than the screen, so the whole frame shows at once */
  .kn[data-layout="tall"] .kn__screen { aspect-ratio: 9 / 16; width: min(100%, calc((100lvh - 96px) * 9 / 16)); margin-inline: auto; border-radius: 0; box-shadow: none; }
}
.kn .app, .kn .app *, .kn .dk, .kn .dk * { transition: none !important; animation: none !important; }
/* until the script draws the first frame, nothing on the stage shows, so nothing flashes */
.js .kn__stage :is(.kn-d, .kn-b, .kn-num, .kn-eb, .kn-cap, .kn-row, .kn-place, .kn-rule), .js .kn-end > *, .js .kn-mac, .js .kn-phone { visibility: hidden; }
.kn-glow, .kn-scrim { opacity: 0; }
.kn-glow, .kn-mac, .kn-phone, .kn-blk, .kn-cap, .kn-end, .kn-scrim { position: absolute; }
.kn-glow {
  left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  background: radial-gradient(42% 46% at 50% 56%, rgba(41, 151, 255, .16), rgba(94, 92, 230, .07) 46%, rgba(94, 92, 230, 0) 76%);
}
.kn-scrim { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #000 0%, #000 32%, rgba(0, 0, 0, .9) 37%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, 0) 46%); }
.kn[data-layout="tall"] .kn-scrim { background: linear-gradient(180deg, #000 0%, #000 33%, rgba(0, 0, 0, .86) 37%, rgba(0, 0, 0, 0) 44%); }

/* type: the site's display face, tighter, white on black, one gradient line */
.kn-d { font-family: var(--font-display); font-weight: 700; font-size: 88px; line-height: 1.06; letter-spacing: -.042em; white-space: nowrap; }
.kn-d--xl { font-size: 136px; line-height: 1.05; }
.kn-d--l { font-size: 116px; }
.kn-g { background: linear-gradient(92deg, #2997ff 0%, #8e8cf5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.kn-num, .kn-eb { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: .01em; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.kn-b { font-size: 33px; line-height: 1.38; letter-spacing: -.016em; color: #a1a1a6; max-width: 620px; text-wrap: pretty; }
.kn-b--wide { max-width: none; }
.kn-bodies { display: grid; margin-top: 28px; }
.kn-bodies > .kn-b { grid-area: 1 / 1; }
.kn-b--sync { color: #f5f5f7; display: flex; gap: 16px; align-items: flex-start; }
.kn-sync { flex: none; width: 34px; height: 34px; margin-top: 7px; fill: none; stroke: #2997ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.kn-blk { left: 0; top: 0; pointer-events: none; }
.kn-cap { pointer-events: none; }
.kn-blk--mid { width: 1920px; height: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.kn-blk--side { left: 130px; top: 0; width: 660px; height: 1080px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.kn-blk--side .kn-d, .kn-blk--top .kn-d { font-size: 84px; white-space: normal; text-wrap: balance; max-width: 660px; }
.kn-blk--side .kn-b { margin-top: 28px; }
.kn-blk--side .kn-bodies .kn-b { margin-top: 0; }
.kn-blk--top { left: 130px; top: 0; width: 660px; height: 1080px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.kn-blk--rules { width: 1920px; height: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 20px; }
.kn-blk--rules .kn-b { margin-top: 26px; }
.kn-cap { left: 0; top: 948px; width: 1920px; text-align: center; font-size: 32px; letter-spacing: -.014em; color: #a1a1a6; }

.kn-rows { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.kn-row { display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: 500; letter-spacing: -.012em; color: #f5f5f7; white-space: nowrap; }
.kn-row time { margin-left: 4px; color: #a1a1a6; font-weight: 400; font-variant-numeric: tabular-nums; }
.kn-ok { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #30d158; }
.kn-ok svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.kn-places { display: grid; width: 620px; margin-top: 44px; }
.kn-place { grid-area: 1 / 1; font-size: 30px; line-height: 1.4; letter-spacing: -.014em; color: #a1a1a6; }
.kn-place b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: #f5f5f7; }

.kn-rules { display: flex; gap: 64px; margin-top: 72px; text-align: left; }
.kn-rule { width: 470px; }
.kn-rule__i { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 26px; border-radius: 22px; background: #1c1c1e; color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.kn-rule__i svg { width: 38px; height: 38px; }
.kn-rule b { display: block; font-family: var(--font-display); font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -.028em; color: #f5f5f7; text-wrap: balance; }
.kn-rule > span:last-child { display: block; margin-top: 12px; font-size: 25px; line-height: 1.42; letter-spacing: -.01em; color: #a1a1a6; }

.kn-end { left: 0; top: 0; width: 1920px; height: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.kn-end__mark { display: block; width: 168px; height: 113px; margin-bottom: 38px; color: #fff; }
.kn-end__mark svg { display: block; width: 100%; height: 100%; }
.kn-end__name { font-family: var(--font-display); font-weight: 600; font-size: 84px; letter-spacing: -.035em; line-height: 1.1; }
.kn-end__tag { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: 36px; letter-spacing: -.015em; }
.kn-end__on { margin-top: 46px; font-size: 30px; color: #a1a1a6; letter-spacing: -.01em; }
.kn-end__url { margin-top: 10px; font-size: 32px; font-weight: 600; letter-spacing: -.01em; }
/* On the website the end card's last line is a real call to action, laid over the drawing where the
   videos show the address (its top is set by the script, under "On iPhone, Mac and PC.") */
.kn-endcta { display: none; }
.js .kn-endcta {
  position: absolute; left: 0; right: 0; top: 74%; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 0 16px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s;
}
.js .kn-endcta.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .kn-endcta { transition: none; transform: none; } }

/* tall stage (phones): the words above, the devices below */
.kn[data-layout="tall"] .kn-blk--mid, .kn[data-layout="tall"] .kn-blk--rules, .kn[data-layout="tall"] .kn-end { width: 1080px; height: 1920px; }
.kn[data-layout="tall"] .kn-d { font-size: 92px; }
.kn[data-layout="tall"] .kn-d--xl { font-size: 104px; }
.kn[data-layout="tall"] .kn-d--l { font-size: 104px; }
.kn[data-layout="tall"] .kn-blk--side .kn-d, .kn[data-layout="tall"] .kn-blk--top .kn-d { font-size: 92px; max-width: 920px; }
.kn[data-layout="tall"] .kn-blk--side, .kn[data-layout="tall"] .kn-blk--top {
  left: 80px; top: 150px; width: 920px; height: 640px; padding-bottom: 0;
  justify-content: flex-start; align-items: center; text-align: center;
}
.kn[data-layout="tall"] .kn-b { font-size: 42px; max-width: 900px; }
.kn[data-layout="tall"] .kn-b--sync { justify-content: center; }
.kn[data-layout="tall"] .kn-sync { width: 42px; height: 42px; margin-top: 9px; }
.kn[data-layout="tall"] .kn-num, .kn[data-layout="tall"] .kn-eb { font-size: 36px; }
.kn[data-layout="tall"] .kn-rows { margin-top: 34px; gap: 18px; align-items: flex-start; }
.kn[data-layout="tall"] .kn-row { font-size: 34px; }
.kn[data-layout="tall"] .kn-ok { width: 40px; height: 40px; }
.kn[data-layout="tall"] .kn-ok svg { width: 25px; height: 25px; }
.kn[data-layout="tall"] .kn-cap { top: 1370px; width: 1080px; padding: 0 90px; font-size: 40px; line-height: 1.35; }
.kn[data-layout="tall"] .kn-places { width: 920px; margin-top: 30px; text-align: center; }
.kn[data-layout="tall"] .kn-place { font-size: 40px; }
.kn[data-layout="tall"] .kn-place b { font-size: 52px; }
.kn[data-layout="tall"] .kn-rules { flex-direction: column; gap: 52px; margin-top: 76px; }
.kn[data-layout="tall"] .kn-rule { width: 860px; display: grid; grid-template-columns: 96px 1fr; column-gap: 34px; }
.kn[data-layout="tall"] .kn-rule__i { grid-row: 1 / 3; width: 96px; height: 96px; margin: 0; border-radius: 26px; }
.kn[data-layout="tall"] .kn-rule__i svg { width: 46px; height: 46px; }
.kn[data-layout="tall"] .kn-rule b { font-size: 44px; }
.kn[data-layout="tall"] .kn-rule > span:last-child { font-size: 33px; }
.kn[data-layout="tall"] .kn-blk--rules .kn-b { font-size: 40px; padding: 0 70px; }
.kn[data-layout="tall"] .kn-end__name { font-size: 96px; }
.kn[data-layout="tall"] .kn-end__tag { font-size: 44px; }
.kn[data-layout="tall"] .kn-end__on { font-size: 38px; }
.kn[data-layout="tall"] .kn-end__url { font-size: 40px; }

/* a wide stage drawn small (tablets): the smaller words grow, the titles stay */
.kn.is-compact .kn-b { font-size: 42px; }
.kn.is-compact .kn-num, .kn.is-compact .kn-eb { font-size: 36px; }
.kn.is-compact .kn-row { font-size: 34px; }
.kn.is-compact .kn-ok { width: 40px; height: 40px; }
.kn.is-compact .kn-place { font-size: 38px; }
.kn.is-compact .kn-place b { font-size: 48px; }
.kn.is-compact .kn-cap { font-size: 40px; }
.kn.is-compact .kn-rule { width: 500px; }
.kn.is-compact .kn-rule b { font-size: 42px; }
.kn.is-compact .kn-rule > span:last-child { font-size: 31px; }

/* devices: the site's MacBook and iPhone, at a fixed size on the stage */
.kn-mac { left: 0; top: 0; width: 1000px; transform-origin: 0 0; }
.kn-mac .macbook { --w: 1000px; width: 1000px; }
.kn-mac .macbook__base { --overhang: 5.5cqw; }
/* on a black stage a dark shadow shows nothing and costs a lot to draw: only the rim light stays */
.kn-mac .macbook__lid { box-shadow: inset 0 0 0 .12cqw #5a5a5f, inset 0 0 0 .3cqw #141416; }
.kn-mac .macbook__base { box-shadow: none; }
.kn-phone { left: 0; top: 0; width: 300px; transform-origin: 0 0; }
.kn-device { --w: 300px; --k: .69851; }
.kn-device.device { box-shadow: -14px 18px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05); }

/* the web platform's Requests screen, drawn at its own size (1512 x 906 points) and scaled into the browser */
.kn-desk { position: relative; aspect-ratio: 1512 / 906; overflow: hidden; background: #f5f5f7; }
.dk {
  position: absolute; left: 0; top: 0; width: 1512px; height: 906px; overflow: hidden;
  transform: scale(.643519); transform-origin: 0 0;
  color: #1d1d1f; font-family: var(--font); font-size: 15px; line-height: 1.47; letter-spacing: -.008em; text-align: left;
}
.dk-bg { position: absolute; left: 0; top: 0; width: 1512px; height: 906px; max-width: none; }
.dk-i { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dk-count { position: absolute; left: 219px; top: 196px; font-size: 13px; line-height: 19px; color: #6e6e73; font-variant-numeric: tabular-nums; }
.dk-col { position: absolute; left: 256px; top: 0; width: 379px; height: 906px; }
.dk-seg { position: absolute; left: 20px; top: 126px; display: flex; gap: 2px; width: 339px; padding: 2px; border-radius: 9px; background: #ededf0; }
.dk-seg > span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; line-height: 1.47; white-space: nowrap; }
.dk-seg > .is-on { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04); }
.dk-seg b { font-weight: 500; color: #424245; font-variant-numeric: tabular-nums; }
.dk-list { position: absolute; left: 8px; top: 170px; width: 363px; }
.dk-slot { height: 0; overflow: hidden; }
.dk-slot + .dk-item { margin-top: 2px; }
.dk-item { position: relative; border-radius: 12px; padding: 12px; }
.dk-item + .dk-item { margin-top: 2px; }
.dk-item--new { background: rgba(0, 102, 204, .12); }
.dk-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dk-item__title { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.375; color: #1d1d1f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-badge { flex: none; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #0071e3; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.47; }
.dk-item__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.47; color: #6e6e73; }
.dk-item--new .dk-item__meta { color: #424245; }
.dk-item__meta > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-when { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; display: grid; }
.dk-when > span { grid-area: 1 / 1; text-align: right; }
.dk-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0066cc; }
.dk-dot--muted { background: rgba(110, 110, 115, .6); }
.dk-st > span, .dk-chip > span { display: none; }
.dk-main { position: absolute; left: 636px; top: 0; width: 876px; height: 906px; overflow: hidden; }
.dk-empty { position: absolute; left: 0; top: 0; width: 876px; height: 906px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; }
.dk-empty .dk-i { width: 32px; height: 32px; margin-bottom: 12px; stroke-width: 1.6; color: rgba(110, 110, 115, .7); }
.dk-empty b { font-size: 15px; font-weight: 600; }
.dk-empty span { margin-top: 4px; max-width: 384px; font-size: 13px; line-height: 1.625; color: #6e6e73; }
.dk-req { position: absolute; left: 8px; top: 0; width: 860px; padding: 32px 32px 96px; }
.dk-more { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #424245; }
.dk-more .dk-i { width: 20px; height: 20px; }
.dk-chip { display: inline-block; margin-top: 16px; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 500; line-height: 1.47; white-space: nowrap; }
.dk-title { margin-top: 12px; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.dk-sub { margin-top: 8px; font-size: 13px; color: #6e6e73; }
.dk-flow { margin-top: 24px; }
.dk-notice {
  overflow: hidden; height: 0; opacity: 0; padding: 0 16px; border-radius: 12px;
  background: rgba(32, 125, 50, .1); color: #1a6b2a; font-size: 14px; line-height: 45px; white-space: nowrap;
}
.dk-group + .dk-group { margin-top: 28px; }
.dk-q { overflow: hidden; height: 0; opacity: 0; }
.dk-q + .dk-group { margin-top: 0; }
.dk.is-asking .dk-opt { cursor: pointer; }
.dk.is-asking .dk-opt:hover { background: #ededf0; }
.dk-gt { padding: 0 16px 6px; font-size: 13px; font-weight: 500; color: #6e6e73; }
.dk-gf { padding: 6px 16px 0; font-size: 13px; line-height: 1.4; color: #6e6e73; }
.dk-card { border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 22px rgba(0, 0, 0, .045); overflow: hidden; }
.dk-qbody { padding: 16px; }
.dk-qlabel { font-size: 15px; font-weight: 500; }
.dk-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dk-opt { border: 1px solid #d2d2d7; border-radius: 999px; padding: 6px 14px; background: #fff; font-size: 14px; line-height: 1.47; color: #1d1d1f; cursor: default; }
.dk-opt.is-on { border-color: #0071e3; background: #0071e3; color: #fff; }
.dk-opt.is-hover { background: #ededf0; }
.dk-field { margin-top: 12px; min-height: 40px; border: 1px solid #d2d2d7; border-radius: 10px; padding: 9px 12px; font-size: 15px; line-height: 1.47; color: #6e6e73; background: #fff; }
.dk-qfoot { position: relative; padding: 12px 16px; }
.dk-qfoot::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: 1px solid #e5e5ea; }
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 10px; background: #0071e3; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.47; }
.dk-btn .dk-i { width: 16px; height: 16px; }
.dk-btn .dk-i--spin { display: none; }
.dk-btn.is-busy .dk-i--send { display: none; }
.dk-btn.is-busy .dk-i--spin { display: block; }
.dk-btn.is-press { background: #0062c4; transform: scale(.98); }
.dk-sum { padding: 16px; }
.dk-sum > p { display: none; font-size: 15px; line-height: 1.625; }
.dk-sum > p > span:not([data-v]) { display: block; margin-top: 8px; font-size: 14px; line-height: 1.47; color: #424245; }
.dk-plan { position: relative; }
.dk-plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #e5e5ea; }
.dk-step { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.dk-step + .dk-step::before { content: ""; position: absolute; top: 0; right: 0; left: 48px; border-top: 1px solid #e5e5ea; }
.dk-step__t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.47; }
.dk-si { position: relative; flex: none; width: 20px; height: 20px; margin-top: 2px; }
.dk-si > * { position: absolute; left: 0; top: 0; width: 20px; height: 20px; visibility: hidden; }
.dk-si__pending { border: 2px solid #d2d2d7; border-radius: 50%; }
.dk-si__clock { fill: none; stroke: #0066cc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dk-si__done { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #207d32; }
.dk-si__done svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dk-step .dk-si__pending, .dk-step.is-running .dk-si__clock, .dk-step.is-waiting .dk-si__clock, .dk-step.is-done .dk-si__done { visibility: inherit; }
.dk-step.is-running .dk-si__pending, .dk-step.is-waiting .dk-si__pending, .dk-step.is-done .dk-si__pending { visibility: hidden; }
.dk-sl { flex: none; display: grid; font-size: 12px; line-height: 22px; color: #6e6e73; }
.dk-sl > span { grid-area: 1 / 1; text-align: right; visibility: hidden; }
.dk-step [data-l="pending"], .dk-step.is-running [data-l="running"], .dk-step.is-waiting [data-l="waiting"], .dk-step.is-done [data-l="done"] { visibility: inherit; }
.dk-step.is-running [data-l="pending"], .dk-step.is-waiting [data-l="pending"], .dk-step.is-done [data-l="pending"] { visibility: hidden; }
.dk-rtext { padding: 16px; font-size: 15px; line-height: 1.625; }
.dk[data-variant="b"] [data-v="a"], .dk:not([data-variant="b"]) [data-v="b"] { display: none; }
.dk-shot { position: absolute; left: 0; top: 0; width: 1512px; height: 906px; max-width: none; opacity: 0; visibility: hidden; }
.dk-cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 26px; height: 26px; opacity: 0; transform-origin: 6px 3px; pointer-events: none; }
.dk-cursor svg { display: block; width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }

/* the request's state on the desk: its status in the list and in the chip, the sidebar and segment counts */
.dk[data-state="plan"] [data-st="plan"], .dk[data-state="input"] [data-st="input"], .dk[data-state="work"] [data-st="work"],
.dk[data-state="wait"] [data-st="wait"], .dk[data-state="done"] [data-st="done"] { display: inline; }
.dk[data-state="plan"] .dk-chip, .dk[data-state="work"] .dk-chip { background: rgba(0, 102, 204, .12); color: #0058b0; }
.dk[data-state="input"] .dk-chip { background: rgba(150, 82, 0, .13); color: #965200; }
.dk[data-state="wait"] .dk-chip { background: #ededf0; color: #424245; }
.dk[data-state="done"] .dk-chip { background: rgba(32, 125, 50, .13); color: #1a6b2a; }
.dk[data-state="input"] .dk-item--new .dk-dot { background: #965200; }
.dk[data-state="wait"] .dk-item--new .dk-dot { background: rgba(110, 110, 115, .6); }
.dk[data-state="done"] .dk-item--new .dk-dot { background: #207d32; }
.dk:not([data-state="input"]) .dk-badge, .dk:not([data-state="input"]) .dk-count, .dk:not([data-state="input"]) .dk-seg b { display: none; }
.dk[data-sum="ask"] [data-sum="ask"], .dk[data-sum="plan"] [data-sum="plan"], .dk[data-sum="watch"] [data-sum="watch"], .dk[data-sum="done"] [data-sum="done"] { display: block; }
.dk-when > span { visibility: hidden; }
.dk[data-when="0"] .dk-item--new [data-when="0"], .dk[data-when="1"] .dk-item--new [data-when="1"], .dk[data-when="2"] .dk-item--new [data-when="2"], .dk[data-when="3"] .dk-item--new [data-when="3"],
.dk[data-day="sun"] [data-day="sun"], .dk[data-day="mon"] [data-day="mon"] { visibility: inherit; }

/* the chapter bar under the film */
.kn-bar { display: none; }
.js .kn-bar { display: flex; flex-direction: column; align-items: center; margin-top: clamp(20px, 2.4vw, 30px); text-align: center; }
.kn-bar__now { display: grid; min-height: 26px; margin-bottom: 14px; font-size: 17px; line-height: 26px; color: var(--on-night-2); }
.kn-bar__now > span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s var(--ease); }
.kn-bar__now > .is-on { opacity: 1; }
.kn-bar__cap { font-family: var(--font-display); font-weight: 600; color: var(--on-night); }
.kn-bar__hint { color: var(--link-night); font-weight: 500; }
.kn-bar__answer { display: none; gap: 10px; margin: -2px 0 16px; }
.kn-bar__answer.is-on { display: flex; }
.kn-bar__opt {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(41, 151, 255, .16); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: background-color .2s var(--ease);
}
.kn-bar__opt:hover { background: rgba(41, 151, 255, .28); }
.kn-bar__opt:focus-visible { outline: 2px solid var(--link-night); outline-offset: 2px; }
.kn-bar__controls {
  display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 5px 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.kn-bar__chapters { display: flex; min-width: 0; }
.kn-bar__ch {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 96px; height: 52px; padding: 0 10px;
  border: 0; border-radius: 14px; background: none; color: var(--on-night-2); cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.kn-bar__ch:hover { color: var(--on-night); background: rgba(255, 255, 255, .06); }
.kn-bar__ch[aria-current="step"] { color: var(--on-night); }
.kn-bar__ch:focus-visible { outline: 2px solid var(--link-night); outline-offset: -2px; }
.kn-bar__name { white-space: nowrap; }
.kn-bar__track { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.kn-bar__fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background: #2997ff; transform: scaleX(0); transform-origin: 0 50%; }
.kn-bar__toggle {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: 4px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.kn-bar__toggle:hover { background: rgba(255, 255, 255, .2); }
.kn-bar__toggle:focus-visible { outline: 2px solid var(--link-night); outline-offset: 2px; }
.kn-bar__toggle svg { width: 18px; height: 18px; }
.kn-bar__i-play, .kn-bar__i-replay, .kn-bar__toggle.is-paused .kn-bar__i-pause, .kn-bar__toggle.is-ended .kn-bar__i-pause { display: none; }
.kn-bar__toggle.is-paused .kn-bar__i-play { display: block; margin-left: 2px; }
.kn-bar__toggle.is-ended .kn-bar__i-play { display: none; }
.kn-bar__toggle.is-ended .kn-bar__i-replay { display: block; }
@media (max-width: 1068px) {
  .kn-bar__ch { min-width: 0; padding: 0 8px; }
}
@media (max-width: 734px) {
  .js .kn-bar { padding-inline: var(--gutter); }
  .kn-bar__now { font-size: 15px; margin-bottom: 12px; }
  .kn-bar__controls { padding-left: 8px; }
  .kn-bar__ch { width: 40px; height: 44px; padding: 0 5px; }
  .kn-bar__name { display: none; }
  .kn-bar__toggle { width: 40px; height: 40px; }
}

/* Recording (?kn=record): the stage alone, at its own size, for the videos made from it */
.kn-record, .kn-record body { overflow: hidden; background: #000; }
.kn-record body > *:not(main), .kn-record main > *:not(.kn-section), .kn-record .kn-section > *:not(.kn), .kn-record .kn-bar { display: none !important; }
.kn-record .kn-section { position: fixed; left: 0; top: 0; padding: 0; margin: 0; }
.kn-record .kn { width: auto; margin: 0; }
.kn-record .kn__screen { border-radius: 0; box-shadow: none; width: 1920px; height: 1080px; aspect-ratio: auto; }
.kn-record .kn[data-layout="tall"] .kn__screen { width: 1080px; height: 1920px; }
.kn-record .kn-endcta { display: none !important; }
.kn-record { --font-display: "Inter Display", "Inter", sans-serif; --font: "Inter", sans-serif; }

/* Under the film: the call to action and the three facts of the home hero, on the night ground */
.kn-cta { text-align: center; }
.kn-cta .cta-row { margin-top: clamp(30px, 3.4vw, 44px); }
.kn-cta .hero__assure { margin-top: 20px; color: var(--on-night-2); }
.kn-cta .hero__assure svg { color: var(--link-night); }
.kn-cta .btn { transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .6s var(--ease); }
.kn.is-ended + .kn-cta .btn { box-shadow: 0 0 0 6px rgba(41, 151, 255, .22), 0 10px 40px rgba(0, 113, 227, .45); }
@media (max-width: 734px) { .kn-cta .hero__assure { margin-inline: auto; } }

/* ---------- Security page: the post-quantum film ----------
   Four short chapters on the keynote's stage (.kn: 1920 x 1080 wide, 1080 x 1920 tall, scaled as one
   piece; site/partials/pqfilm.html, played by assets/js/pqfilm.js from one clock). The film borrows the
   keynote's type, devices, end card and chapter bar; what follows is its own: the copied files of
   chapter 1, the platform's Documents screens of chapter 2 (captures, with the highlight and the
   pointer laid over them) and the same document in the iPhone app, the three locks of chapter 3 and the
   coverage of chapter 4. Nothing on the stage uses a CSS transition or animation. */
.js .kn__stage :is(.pq-body, .pq-vault, .pq-tri, .pq-cov) { visibility: hidden; }
.pq-vault, .pq-tri, .pq-cov { position: absolute; pointer-events: none; }
.pq-body { grid-area: 1 / 1; }
.js .kn__stage .pq-body .kn-b { visibility: inherit; }
.kn-bodies > .pq-steps { grid-area: 1 / 1; margin-top: 0; }
.pq-src { margin-top: 18px; font-size: 22px; line-height: 1.35; letter-spacing: -.005em; color: #86868b; }
.pq-hallmark { display: block; width: auto; height: 100%; }
.pq-pdf { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 69, 58, .18); color: #ff6961; }
.pq-pdf svg { width: 22px; height: 22px; }
.pq-lock { display: block; width: 100%; height: 100%; overflow: visible; }
.pq-lock__shackle { transform-origin: 46px 34px; }
.pq-lock__hole { fill: #1c1c1e; }
.pq-wave { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; pointer-events: none; }

/* 1. Why now: two copies of the same quote, one sealed classically, one by Lorne & Vale */
.pq-vault { left: 860px; top: 150px; width: 960px; height: 780px; }
.pq-when { position: absolute; left: 0; top: 0; width: 960px; display: grid; text-align: center; font-size: 28px; font-weight: 500; letter-spacing: -.01em; color: #a1a1a6; }
.pq-when > span { grid-area: 1 / 1; }
.pq-qc { position: absolute; left: 280px; top: 58px; width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pq-qc__glow { position: absolute; left: 50%; top: 52px; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, rgba(142, 140, 245, .55) 0%, rgba(41, 151, 255, .18) 40%, rgba(41, 151, 255, 0) 70%); opacity: 0; }
.pq-qc__i { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 30px; background: #1c1c1e; color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pq-atom { width: 60px; height: 60px; stroke-width: 1.5; }
.pq-qc__label { position: relative; margin-top: 16px; font-size: 26px; font-weight: 600; letter-spacing: -.012em; color: #f5f5f7; }
.pq-wave:not(.pq-wave--tri) { width: 960px; height: 180px; background: linear-gradient(180deg, rgba(142, 140, 245, 0), rgba(142, 140, 245, .34) 55%, rgba(41, 151, 255, 0)); }
.pq-vc { position: absolute; top: 290px; width: 440px; height: 470px; }
.pq-vc--a { left: 0; }
.pq-vc--b { left: 520px; }
.pq-vc__ghost { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 32px; border: 2px dashed rgba(255, 255, 255, .3); opacity: 0; }
.pq-vc__card {
  position: relative; width: 100%; height: 100%; padding: 32px 34px; overflow: hidden; border-radius: 32px;
  background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pq-vc__alarm, .pq-vc__aura { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; opacity: 0; }
.pq-vc__alarm { background: rgba(255, 69, 58, .15); box-shadow: inset 0 0 0 2px rgba(255, 105, 97, .55); }
.pq-vc__aura { background: linear-gradient(160deg, rgba(41, 151, 255, .2), rgba(94, 92, 230, .14)); box-shadow: inset 0 0 0 2px rgba(142, 140, 245, .6); }
.pq-vc__lock { position: relative; width: 56px; height: 64px; color: #f5f5f7; }
.pq-vc__lock--lv { width: 56px; color: #a5a3ff; }
.pq-vc__name { position: relative; margin-top: 22px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: #f5f5f7; }
.pq-vc__algo { position: relative; margin-top: 6px; font-size: 22px; letter-spacing: -.008em; color: #a1a1a6; }
.pq-vc__file { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 21px; color: #d1d1d6; white-space: nowrap; }
.pq-vc__text { position: relative; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 21px; line-height: 1.5; color: #6e6e73; white-space: nowrap; overflow: hidden; }
.pq-vc__state { position: relative; display: grid; margin-top: 20px; font-size: 25px; font-weight: 600; letter-spacing: -.012em; color: #f5f5f7; }
.pq-vc__state > span { grid-area: 1 / 1; }
.pq-vc__state .is-bad { color: #ff6961; }
.pq-vc__state .is-good { color: #a5a3ff; }
.pq-vc__copied { position: absolute; right: 26px; top: -18px; padding: 6px 16px; border-radius: 999px; background: #ff9f0a; color: #1d1d1f; font-size: 20px; font-weight: 700; letter-spacing: .01em; opacity: 0; }

/* 2. Sealed when stored: the platform's Documents screens (1512 x 906 points, scaled into the browser) */
.pqd { position: absolute; left: 0; top: 0; width: 1512px; height: 906px; overflow: hidden; transform: scale(.643519); transform-origin: 0 0; background: #f5f5f7; }
/* (.pqd .x: the browser's own rule, .mbrowser img, would otherwise stretch each capture to its width) */
.pqd .pqd-shot { position: absolute; left: 0; top: 0; width: 1512px; height: 906px; max-width: none; aspect-ratio: auto; object-fit: fill; opacity: 0; visibility: hidden; }
.pqd .pqd-shot--left { width: 656px; }
.pqd-pane { position: absolute; left: 656px; top: 0; width: 856px; height: 906px; overflow: hidden; background: #f5f5f7; opacity: 0; visibility: hidden; }
.pqd .pqd-pane img { display: block; width: 856px; height: 1357px; max-width: none; aspect-ratio: auto; object-fit: fill; }
.pqd-new { position: absolute; left: 264px; top: 246px; width: 383px; height: 61px; border-radius: 12px; box-shadow: 0 0 0 3px rgba(0, 113, 227, .6), 0 0 30px rgba(0, 113, 227, .35); opacity: 0; }
.pqd-glint { position: absolute; left: 280px; top: 260px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 92, 191, .45), rgba(0, 92, 191, 0) 70%); opacity: 0; }
.pqd-hl { position: absolute; left: 0; top: 0; width: 100px; height: 40px; border-radius: 12px; box-shadow: 0 0 0 3px #0071e3, 0 0 0 10px rgba(0, 113, 227, .16); opacity: 0; }

/* the same document in the iPhone app, with the words of apps/ios (402 x 874 points) */
.pq-phone, .pqa { background: #f2f1f6; }
.pqa-scroll { position: absolute; left: 0; top: 0; width: 402px; padding: 108px 16px 40px; }
.pqa-bar { position: absolute; left: 0; top: 0; z-index: 3; width: 402px; height: 112px; background: linear-gradient(180deg, #f2f1f6 72%, rgba(242, 241, 246, 0)); }
.pqa-card { position: relative; margin-top: 14px; padding: 16px; border-radius: 22px; background: #fff; }
.pqa-head { min-height: 104px; padding-left: 84px; }
.pqa-tile { position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(255, 59, 48, .12); color: #d70015; }
.pqa-tile > svg { width: 30px; height: 30px; }
.pqa-tile .pq-pdf { width: auto; height: auto; background: none; color: inherit; }
.pqa-tile .pq-pdf svg { width: 30px; height: 30px; }
.pqa-tile__mark { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #005cbf; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.pqa-tile__mark .pq-hallmark { height: 15px; }
.pqa-name { font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -.4px; overflow-wrap: anywhere; }
.pqa-origin { margin-top: 4px; font-size: 15px; line-height: 20px; color: #6e6e73; }
.pqa-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pqa-pill, .pqa-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; line-height: 26px; font-weight: 600; letter-spacing: -.08px; white-space: nowrap; }
.pqa-pill { background: rgba(118, 118, 128, .12); color: #3c3c43; }
.pqa-pill svg { width: 14px; height: 14px; stroke-width: 1.8; }
.pqa-badge { background: rgba(0, 92, 191, .1); color: #005cbf; }
.pqa-badge .pq-hallmark { height: 14px; }
.pqa-badge__set { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .8; }
.pqa-new { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 14px; border-radius: 14px; background: rgba(0, 107, 216, .1); color: #006bd8; font-size: 17px; font-weight: 600; }
.pqa-new svg { width: 17px; height: 17px; stroke-width: 2.2; }
.pqa-h { margin-bottom: 6px; font-size: 17px; line-height: 22px; font-weight: 600; }
.pqa-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.pqa-row + .pqa-row { border-top: 1px solid #e5e5ea; }
.pqa-row__i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 107, 216, .1); color: #006bd8; }
.pqa-row__i svg { width: 17px; height: 17px; stroke-width: 2; }
.pqa-row__t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pqa-row__t small { font-size: 12px; line-height: 16px; color: #6e6e73; }
.pqa-row__t b { font-size: 16px; line-height: 21px; font-weight: 400; color: #000; }
.pqa-row__t em, .pqa-row__t i { margin-top: 2px; font-size: 13px; line-height: 18px; font-style: normal; }
.pqa-row__t em { color: #006bd8; }
.pqa-row__t i { color: #6e6e73; }
.pqa-row__chev { width: 8px; height: 14px; margin-top: 18px; color: #c4c4c7; stroke-width: 2; }
.pqa-seal { display: flex; gap: 12px; margin-top: 4px; }
.pqa-seal__mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(0, 92, 191, .1); color: #005cbf; }
.pqa-seal__mark .pq-hallmark { height: 21px; }
.pqa-seal__t { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pqa-seal__t b { font-size: 17px; line-height: 22px; font-weight: 600; }
.pqa-seal__x { font-size: 13px; line-height: 18px; color: #3c3c43; }
.pqa-facts { margin: 12px 0 0; border-top: 1px solid #e5e5ea; }
.pqa-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e5e5ea; }
.pqa-facts dt { flex: none; font-size: 14px; line-height: 19px; color: #6e6e73; }
.pqa-facts dd { margin: 0; font-size: 14px; line-height: 19px; color: #000; text-align: right; }
.pqa-facts .pqa-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.pqa-how { margin-top: 12px; font-size: 15px; line-height: 20px; font-weight: 600; color: #006bd8; }

/* 3. What breaks: three locks, the attack, then two locks together */
.pq-tri { left: 850px; top: 270px; width: 980px; height: 640px; }
.pq-tc { position: absolute; top: 0; width: 300px; height: 430px; padding: 34px 30px; overflow: hidden; border-radius: 30px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pq-tc--a { left: 0; }
.pq-tc--b { left: 340px; }
.pq-tc--c { left: 680px; }
.pq-tc__alarm, .pq-tc__aura { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; opacity: 0; }
.pq-tc__alarm { background: rgba(255, 69, 58, .15); box-shadow: inset 0 0 0 2px rgba(255, 105, 97, .55); }
.pq-tc__aura { background: rgba(48, 209, 88, .1); box-shadow: inset 0 0 0 2px rgba(48, 209, 88, .45); }
.pq-tc__i { position: relative; width: 56px; height: 64px; color: #f5f5f7; }
.pq-tc__i--lv { color: #a5a3ff; }
.pq-key { width: 64px; height: 64px; }
.pq-tc__name { position: relative; margin-top: 26px; font-family: var(--font-display); font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -.028em; color: #f5f5f7; }
.pq-tc__sub { position: relative; margin-top: 10px; font-size: 21px; line-height: 1.38; color: #a1a1a6; }
.pq-tc__state { position: absolute; left: 30px; right: 30px; bottom: 30px; display: grid; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #a1a1a6; }
.pq-tc__state > span { grid-area: 1 / 1; align-self: end; }
.pq-tc__state .is-bad { color: #ff6961; }
.pq-tc__state .is-good { color: #30d158; }
.pq-wave--tri { top: -40px; width: 180px; height: 510px; background: linear-gradient(90deg, rgba(142, 140, 245, 0), rgba(142, 140, 245, .4) 55%, rgba(41, 151, 255, 0)); }
.pq-tri__plus { position: absolute; left: 466px; top: 170px; width: 48px; text-align: center; font-family: var(--font-display); font-size: 80px; line-height: 1; font-weight: 600; color: #8e8cf5; opacity: 0; visibility: hidden; }
.pq-hy { position: absolute; left: 0; top: 486px; width: 980px; text-align: center; font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: #f5f5f7; visibility: hidden; }

/* 4. What it covers, and what it does not */
.pq-cov { left: 860px; top: 165px; width: 960px; height: 750px; }
.pq-cov__tabs { position: relative; display: flex; width: 540px; height: 64px; padding: 6px; border-radius: 32px; background: rgba(255, 255, 255, .09); }
.pq-cov__thumb { position: absolute; left: 6px; top: 6px; width: 264px; height: 52px; border-radius: 26px; background: #f5f5f7; }
.pq-cov__tab { position: relative; flex: 1; text-align: center; font-size: 24px; line-height: 52px; font-weight: 600; letter-spacing: -.01em; color: #a1a1a6; }
.pq-cov__list { display: grid; gap: 18px; margin-top: 38px; }
.pq-cov__slot { display: grid; }
.pq-cov__row {
  grid-area: 1 / 1; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; align-items: center; align-content: center;
  min-height: 132px; padding: 22px 28px; border-radius: 26px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.pq-cov__i { grid-row: 1 / 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(142, 140, 245, .16); color: #a5a3ff; }
.pq-cov__i .pq-hallmark { height: 32px; }
.pq-cov__i > svg:not(.pq-hallmark) { width: 34px; height: 34px; }
.pq-cov__row--no .pq-cov__i { background: rgba(255, 255, 255, .08); color: #a1a1a6; }
.pq-cov__row b { font-family: var(--font-display); font-size: 30px; line-height: 1.18; font-weight: 600; letter-spacing: -.024em; color: #f5f5f7; }
.pq-cov__row span:last-child { margin-top: 6px; font-size: 23px; line-height: 1.35; letter-spacing: -.008em; color: #a1a1a6; }
.pq-end__url { margin-top: 40px; }

/* tall stage (phones): the words above, the pictures below */
.kn[data-layout="tall"] .pq-src { font-size: 28px; }
.kn[data-layout="tall"] .pq-vault { left: 60px; top: 840px; width: 960px; height: 940px; }
.kn[data-layout="tall"] .pq-when { font-size: 34px; }
.kn[data-layout="tall"] .pq-qc { left: 280px; top: 70px; }
.kn[data-layout="tall"] .pq-qc__label { font-size: 32px; }
.kn[data-layout="tall"] .pq-vc { top: 330px; width: 460px; height: 560px; }
.kn[data-layout="tall"] .pq-vc--b { left: 500px; }
.kn[data-layout="tall"] .pq-vc__card { padding: 34px 30px; }
.kn[data-layout="tall"] .pq-vc__name { font-size: 34px; }
.kn[data-layout="tall"] .pq-vc__algo { font-size: 26px; }
.kn[data-layout="tall"] .pq-vc__file { font-size: 22px; }
.kn[data-layout="tall"] .pq-vc__file span { overflow: hidden; text-overflow: ellipsis; }
.kn[data-layout="tall"] .pq-vc__text { font-size: 22px; }
.kn[data-layout="tall"] .pq-vc__state { font-size: 30px; }
.kn[data-layout="tall"] .pq-tri { left: 60px; top: 830px; width: 960px; height: 990px; }
.kn[data-layout="tall"] .pq-tc { left: 0; width: 960px; height: 250px; padding: 34px 34px 34px 140px; }
.kn[data-layout="tall"] .pq-tc--b { top: 280px; }
.kn[data-layout="tall"] .pq-tc--c { top: 560px; }
.kn[data-layout="tall"] .pq-tc__i { position: absolute; left: 40px; top: 42px; }
.kn[data-layout="tall"] .pq-tc__name { margin-top: 0; font-size: 40px; }
.kn[data-layout="tall"] .pq-tc__sub { font-size: 28px; }
.kn[data-layout="tall"] .pq-tc__state { left: 140px; bottom: 30px; font-size: 30px; }
.kn[data-layout="tall"] .pq-wave--tri { left: 0; top: 0; width: 960px; height: 200px; background: linear-gradient(180deg, rgba(142, 140, 245, 0), rgba(142, 140, 245, .4) 55%, rgba(41, 151, 255, 0)); }
.kn[data-layout="tall"] .pq-tri__plus { left: 456px; top: 368px; }
.kn[data-layout="tall"] .pq-hy { top: 860px; width: 960px; font-size: 52px; }
.kn[data-layout="tall"] .pq-cov { left: 60px; top: 820px; width: 960px; height: 1000px; }
.kn[data-layout="tall"] .pq-cov__tabs { width: 960px; height: 84px; padding: 8px; border-radius: 42px; }
.kn[data-layout="tall"] .pq-cov__thumb { left: 8px; top: 8px; width: 472px; height: 68px; border-radius: 34px; }
.kn[data-layout="tall"] .pq-cov__tab { font-size: 32px; line-height: 68px; }
.kn[data-layout="tall"] .pq-cov__list { gap: 20px; margin-top: 44px; }
.kn[data-layout="tall"] .pq-cov__row { grid-template-columns: 80px minmax(0, 1fr); column-gap: 28px; min-height: 172px; padding: 26px 32px; }
.kn[data-layout="tall"] .pq-cov__i { width: 80px; height: 80px; border-radius: 22px; }
.kn[data-layout="tall"] .pq-cov__i .pq-hallmark { height: 40px; }
.kn[data-layout="tall"] .pq-cov__row b { font-size: 38px; }
.kn[data-layout="tall"] .pq-cov__row span:last-child { font-size: 30px; }

/* a wide stage drawn small (tablets): the smaller words grow */
.kn.is-compact .pq-src { font-size: 28px; }

/* under the film: where each outside fact comes from */
.pq-sources { max-width: 760px; margin: clamp(22px, 2.6vw, 30px) auto 0; padding: 0 var(--gutter); text-align: center; font-size: 13px; line-height: 1.6; color: var(--on-night-2); }
.pq-sources a { color: var(--on-night-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 2px; }
.pq-sources a:hover { color: var(--on-night); }

/* ---------- The first screen: the words show at once, the product rises in ----------
   Every first-screen element used to fade and rise in, and browsers count the largest paint (the
   headline) only once that movement ends: about 1.2 s after the first paint, on every page. The words
   of the first screen now paint with the page, so the headline is the largest paint at once; the
   product beside them still rises in. */
.js .hero__copy .reveal, .js .phero .reveal, .js .sec-hero .wrap .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Home: try a request ----------
   Three requests, each shown whole at first glance: the sentence, every step with its time, the emails a tap
   away, what is left for the manager, and who did what. A short cascade opens a case once the card is in view
   (site.js adds .is-shown) and on each change of case, under a second; with reduced motion nothing moves, and
   without script the first case shows in full. */
.try { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; max-width: 1080px; margin: 0 auto; }
.try__tabs { display: grid; gap: 10px; position: sticky; top: calc(var(--nav-h) + 28px); }
.try__tab {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left;
  border: 0; border-radius: 20px; background: var(--mist); color: var(--ink); cursor: pointer;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.try__tab:hover { background: #ebebf0; }
.try__tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.try__tab[aria-selected="true"] { background: var(--paper); box-shadow: inset 0 0 0 2px var(--blue), 0 14px 34px rgba(0, 60, 140, .10); }
.try__tab-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: #fff; }
.try__tab[aria-selected="true"] .try__tab-icon { background: var(--accent-grad); }
.try__tab-icon svg { width: 21px; height: 21px; }
.try__tab-text { display: grid; gap: 2px; min-width: 0; }
.try__tab-role { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.try__tab-what { font-size: 14px; color: var(--ink-2); line-height: 1.3; }

/* The stage takes the height of the case on show; site.js eases it from one case to the next. */
.try__stage { position: relative; min-width: 0; }
.try__stage.is-sizing { overflow: hidden; transition: height .4s var(--ease); }
.try__panel {
  min-width: 0; padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.8vw, 34px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius); background: var(--paper);
  box-shadow: 0 0 0 1px var(--hair), 0 30px 70px rgba(15, 15, 30, .09);
}
.try__panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.try__stage.is-sizing .try__panel { box-shadow: 0 0 0 1px var(--hair); }
.js .try__panel { transition: opacity .2s var(--ease), visibility 0s linear .2s; }
.js .try__panel:not(.is-on) { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.js .try__panel.is-on { transition: opacity .3s var(--ease); }
html:not(.js) .try { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
html:not(.js) .try__panel:not(.is-on) { display: none; }

/* The request, and how long it ran while the manager did something else */
.try__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid #ececf0; }
.try__title { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; letter-spacing: -.022em; line-height: 1.25; }
.try__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff9500; box-shadow: 0 0 0 4px rgba(255, 149, 0, .16); }
.try__panel[data-tone="done"] .try__dot, .try__panel[data-decided="a"] .try__dot { background: #28cd41; box-shadow: 0 0 0 4px rgba(40, 205, 65, .16); }
.try__span { font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.try__span > span { display: inline-flex; align-items: center; gap: 6px; }
.try__to { width: 14px; height: 14px; color: var(--ink-3); }

/* Every step, on one line of time */
.try__feed { position: relative; display: grid; gap: 16px; }
.try__feed::before { content: ""; position: absolute; left: 97px; top: 16px; bottom: 16px; width: 2px; border-radius: 1px; background: #ececf0; transform-origin: 50% 0; }
.try__item { position: relative; display: grid; grid-template-columns: 70px 28px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.try__when { padding-top: 5px; font-size: 13px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.try__mark {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  border-radius: 50%; color: #fff; background: var(--ink); box-shadow: 0 0 0 4px var(--paper);
}
.try__mark svg { width: 15px; height: 15px; }
.try__item--you .try__mark { background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px var(--paper); }
.try__item--you .try__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.try__item--lv .try__mark svg { width: 17px; height: 12px; }
.try__item--mail .try__mark { background: var(--blue); }
.try__item--fu .try__mark { background: var(--indigo); }
.try__item--reply .try__mark, .try__item--done .try__mark { background: #28cd41; }
.try__item--question .try__mark, .try__item--decide .try__mark { background: #ff9500; }
.try__card { min-width: 0; }
.try__who { margin: 4px 0 7px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--ink-2); }
.try__say {
  padding: 12px 16px 13px; border-radius: 6px 18px 18px 18px; background: rgba(0, 113, 227, .07);
  font-family: var(--font-display); font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; letter-spacing: -.018em; line-height: 1.4;
  color: var(--ink); overflow-wrap: break-word;
}
.try__name { display: block; padding-top: 4px; font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; color: var(--ink); }
.try__sub { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.try__file {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 8px; padding: 6px 11px 6px 9px;
  border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
}
.try__file svg { width: 16px; height: 16px; color: #ff3b30; flex: none; }

/* The emails, a tap away */
.try__more > summary { display: block; list-style: none; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.try__more > summary::-webkit-details-marker { display: none; }
.try__more > summary::marker { content: ""; }
.try__more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
/* "Read the email": in its own column beside the step's title, so the two never meet; under the title on a phone */
.try__more > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.try__more > summary > * { grid-column: 1; }
.try__more > summary > .try__open { grid-column: 2; grid-row: 1; }
.try__open { display: flex; align-items: center; gap: 5px; padding-top: 4px; font-size: 14px; font-weight: 500; line-height: 21px; color: var(--link); white-space: nowrap; }
.try__more .try__file { justify-self: start; }
.try__open svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.try__more[open] .try__open svg { transform: rotate(180deg); }
.try__open-hide, .try__more[open] .try__open-show { display: none; }
.try__more[open] .try__open-hide { display: inline; }
.try__more > summary:hover .try__open > span { text-decoration: underline; }
.try__more > .mail { margin-top: 10px; }

.mail { border-radius: 16px; background: var(--mist); padding: 14px 16px 15px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.mail__head { display: grid; gap: 3px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 13px; }
.mail__head div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.mail__head dt { color: var(--ink-3); }
.mail__head dd { margin: 0; font-weight: 600; overflow-wrap: break-word; }
.mail__body { display: grid; gap: 8px; }
.mail__body p { overflow-wrap: anywhere; }
.mail__quote { margin-top: 2px; padding-left: 10px; border-left: 2px solid rgba(0, 0, 0, .12); font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__quote-k { font-weight: 600; }
.mail__again { font-size: 13.5px; color: var(--ink-3); }
.mail--fu { font-size: 13.5px; }
.mail--fu .mail__body { gap: 4px; }
.mail--fu .mail__body > p:not(.mail__quote) { color: var(--ink-2); }
.mail--reply { background: #effaf1; }

/* What is left for the manager: a decision, a question, or nothing at all */
.try__box { padding: 14px 16px 16px; border-radius: 18px; background: #fff7ed; box-shadow: inset 0 0 0 1px #ffe1bd; }
.try__item--done .try__box { background: #effaf1; box-shadow: inset 0 0 0 1px #cdeed5; }
.try__box .try__who { margin: 0 0 4px; color: #9a5200; }
.try__item--done .try__box .try__who { color: #1b7232; }
.try__text { font-size: 15.5px; font-weight: 500; line-height: 1.5; letter-spacing: -.012em; color: var(--ink); }
.try__choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.try__choice {
  min-height: 42px; padding: 9px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--link); background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--link); transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.try__choice:first-child { color: #fff; background: var(--blue); box-shadow: none; }
.try__choice:hover { background: rgba(0, 102, 204, .08); }
.try__choice:first-child:hover { background: var(--blue-hover); }
.try__choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.try__panel.is-decided .try__choice[aria-pressed="false"] { color: var(--link); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--link); }
.try__panel.is-decided .try__choice[aria-pressed="true"] { color: #fff; background: var(--blue); box-shadow: none; }
.try__choice[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; margin-right: 7px; font-weight: 700; }
.try__result { margin-top: 12px; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.try__result[hidden] { display: none; }
.try__field { display: grid; gap: 8px; margin-top: 12px; max-width: 420px; }
/* the app's answer field, drawn as a picture of the app: grey, so nobody takes it for a field to fill in */
.try__input { display: block; padding: 11px 14px; border-radius: 12px; background: #f2f2f5; box-shadow: inset 0 0 0 1px #e3e3e8; font-size: 14.5px; color: #636366; }
.try__go { justify-self: start; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #636366; background: #f2f2f5; }

/* Who did what: one line for the manager, the rest for the assistant */
.try__parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.try__part { padding: 14px 16px 15px; border-radius: 18px; background: rgba(0, 113, 227, .07); }
.try__part dt { font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--link); }
.try__part dd { margin: 3px 0 0; font-family: var(--font-display); font-size: clamp(16px, 1.45vw, 18px); font-weight: 700; letter-spacing: -.02em; line-height: 1.28; color: var(--ink); text-wrap: balance; }
.try__part--lv { background: var(--ink); }
.try__part--lv dt { color: #a1a1a6; }
.try__part--lv dd { color: #fff; }
.tryit .cta-row { margin-top: clamp(32px, 4vw, 52px); }

/* Opening a case: a short cascade, under a second, then the decision asks for a tap */
@media (prefers-reduced-motion: no-preference) {
  .js .try:not(.is-shown) .try__item, .js .try:not(.is-shown) .try__parts { opacity: 0; }
  .js .try:not(.is-shown) .try__feed::before { transform: scaleY(0); }
  .js .try.is-shown .try__panel.is-on .try__item, .js .try.is-shown .try__panel.is-on .try__parts { animation: try-in .45s var(--ease) both; }
  .js .try.is-shown .try__panel.is-on .try__item:nth-child(2) { animation-delay: .07s; }
  .js .try.is-shown .try__panel.is-on .try__item:nth-child(3) { animation-delay: .14s; }
  .js .try.is-shown .try__panel.is-on .try__item:nth-child(4) { animation-delay: .21s; }
  .js .try.is-shown .try__panel.is-on .try__item:nth-child(5) { animation-delay: .28s; }
  .js .try.is-shown .try__panel.is-on .try__item:nth-child(6) { animation-delay: .35s; }
  .js .try.is-shown .try__panel.is-on .try__item:nth-child(7) { animation-delay: .42s; }
  .js .try.is-shown .try__panel.is-on .try__parts { animation-delay: .5s; }
  .js .try.is-shown .try__panel.is-on .try__feed::before { animation: try-line .6s var(--ease) both; }
  .js .try.is-shown .try__panel.is-on .try__dot { animation: try-pulse 1.8s var(--ease) .6s 3; }
  .js .try.is-shown .try__panel.is-on:not(.is-decided) .try__item--decide .try__choice:first-child { animation: try-ring 1.8s var(--ease) .9s 3; }
  .try__more[open] > .mail { animation: try-in .3s var(--ease) both; }
}
@keyframes try-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes try-line { from { transform: scaleY(0); } }
@keyframes try-pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 149, 0, 0); } }
@keyframes try-ring { 50% { box-shadow: 0 0 0 7px rgba(0, 113, 227, .18); } }

@media (max-width: 1068px) {
  .try { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .try__tabs { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .try__tab { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .try__tab-icon { width: 36px; height: 36px; border-radius: 10px; }
  .try__tab-icon svg { width: 18px; height: 18px; }
  .try__tab-role { font-size: 15px; }
  .try__tab-what { font-size: 13px; }
}
@media (max-width: 734px) {
  /* the three cases as one segmented control, as in the iPhone app */
  .try__tabs { display: flex; gap: 2px; padding: 4px; border-radius: 16px; background: #ececf0; }
  .try__tab { flex: 1 1 0; flex-direction: row; align-items: center; justify-content: center; min-width: 0; min-height: 50px; padding: 7px 6px; border-radius: 12px; background: transparent; text-align: center; }
  .try__tab:hover { background: rgba(255, 255, 255, .55); }
  .try__tab[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 3px 10px rgba(0, 0, 0, .08); }
  .try__tab-icon, .try__tab-what { display: none; }
  .try__tab-text { justify-items: center; }
  .try__tab-role { font-size: 14px; line-height: 1.2; }
  .try__stage { margin-top: 14px; }
  .try__panel { padding: 18px 16px 16px; border-radius: 22px; }
  .try__head { padding-bottom: 14px; margin-bottom: 18px; }
  .try__feed { gap: 14px; }
  .try__feed::before { left: 12px; top: 14px; bottom: 14px; }
  .try__item { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "mark when" "mark card"; column-gap: 12px; }
  .try__when { grid-area: when; padding-top: 3px; text-align: left; font-size: 12px; line-height: 1.3; }
  .try__mark { grid-area: mark; width: 26px; height: 26px; }
  .try__card { grid-area: card; }
  .try__name { padding-top: 1px; font-size: 15px; }
  .try__more > summary { display: block; }
  .try__open { width: fit-content; margin-top: 6px; padding-top: 0; }
  .try__choices { display: grid; gap: 8px; }
  /* stacked, each label on one line down to 320 px ("Répondre autrement" is 145 px wide), 44 px tall to tap */
  .try__choice { width: 100%; min-height: 44px; padding-inline: 14px; }
  .try__who { margin-top: 2px; }
  .try__say { font-size: 16px; }
  .try__box { padding: 13px 14px 14px; }
  .try__text { font-size: 15px; }
  .try__parts { gap: 8px; margin-top: 18px; }
  .try__part { padding: 12px 13px 13px; border-radius: 16px; }
  .try__part dd { font-size: 15px; }
  .mail { padding: 12px 13px 13px; font-size: 14px; }
  .mail__head div { grid-template-columns: 54px minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .try__parts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home: what the plan is worth, on the visitor's own volume ---------- */
.worth {
  max-width: 980px; margin: 0 auto; padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 30px 70px rgba(15, 15, 30, .07);
}
.worth__label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.worth__n { flex: none; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--blue); }
.worth .calc__range { margin-top: 6px; }
.worth .calc__range::-webkit-slider-runnable-track { background: linear-gradient(90deg, #0071e3 0, #5e5ce6 var(--p), #e3e3e8 var(--p)); }
.worth .calc__range::-moz-range-track { background: #e3e3e8; }
.worth .calc__range::-moz-range-progress { background: linear-gradient(90deg, #0071e3, #5e5ce6); }
.worth .calc__range::-webkit-slider-thumb { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .18); }
.worth .calc__range::-moz-range-thumb { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .18); }
.worth .calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus), 0 3px 10px rgba(0, 0, 0, .18); }
.worth .calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--focus); }
.worth__month { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.worth__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.worth__fig { padding: 20px 22px; border-radius: 20px; background: var(--mist); }
.worth__v { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.worth__k { margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.worth__fig--lv { background: linear-gradient(135deg, rgba(0, 113, 227, .09), rgba(94, 92, 230, .12)); }
.worth__fig--lv .worth__v { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.worth__verdict { margin-top: 26px; font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 28px); font-weight: 700; letter-spacing: -.026em; line-height: 1.22; text-wrap: balance; }
.worth__verdict strong { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.worth__verdict[hidden], .worth [data-worth-keepf][hidden] { display: none; }
.worth__note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
html:not(.js) .worth__figs { margin-top: 0; }
.worth__static { display: none; font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; }
html:not(.js) .worth__static { display: block; }
@media (max-width: 734px) {
  .worth__figs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .worth__fig { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 18px; }
  .worth__k { margin-top: 0; text-align: right; font-size: 14px; }
  .worth__v { font-size: 30px; }
}

/* ---------- The founders, where a visitor is asked to book a call ---------- */
.founders { display: grid; justify-items: center; gap: 12px; margin: 0 auto 30px; }
.founders__faces { display: flex; }
.founders__faces img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: var(--mist); box-shadow: 0 0 0 3px var(--mist), 0 10px 24px rgba(15, 15, 30, .14); }
.founders__faces img + img { margin-left: -14px; }
.founders__line { font-size: 15px; color: var(--ink-2); }
.phero .founders { margin: 26px auto 0; gap: 10px; }
.phero .founders__faces img { width: 44px; height: 44px; box-shadow: 0 0 0 3px var(--paper), 0 6px 16px rgba(15, 15, 30, .12); }
.phero .founders__faces img + img { margin-left: -10px; }

/* ---------- Security: what the analysis sees ----------
   One email, three views: as it arrives, as it is sent for analysis (each identifier replaced by the
   platform's own token) and as the team reads the result, tokens put back. The key stays beside it. */
.deid { max-width: 980px; margin: 0 auto; padding: clamp(22px, 3vw, 36px); }
.deid__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.deid__where { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--on-night); }
.deid__where svg { width: 22px; height: 22px; color: #a5a3ff; flex: none; }
.deid__where-out, .deid[data-view="out"] .deid__where-in { display: none; }
.deid[data-view="out"] .deid__where-out { display: inline; }
.deid__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(18px, 2.6vw, 30px); margin-top: 26px; align-items: start; }
.deid__main { min-width: 0; }
.deid__main.is-sizing { overflow: hidden; transition: height .5s var(--ease); }
.deid__mail, .deid__back { min-width: 0; }
.deid__back, .deid[data-view="back"] .deid__mail { display: none; }
.deid[data-view="back"] .deid__back { display: block; }
.deid.is-swapping[data-view="back"] .deid__back, .deid.is-swapping:not([data-view="back"]) .deid__mail { animation: deid-show .5s var(--ease) both; }
@keyframes deid-show { from { opacity: 0; } }
.deid__from { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--night-line); font-size: 14px; color: var(--on-night); }
.deid__k { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--on-night-2); }
.deid__sender { min-width: 0; overflow-wrap: anywhere; }
.deid__angle { color: var(--on-night-2); }
.deid__body { display: grid; gap: 10px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; color: var(--on-night); }
.pii { border-radius: 6px; }
.pii__v { padding: 0 3px; margin: 0 -3px; border-radius: 5px; background: rgba(255, 255, 255, .10); box-shadow: inset 0 -1.5px 0 rgba(165, 163, 255, .55); }
.pii__t {
  display: none; padding: 1px 7px; border-radius: 7px; font-family: var(--mono); font-size: .78em; letter-spacing: .01em; white-space: nowrap;
  color: #c9c8ff; background: rgba(125, 122, 255, .18); box-shadow: inset 0 0 0 1px rgba(142, 140, 245, .40);
}
.deid[data-view="out"] .pii .pii__v { display: none; }
.deid[data-view="out"] .pii .pii__t { display: inline; }
.deid.is-swapping[data-view="out"] .pii__t { animation: pii-in .7s var(--ease) both; }
@keyframes pii-in { from { opacity: 0; filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(142, 140, 245, .4), 0 0 24px rgba(125, 122, 255, .9); } }
.deid__line + .deid__line { margin-top: 22px; }
.deid__label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 10px; }
.deid__tok, .deid__val { padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.55; color: var(--on-night); }
.deid__tok { background: rgba(125, 122, 255, .10); }
.deid__val { margin-top: 8px; background: rgba(255, 255, 255, .06); }
.deid__tok .pii__t { display: inline; }
.deid__tag { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--on-night-2); }
.deid__val .pii__v { background: rgba(48, 209, 88, .16); box-shadow: inset 0 -1.5px 0 rgba(48, 209, 88, .6); }
.deid.is-swapping[data-view="back"] .deid__val { animation: deid-back .8s var(--ease) .35s both; }
@keyframes deid-back { from { opacity: 0; transform: translateY(6px); } }
.deid__key { padding: 18px 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.deid__key-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--on-night); }
.deid__key-title svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.deid__map { display: grid; gap: 8px; margin-top: 14px; }
.deid__map div { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--night-line); }
.deid__map div:last-child { border-bottom: 0; padding-bottom: 0; }
.deid__map dt .pii__t { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 12px; }
.deid__map dd { margin: 0; font-size: 14px; color: var(--on-night); overflow-wrap: anywhere; }
.deid__key-note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--on-night-2); }
.deid[data-view="out"] .deid__key { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .45), 0 0 40px rgba(48, 209, 88, .10); transition: box-shadow .6s var(--ease); }
.deid__foot { display: grid; gap: 6px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--night-line); font-size: 14px; color: var(--on-night-2); }
.deid__count { display: flex; gap: 8px; align-items: flex-start; color: var(--on-night); font-weight: 500; }
.deid__count svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 1px; }
.layer__more { margin-top: 14px; font-size: 15px; }
html:not(.js) .deid .pii__v, html:not(.js) .deid__where-in { display: none; }
html:not(.js) .deid__where-out { display: inline; }
html:not(.js) .deid .pii__t { display: inline; }
html:not(.js) .deid__back { display: none; }
@media (max-width: 834px) {
  .deid__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 734px) {
  .deid__top { flex-direction: column; align-items: stretch; }
  .deid .seg button { font-size: 13px; padding-inline: 6px; white-space: normal; line-height: 1.2; min-height: 40px; }
  .pii__t { white-space: normal; overflow-wrap: anywhere; }
}

/* The narrowest phones: a segmented control's longer label wraps instead of widening the page. */
@media (max-width: 374px) {
  .seg button { white-space: normal; line-height: 1.2; }
}

/* ---------- Early access (EARLY_ACCESS in build.py, 11 October 2026) ----------
   What the site announces before the platform runs it: the banner above an early access page's navigation, and the
   bands of the home and pricing pages. No badge since 12 October 2026 (EARLY_BADGE in build.py): the bands say it in
   their text and on their button. One look, the site's accent. */
.eabar { position: relative; z-index: 51; background: var(--accent-grad); color: #fff; font-size: 13px; line-height: 1.35; }
.eabar__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 9px; padding-bottom: 9px; }
.eabar p { margin: 0; }
.eabar b { font-weight: 600; }
.eabar a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.early {
  position: relative; overflow: hidden; margin: 0 auto; max-width: 980px; padding: 44px 40px 40px;
  border-radius: var(--radius); background: var(--mist); text-align: center;
}
.early--pricing { margin-top: 64px; margin-bottom: 8px; }
.early::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent-grad); }
.early__title {
  margin: 0 auto 12px; max-width: 760px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
  font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: var(--ink);
}
.early__text { margin: 0 auto; max-width: 700px; font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.early .cta-row { margin-top: 26px; }
.early__opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;
  margin: 28px auto 0; padding: 0; max-width: 760px; list-style: none; text-align: left;
}
.early__opt {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 3px; align-content: start;
  padding: 22px; border-radius: var(--radius-s); background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.early__opt > :not(.early__icon) { grid-column: 2; }
.early__icon {
  grid-row: 1 / span 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: #fff; background: var(--accent-grad);
}
.early__icon svg { width: 22px; height: 22px; }
.early__name { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.early__sub { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.early__price { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.early__price b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.early__in { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); }
.early__in svg { flex: none; width: 15px; height: 15px; color: var(--blue); }
.early__foot { margin: 18px auto 0; max-width: 640px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 734px) {
  .early { padding: 36px 20px 30px; border-radius: var(--radius-s); }
  .early__text { font-size: 17px; }
  .eabar { font-size: 12px; }
  .eabar__inner { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---------- Supplier follow-ups: what the supplier receives, and the rhythm ----------
   {{mails key}} (mails_html() in build.py): the first email and its follow-up, side by side from 834 px, each under
   its title and time. The cards reuse .mail, set on white so they stand out on the section's mist. */
.mails { display: grid; gap: 22px; max-width: 1000px; margin: 0 auto; text-align: left; }
.mails__item { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.mails__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-inline: 4px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.mails__when { flex: none; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mails .mail { background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .06); padding: 18px 20px 20px; font-size: 15px; }
.mails .mail--fu .mail__body > p:not(.mail__quote) { color: var(--ink); }
.mails__note { max-width: 720px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rhythm { max-width: 920px; margin-inline: auto; }
@media (min-width: 834px) {
  .mails { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 734px) {
  .mails .mail { padding: 14px 15px 16px; font-size: 14px; }
  .mails__note { font-size: 14px; }
}