/* Custodian, new site (preview): the home page only. Loaded after next.css.
   Layout: a full video hero, then a light sheet with round top corners that
   comes up over it. Moments with motion sit in large dark cards; figures sit
   in columns with thin rules. */
.story__line, .statement__text, .captions__title, .states__giant, .states__list, .figure b { font-family: var(--font-title); text-wrap: balance; }
/* Intro: the ring of the logo draws itself once per visit */
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--night); color: var(--on-night); pointer-events: none; animation: intro-out 0.8s 1.5s var(--ease-io) forwards; }
.no-intro .intro, .reduce .intro { display: none; }
.intro__mark { width: 92px; height: 92px; overflow: visible; }
.intro__ring { fill: none; stroke: currentColor; stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring-draw 1s 0.1s var(--ease-io) forwards; }
.intro__base { fill: currentColor; opacity: 0; transform: translateY(8px); animation: base-in 0.5s 0.75s var(--ease) forwards; }
.intro__logo { opacity: 0; animation: logo-in 0.35s 1.15s ease forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes base-in { to { opacity: 1; transform: none; } }
@keyframes logo-in { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; transform: scale(1.06); } }
/* Hero: the clips, the title in the middle on the left and the names of the
   assistants at the bottom. The hero is
   taller than the screen by the radius of the sheet (and 2px more for screens
   with fractional pixels), so the sheet is out of sight until the page
   moves; then it comes up over the hero. */
.hero { position: relative; height: calc(100vh + var(--sheet-r) + 2px); height: calc(100svh + var(--sheet-r) + 2px); min-height: calc(600px + var(--sheet-r)); overflow: hidden; background: var(--night); color: #fff; }
.hero__media { position: absolute; inset: 0; transform-origin: 50% 30%; will-change: transform; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover no-repeat; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-on { opacity: 1; }
/* Until a clip has its first frame, its poster shows behind it: the same frame
   as the browser draws it (scripts/site-video/posters.mjs), so the start has no
   jump. A background and not the poster attribute, so that a phone gets the
   poster of the portrait clip (the same media query as the sources). Only the
   clip on screen and the next one (next.js marks it is-armed) take their
   poster, so the page does not load all eight at the start. */
.hero__video[data-clip="focus"] { --poster: url("../media/hero-focus-poster.webp"); }
.hero__video[data-clip="joy"] { --poster: url("../media/hero-joy-poster.webp"); }
.hero__video[data-clip="pressure"] { --poster: url("../media/hero-pressure-poster.webp"); }
.hero__video[data-clip="curiosity"] { --poster: url("../media/hero-curiosity-poster.webp"); }
.hero__video[data-clip="strain"] { --poster: url("../media/hero-strain-poster.webp"); }
.hero__video[data-clip="relief"] { --poster: url("../media/hero-relief-poster.webp"); }
.hero__video[data-clip="frustration"] { --poster: url("../media/hero-frustration-poster.webp"); }
.hero__video[data-clip="engaged"] { --poster: url("../media/hero-engaged-poster.webp"); }
.hero__video.is-on, .hero__video.is-armed { background-image: var(--poster); }
/* Once a clip has shown a frame (next.js marks it has-frame), its frames
   cover the box and the poster is not seen again, also when the clip stops:
   then the poster goes. Chrome draws a poster under a playing video again
   each time the page changes (100 drawings a second with the grain). */
.hero__video.has-frame { background-image: none; }
/* On wide screens the title covers the left of the picture: each clip comes a
   little closer, with its left edge in place, so the face moves to the right.
   One clip with the face near the middle is also mirrored. Not on a phone in
   portrait: there the title is as wide as the screen, and the portrait clips
   have their own framing. The poster is the background of the same element,
   so it moves with the clip. */
@media (min-width: 761px), (orientation: landscape) {
  .hero__video { transform-origin: 0 50%; transform: scale(var(--zoom, 1.15)); }
  /* The face of the first clip moves left at its end: the clip is aligned on
     its left edge (the part that the cover crop hides moves to the right). */
  .hero__video[data-clip="focus"] { --zoom: 1.25; object-position: 0% 50%; background-position: 0% 50%; }
  /* The face of the joy clip is near the middle and high in the frame: the
     clip comes closer from its top left corner, so the face moves right and
     the head stays in the picture. */
  .hero__video[data-clip="joy"] { --zoom: 1.3; transform-origin: 0 0; }
  .hero__video[data-clip="strain"] { --zoom: 1.12; }
  .hero__video[data-clip="relief"] { --zoom: 1.12; }
  .hero__video[data-clip="frustration"] { --zoom: 1.06; }
  .hero__video[data-clip="engaged"] { --zoom: 1.35; }
  .hero__video[data-clip="curiosity"] { transform: scale(var(--zoom, 1.15)) translateX(100%) scaleX(-1); }
}
@media (max-width: 760px) and (orientation: portrait) {
  .hero__video[data-clip="focus"] { --poster: url("../media/hero-focus-poster-portrait.webp"); }
  .hero__video[data-clip="joy"] { --poster: url("../media/hero-joy-poster-portrait.webp"); }
  .hero__video[data-clip="pressure"] { --poster: url("../media/hero-pressure-poster-portrait.webp"); }
  .hero__video[data-clip="curiosity"] { --poster: url("../media/hero-curiosity-poster-portrait.webp"); }
  .hero__video[data-clip="strain"] { --poster: url("../media/hero-strain-poster-portrait.webp"); }
  .hero__video[data-clip="relief"] { --poster: url("../media/hero-relief-poster-portrait.webp"); }
  .hero__video[data-clip="frustration"] { --poster: url("../media/hero-frustration-poster-portrait.webp"); }
  .hero__video[data-clip="engaged"] { --poster: url("../media/hero-engaged-poster-portrait.webp"); }
}
.hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 23, 25, 0.5) 0%, rgba(11, 23, 25, 0) 24%),
    linear-gradient(0deg, rgba(11, 23, 25, 0.72) 0%, rgba(11, 23, 25, 0.12) 34%, rgba(11, 23, 25, 0) 50%),
    linear-gradient(90deg, rgba(11, 23, 25, 0.6) 0%, rgba(11, 23, 25, 0.2) 48%, rgba(11, 23, 25, 0) 72%);
}
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: var(--max); height: 100%; margin: 0 auto; padding: calc(var(--nav-space) + 20px) var(--gutter) calc(var(--sheet-r) + clamp(22px, 4vh, 40px)); will-change: transform, opacity; }
.hero__copy { max-width: 900px; margin: auto 0; padding-bottom: 2vh; }
.hero h1 { max-width: 10.5em; font-size: clamp(42px, 5.8vw, 86px); color: #fff; }
.hero__lead { max-width: 33em; margin-top: 24px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: #fff; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
.hero__note { margin-left: 12px; font-size: 13.5px; color: rgba(255, 255, 255, 0.72); }
/* Works with: the assistants, as a slow line of white names at the bottom of
   the hero */
.works { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); }
.works__label { font-size: 14px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.works__track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.works__rail { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.works__track:hover .works__rail, .works__rail.is-off { animation-play-state: paused; }
.works__list { display: flex; flex: none; }
.works__list li { padding-right: clamp(36px, 4.4vw, 68px); font-family: var(--font-title); font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; color: #fff; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* One space between the sections of the sheet, the same everywhere: from the
   last thing you see in a section (a letter, a line, the edge of a card) to
   the first thing you see in the next one. Sections have space only above.
   A section that starts with a line of text starts higher by the empty part
   of that line above the letters (--trim, a part of the font size), so that
   the letters, not the line box, are at the distance. Also from the top of
   the sheet to the first section, and above and below the Swiss band. */
.product, .states, .story, .steps, .results, .law, .tools, .faq, .cta { padding: calc(var(--space) - var(--trim, 0px)) 0 0; }
.cta { padding-bottom: 36px; }
/* Product: the statement, the dashboards in a dark frame, and what they show */
.product { --statement-size: clamp(26px, 2.7vw, 42px); --trim: calc(var(--statement-size) * 0.19); }
.statement { margin-bottom: clamp(32px, 3.5vw, 56px); }
.statement__text { max-width: 21em; font-size: var(--statement-size); font-weight: 400; line-height: 1.18; letter-spacing: -0.02em; }
.statement__text h2, .statement__text p { display: inline; font: inherit; letter-spacing: inherit; }
.js .statement__text .hw { color: rgba(17, 27, 29, 0.16); transition: color 0.4s ease; }
.js .statement__text h2 .hw.is-lit { color: var(--ink); }
.js .statement__text p .hw.is-lit { color: var(--ink-soft); }
.statement__text p { color: var(--ink-soft); }
.captions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; margin-top: clamp(28px, 3vw, 44px); }
.captions__lead { display: grid; justify-items: start; align-content: start; gap: 22px; }
.captions__title { max-width: 14em; font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }
.captions__set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.captions__set[hidden] { display: none; }
.captions__set li { display: grid; align-content: start; gap: 4px; padding: 4px 22px 0; border-left: var(--rule-w) solid var(--rule); font-size: 14.5px; color: var(--ink-2); }
.captions__set li span { margin-bottom: 18px; font-size: 12px; color: var(--ink-soft); }
.captions__set b { font-weight: 500; color: var(--ink); }
/* States: a large figure, and some of the states that light up in turn */
.states { --giant-size: clamp(96px, 13vw, 210px); --trim: calc(var(--giant-size) * 0.05); background: var(--paper-2); }
.states__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); }
.states__side { position: sticky; top: 34vh; align-self: start; }
.states__giant { font-size: var(--giant-size); font-weight: 400; line-height: 0.86; letter-spacing: -0.05em; }
.states__giant sup { position: relative; top: 0.08em; margin-left: 0.02em; font-size: 0.4em; letter-spacing: 0; vertical-align: top; }
.states__caption { max-width: 17em; margin-top: 24px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--ink-2); }
.states__list { display: grid; gap: 2px; padding: 6vh 0 2vh; }
.states__list li { font-size: clamp(34px, 4.4vw, 66px); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); opacity: var(--o, 0.18); transition: opacity 0.35s ease; }
.figures { margin-top: clamp(48px, 6vw, 96px); }
.figures__label { padding-bottom: 8px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.figures__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figure { position: relative; display: grid; align-content: start; gap: 18px; padding: 28px 28px 0 0; }
.figure + .figure { padding-left: 28px; }
.figure + .figure::before { content: ""; position: absolute; top: 28px; bottom: 0; left: 0; border-left: var(--rule-w) solid var(--rule); }
.figure__i { font-size: 12px; color: var(--ink-soft); }
.figure b { font-size: clamp(56px, 6vw, 96px); font-weight: 400; line-height: 0.9; letter-spacing: -0.045em; }
.figure sup, .figure b small { position: relative; top: 0.1em; margin-left: 2px; font-size: 0.45em; letter-spacing: 0; vertical-align: top; }
.figure b small { margin: 0 6px 0 0; font-size: 0.32em; }
.figure__text { max-width: 24em; font-size: 14.5px; color: var(--ink-2); }
.figure__src { justify-self: start; margin-top: -8px; font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.figure__src:hover { color: var(--ink); text-decoration-color: currentColor; }
.figure__src span { white-space: nowrap; }
/* Story: a dark card over a film. The lines and an example conversation play
   by themselves while the card is on screen; the bars show the progress. */
.story__card { position: relative; height: clamp(600px, 86vh, 760px); overflow: hidden; border-radius: var(--radius-xl); background: var(--night); color: var(--on-night); isolation: isolate; }
/* Mirrored: the person sits behind the lines, the screen behind the conversation. */
.story__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.story__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 23, 25, 0.84) 0%, rgba(11, 23, 25, 0.6) 45%, rgba(11, 23, 25, 0.4) 100%), linear-gradient(0deg, rgba(11, 23, 25, 0.55), rgba(11, 23, 25, 0) 45%); }
.story__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 96px); height: 100%; padding: clamp(32px, 4vw, 56px) clamp(24px, 5vw, 80px); }
.story__lines { display: grid; }
.story__line { grid-area: 1 / 1; max-width: 13em; font-size: clamp(30px, 3.6vw, 56px); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; color: var(--on-night); }
/* Next to the conversation, each line sits in the middle of the card, also
   the short ones (the longest line sets the height of the place they share). */
@media (min-width: 961px) {
  .story__line { align-self: center; }
}
.js .story__line .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(0.3em); transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.js .story__line.is-on .w { opacity: 1; filter: blur(0); transform: none; }
.js .story__line.is-past .w { opacity: 0; filter: blur(8px); transform: translateY(-0.3em); transition-delay: calc(var(--i, 0) * 12ms); }
.story__controls { position: absolute; left: clamp(24px, 5vw, 80px); bottom: clamp(20px, 2.6vw, 34px); z-index: 3; display: flex; align-items: center; gap: 12px; }
.story__steps { display: flex; gap: 6px; }
.story__step { position: relative; width: clamp(36px, 3.6vw, 52px); height: 28px; }
.story__step i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; overflow: hidden; border-radius: 2px; background: rgba(238, 243, 242, 0.22); transition: background-color 0.2s; }
.story__step i::after { content: ""; position: absolute; inset: 0; background: var(--on-night); transform-origin: left; transform: scaleX(var(--p, 0)); }
.story__step:hover i { background: rgba(238, 243, 242, 0.4); }
.story__pause { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(238, 243, 242, 0.12); color: var(--on-night); transition: background-color 0.2s; }
.story__pause:hover { background: rgba(238, 243, 242, 0.22); }
.story__pause svg { width: 12px; height: 12px; }
.story__icon-play, .story__pause[aria-pressed="true"] .story__icon-pause { display: none; }
.story__pause[aria-pressed="true"] .story__icon-play { display: block; }
.story__step:focus-visible, .story__pause:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; border-radius: 8px; }
/* The conversation: a plain assistant window. What Custodian reads comes as
   dark labels with the mark, so that it does not look like a part of the
   assistant. */
.chat { position: relative; display: flex; flex-direction: column; justify-self: end; width: 100%; max-width: 460px; height: min(560px, 100%); overflow: hidden; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.8); }
.chat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.chat__who { display: inline-flex; align-items: center; gap: 9px; }
.chat__avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fill-2); color: var(--ink-2); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.chat__tag { padding: 4px 10px; border-radius: 999px; background: rgba(80, 151, 166, 0.12); color: var(--teal-ink); font-size: 12px; }
.chat__log { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; min-height: 0; padding: 0 16px 4px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); transition: opacity 0.6s var(--ease), padding-bottom 0.8s var(--ease); }
.chat.is-week .chat__log { padding-bottom: calc(4px + var(--lift, 0px)); }
.chat__item { display: grid; margin-top: 12px; }
.chat__item > div { min-height: 0; overflow: hidden; }
.js .chat__item { grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows 0.55s var(--ease), margin-top 0.55s var(--ease), opacity 0.45s var(--ease); }
.js .chat__item.is-shown { grid-template-rows: 1fr; margin-top: 12px; opacity: 1; }
.chat__item--you > div { display: flex; justify-content: flex-end; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--card); font-size: 15px; line-height: 1.42; }
.reply { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; }
.reply__text p { padding-top: 2px; }
.reply__text ul { margin-top: 4px; padding-left: 18px; color: var(--ink-2); list-style: disc; }
.dots { display: inline-flex; gap: 4px; padding: 10px 0 8px; }
/* The dots move only while they are in the conversation: a running animation
   on a hidden element made the page recompute its styles at every frame. */
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: chat-dot 1.2s var(--ease-io) infinite paused; }
.chat__item.is-shown .dots i { animation-play-state: running; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.read { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; font-size: 12.5px; }
.read__by { width: 16px; height: 16px; color: var(--ink-soft); }
.read i { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--night); color: var(--on-night); font-style: normal; }
.read i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.chat__day { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; color: var(--ink-soft); }
.chat__day::before, .chat__day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chat__input { display: flex; align-items: center; gap: 10px; margin: 8px 12px 12px; padding: 7px 7px 7px 16px; border: 1px solid var(--line-2); border-radius: 18px; font-size: 15px; line-height: 1.4; }
.chat__field { flex: 1; min-width: 0; }
.chat__placeholder { color: var(--ink-soft); }
.chat__input.is-typing .chat__placeholder { display: none; }
.chat__input.is-typing .chat__typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--ink); animation: chat-caret 1s steps(1) infinite; }
@keyframes chat-caret { 50% { opacity: 0; } }
.chat__send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--fill-2); color: var(--ink-soft); transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease); }
.chat__input.is-typing .chat__send { background: var(--ink); color: #fff; }
.chat__send.is-sent { transform: scale(0.86); }
.chat__send svg { width: 15px; height: 15px; }
/* The week, as Custodian shows it to the person: a dark sheet that comes up
   over the bottom of the window. */
.week { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: grid; gap: 12px; padding: 16px 18px 18px; border-radius: 18px; background: var(--night); color: var(--on-night); box-shadow: 0 -24px 50px -24px rgba(11, 23, 25, 0.45); transition: transform 0.8s var(--ease), opacity 0.6s var(--ease); }
.js .week { opacity: 0; transform: translateY(calc(100% + 14px)); }
.js .week.is-shown { opacity: 1; transform: none; }
.week__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.week__mark { width: 16px; height: 16px; color: var(--teal-light); }
.week__private { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 400; color: var(--on-night-2); }
.week__private svg { width: 12px; height: 12px; }
.week__label { margin-top: -6px; font-size: 12.5px; color: var(--on-night-2); }
.week__bars { display: grid; gap: 10px; }
.week__bars i { position: relative; display: block; padding-bottom: 10px; font-size: 13px; font-style: normal; }
.week__bars i::before, .week__bars i::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 4px; }
.week__bars i::before { right: 0; background: rgba(238, 243, 242, 0.1); }
.week__bars i::after { width: var(--w); background: var(--c); transform-origin: left; transition: transform 1.1s var(--ease) 0.35s; }
.js .week__bars i::after { transform: scaleX(0); }
.js .week.is-shown .week__bars i::after { transform: none; }
.week__bars i:nth-child(2)::after { transition-delay: 0.47s; }
.week__bars i:nth-child(3)::after { transition-delay: 0.59s; }
.chat.is-clearing .chat__log, .chat.is-clearing .week { opacity: 0; }
.chat.is-instant, .chat.is-instant * { transition: none !important; }
/* Steps: three cards in a row, after the cards of Primefold. Each card is a
   grey frame with its name on top and a white panel inside: a dark picture of
   the step, then the text. With a mouse on a wide screen, the card under the
   pointer grows, opens its text and shows its link; the picture plays when
   the card comes on screen and again under the pointer. */
.steps { --trim: var(--trim-h2); }
.steps__head { margin-bottom: clamp(36px, 4.4vw, 60px); }
.steps__lead { max-width: 34em; margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.steps__row { display: flex; gap: 16px; }
.step { display: flex; flex: 1 1 0; min-width: 0; }
.step__inner { display: flex; flex: 1; flex-direction: column; min-width: 0; border-radius: 20px; background: var(--card); }
.step__top { display: flex; justify-content: space-between; align-items: center; gap: 14px; height: 54px; padding: 0 16px; }
.step__label { display: flex; flex: none; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.step__num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--c); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: 0.02em; }
.step__status { min-width: 0; overflow: hidden; font-size: 13px; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.step__status b { font-weight: 500; color: var(--teal-ink); }
/* The edge of the panel is the rule of the footer: one line, no frame. */
.step__panel { display: flex; flex: 1; flex-direction: column; overflow: hidden; border: var(--rule-w) solid var(--rule); border-radius: 20px; background: #fff; }
.step__visual { position: relative; display: grid; place-items: center; height: 340px; overflow: hidden; border-radius: 0 0 16px 16px; background: #0d1a1c; color: var(--on-night); }
.step__body { display: grid; align-content: start; gap: 18px; padding: 22px 24px 24px; }
.step__title { font-family: var(--font-title); font-size: clamp(18px, 1.4vw, 20px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.step__desc { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.step__link { justify-self: start; }
/* The pictures: small cards of frosted glass with no edge, as elsewhere on
   the site. Behind them the picture is one flat colour, where a blur shows
   nothing: the cards take the colour that the glass (white at 6 %, blur 20px,
   saturation 1.2) gives over it, and the browser draws no filter. */
.pop, .redact__card, .ranks { border-radius: 16px; background: #19282a; }
.js .step__visual * { transition-property: opacity, transform, background-color, box-shadow; transition-duration: 0.5s; transition-timing-function: var(--ease); }
.step.is-reset .step__visual * { transition: none !important; }
/* 1. Capture: the extension switches on, then a chat waits for the person. */
.pop { width: 284px; padding: 14px; font-size: 13px; }
.pop__head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid rgba(238, 243, 242, 0.08); font-size: 13.5px; font-weight: 500; }
/* The official logo, as in the extension. */
.pop__logo { width: auto; height: 17px; color: var(--on-night); }
.pop__switch { position: relative; width: 34px; height: 20px; margin-left: auto; border-radius: 999px; background: var(--teal); }
.pop__switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(14px); }
.pop__state { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.pop__flag { display: grid; font-weight: 500; }
.pop__flag b { grid-area: 1 / 1; justify-self: end; font-weight: 500; }
.pop__on { color: var(--teal-light); }
.pop__note { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--on-night-2); }
.pop__queue { margin-top: 14px; }
.pop__chat { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(238, 243, 242, 0.06); font-size: 12.5px; }
.pop__chat span + span { color: var(--on-night-2); }
.pop__actions { display: flex; gap: 6px; margin-top: 8px; }
.pop__actions span { flex: 1 1 auto; padding: 6px 8px; border-radius: 8px; background: rgba(238, 243, 242, 0.08); font-size: 12px; text-align: center; }
.js .step:not(.is-play) .pop__switch { background: rgba(238, 243, 242, 0.18); }
.js .step:not(.is-play) .pop__switch i { transform: none; }
.js .step:not(.is-play) .pop__on, .js .step.is-play .pop__off { opacity: 0; }
.js .step:not(.is-play) .pop__queue { opacity: 0; transform: translateY(8px); }
.js .pop__switch, .js .pop__switch i { transition-delay: 0.35s; }
.js .pop__flag b { transition-delay: 0.55s; }
.js .pop__queue { transition-delay: 1s; transition-duration: 0.7s; }
/* 2. De-identify: the personal data lights up, then comes back as labels. */
.redact { display: grid; width: 290px; }
.redact__card { padding: 12px 14px; }
.redact__label { margin-bottom: 6px; font-size: 11.5px; color: var(--on-night-2); }
.redact__msg { font-size: 13.5px; line-height: 1.55; }
.pii { margin: 0 -2px; padding: 0 2px; border-radius: 4px; white-space: nowrap; background: rgba(224, 123, 103, 0.24); box-shadow: inset 0 -1.5px 0 rgba(224, 123, 103, 0.85); }
.redact__flow { position: relative; display: flex; align-items: center; height: 42px; padding-left: 32px; font-size: 11.5px; color: var(--on-night-2); }
.redact__flow i { position: absolute; left: 20px; top: 4px; bottom: 4px; width: 1px; background: repeating-linear-gradient(180deg, rgba(238, 243, 242, 0.35) 0 3px, transparent 3px 6px); }
.redact__flow i::after { content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-light); transform: translateY(27px); transition: transform 0.8s var(--ease) 0.55s; }
.redact__card--stored b { display: inline-block; padding: 0 6px; border-radius: 5px; background: rgba(143, 203, 214, 0.16); color: var(--teal-light); font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; }
.redact__note { margin-top: 12px; font-size: 11px; color: rgba(238, 243, 242, 0.66); text-align: center; }
.js .pii { transition-delay: 0.15s; }
.js .step:not(.is-play) .pii { background: transparent; box-shadow: inset 0 -1.5px 0 rgba(224, 123, 103, 0); }
.js .step:not(.is-play) .redact__flow i::after { transform: none; }
.js .step:not(.is-play) .redact__card--stored b { opacity: 0; transform: translateY(4px) scale(0.92); }
.js .redact__card--stored b:nth-of-type(1) { transition-delay: 1.25s; }
.js .redact__card--stored b:nth-of-type(2) { transition-delay: 1.4s; }
.js .redact__card--stored b:nth-of-type(3) { transition-delay: 1.55s; }
/* 3. Analyse: the states of one message, ranked, and the next turn. */
.ranks { width: 290px; padding: 14px; }
.ranks__label { font-size: 11.5px; color: var(--on-night-2); }
.ranks__msg { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.5; }
.rank { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.rank i { position: relative; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(238, 243, 242, 0.08); }
.rank i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: inherit; background: var(--c); transform-origin: left; transition: transform 1.1s var(--ease) 0.3s; }
.rank:nth-of-type(2) i::after { transition-delay: 0.42s; }
.rank:nth-of-type(3) i::after { transition-delay: 0.54s; }
.rank:nth-of-type(4) i::after { transition-delay: 0.66s; }
.ranks__next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(238, 243, 242, 0.08); font-size: 12px; color: var(--on-night-2); }
.ranks__next span { margin-right: auto; }
.ranks__next i { padding: 3px 9px; border-radius: 999px; background: rgba(238, 243, 242, 0.08); color: var(--on-night); font-style: normal; }
.js .step:not(.is-play) .rank i::after { transform: scaleX(0); }
.js .step:not(.is-play) .ranks__next i { opacity: 0; transform: translateY(4px); }
.js .ranks__next i { transition-delay: 1.3s; }
.js .ranks__next i + i { transition-delay: 1.42s; }
/* Three narrow cards with no pointer to open them: no room for the status. */
@media (min-width: 961px) and (max-width: 1279px) {
  .step__status { display: none; }
}
/* With a mouse on a wide screen: the card under the pointer grows. The text
   part keeps one height, so that the page does not move. */
@media (hover: hover) and (min-width: 1280px) {
  .step { transition: flex-grow 0.7s var(--ease); }
  .steps__row .step:is(:hover, :focus-within) { flex-grow: 1.6; }
}
/* On the narrowest wide screens the card grows less, so that the other two
   keep their two lines of text. */
@media (hover: hover) and (min-width: 1280px) and (max-width: 1365px) {
  .steps__row .step:is(:hover, :focus-within) { flex-grow: 1.3; }
}
@media (hover: hover) and (min-width: 1280px) {
  .step__status { opacity: 0; transform: translateY(-8px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
  .step:is(:hover, :focus-within) .step__status { opacity: 1; transform: none; transition-delay: 0.15s; }
  .step__body { position: relative; display: block; height: 124px; }
  .step__desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .step:is(:hover, :focus-within) .step__text { padding-right: 112px; }
  .step__link { position: absolute; right: 24px; bottom: 24px; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
  .step:is(:hover, :focus-within) .step__link { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.2s; }
}
/* Results: the comparison as columns on a light card (a value shows on hover
   or tap), safety as 100 dots for each kind of reply on a dark card */
.results { --trim: var(--trim-h2); }
/* The lead starts where the dark card below it starts: the head has the
   columns of the cards. */
.results__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 20px 16px; margin-bottom: clamp(28px, 3vw, 44px); }
.results__head .h2 { max-width: 12em; }
.bento { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.agree { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--card); --h: clamp(170px, 15vw, 220px); --top: 0.7; }
.agree__head b { display: block; font-size: 16px; font-weight: 500; }
.agree__head span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.agree__plot { display: grid; flex: 1 1 auto; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.agree__col { display: grid; grid-template-rows: minmax(var(--h), 1fr) auto; justify-items: center; gap: 12px; min-width: 0; }
/* The columns stand on one base line; no empty part above them. The scale
   goes from zero to 0.7, so the columns use the height of the card. */
.agree__track { position: relative; display: block; width: 100%; height: 100%; border-bottom: 1px solid rgba(17, 27, 29, 0.16); }
.agree__track i { position: absolute; left: 0; right: 0; bottom: 0; width: min(64px, 62%); height: calc(var(--v) / var(--top) * 100%); margin: 0 auto; border-radius: 12px 12px 0 0; background: #cbc8bf; transition: clip-path 1.3s var(--ease) var(--sd, 0s), opacity 0.3s, background-color 0.3s; }
.agree__col--key .agree__track i { background: var(--teal); }
.agree__col:nth-child(2) { --sd: 0.08s; }
.agree__col:nth-child(3) { --sd: 0.16s; }
.agree__col:nth-child(4) { --sd: 0.24s; }
.agree__col:nth-child(5) { --sd: 0.32s; }
.js .agree__track i { clip-path: inset(100% 0 0 0 round 12px 12px 0 0); }
.js .agree.is-in .agree__track i { clip-path: inset(0 round 12px 12px 0 0); }
.agree__value { position: absolute; left: 50%; bottom: calc(var(--v) / var(--top) * 100% + 8px); padding: 4px 10px; border-radius: 999px; background: var(--night); color: var(--on-night); font-size: 12.5px; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.25s, transform 0.35s var(--ease); pointer-events: none; }
.agree__name { display: flex; justify-content: center; gap: 5px; min-height: 2.6em; font-size: 12.5px; line-height: 1.3; text-align: center; text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; color: var(--ink-2); transition: color 0.25s; }
.agree__name svg { flex: none; width: 15px; height: 15px; color: var(--teal); }
.agree__col--key .agree__name { font-weight: 500; color: var(--ink); }
.agree__col.is-active .agree__value { opacity: 1; transform: translate(-50%, 0); }
.agree__col.is-active .agree__name { color: var(--ink); }
.agree__plot:has(.is-active) .agree__col:not(.is-active) .agree__track i { opacity: 0.4; }
@media (hover: hover) {
  .agree__col:hover .agree__value { opacity: 1; transform: translate(-50%, 0); }
  .agree__col:hover .agree__name { color: var(--ink); }
  .agree__col:not(.agree__col--key):hover .agree__track i { background-color: #a9a59b; }
  .agree__plot:has(.agree__col:hover) .agree__col:not(:hover) .agree__track i { opacity: 0.4; }
}
.agree__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.agree__foot a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* The dots take 2 % of the width inside the card. That width comes from the
   width of the screen (--inner), not from a container query: a size
   container made the browser compute the styles of all 200 dots again at
   each step of the counters below them. */
.safety { --pad: clamp(22px, 2.4vw, 32px); --inner: calc((min(100vw, var(--max)) - 2 * var(--gutter) - 16px) * 5 / 12 - 2 * var(--pad)); display: flex; flex-direction: column; gap: 22px; padding: var(--pad); border-radius: var(--radius-lg); background: radial-gradient(90% 70% at 100% 0%, rgba(80, 151, 166, 0.3) 0%, rgba(80, 151, 166, 0) 70%), var(--night); color: var(--on-night); }
.safety__text { display: grid; gap: 8px; }
.safety__title { font-family: var(--font-title); font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }
.safety__text span { font-size: 14.5px; line-height: 1.5; color: var(--on-night-2); }
.waffles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: auto; --dot: clamp(8px, calc(var(--inner) * 0.02), 12px); --gap: calc(var(--dot) * 0.45); }
.waffle { display: grid; align-content: start; gap: 16px; }
/* Each row and column keeps the size of a full dot, also while the dots are
   small. */
.waffle__dots { display: grid; grid-template-columns: repeat(10, var(--dot)); grid-auto-rows: var(--dot); gap: var(--gap); }
.waffle__dots:empty { display: none; }
.waffle__dots i { place-self: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--teal-light); }
.waffle__dots i.is-miss { background: transparent; box-shadow: inset 0 0 0 1.5px var(--coral); }
/* When the card comes in, the dots grow from half their size and take their
   colour, one after the other. They grow in width and height, not with a
   transform: with a transform, the browser makes a layer for each of the
   200 dots and draws each layer again at each frame (thousands of drawings
   in one second, frames late while the page scrolls). Like this, it draws
   only the small part of the card where the dots are. */
.js .waffle__dots i { width: calc(var(--dot) / 2); height: calc(var(--dot) / 2); background-color: rgba(238, 243, 242, 0.12); transition: background-color 0.5s, box-shadow 0.5s, width 0.6s var(--ease), height 0.6s var(--ease); transition-delay: calc(var(--i) * 6ms); }
.js .waffle__dots i.is-miss { box-shadow: inset 0 0 0 1.5px rgba(224, 123, 103, 0); }
.js .safety.is-in .waffle__dots i { width: var(--dot); height: var(--dot); background-color: var(--teal-light); }
.js .safety.is-in .waffle__dots i.is-miss { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--coral); transition-delay: calc(var(--i) * 6ms + 0.25s); }
.waffle__figure { display: flex; align-items: center; gap: 10px; }
.waffle__figure b { font-family: var(--font-title); font-size: clamp(32px, 2.8vw, 42px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.waffle__figure span { max-width: 9em; font-size: 13px; line-height: 1.35; color: var(--on-night-2); }
.safety__note { font-size: 12.5px; line-height: 1.5; color: rgba(238, 243, 242, 0.6); }
.reduce .agree__track i, .reduce .waffle__dots i { transition: none !important; }
/* Swiss: a band over the lake, with the facts as a row of marks */
/* The band is its own group for the grain, which mixes (overlay) only with
   the video and the shade under it, not with the whole sheet. */
.swiss { position: relative; overflow: hidden; background: var(--night); isolation: isolate; }
.swiss__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swiss__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 23, 25, 0.62) 0%, rgba(11, 23, 25, 0.2) 62%, rgba(11, 23, 25, 0.1) 100%), linear-gradient(180deg, rgba(11, 23, 25, 0.55), rgba(11, 23, 25, 0.42) 40%, rgba(11, 23, 25, 0.88)); }
/* The band has the space of the sheet above it. Inside, the same space above
   the title as below the links: the title starts higher by the empty part of
   its first line. */
.swiss { margin-top: var(--space); }
.swiss__inner { position: relative; z-index: 2; --band: clamp(56px, 7vw, 104px); padding-top: calc(var(--band) - var(--trim-h2)); padding-bottom: var(--band); }
.swiss__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 24px 16px; margin-bottom: clamp(48px, 6vw, 96px); }
.swiss .h2 { max-width: 11em; }
.swiss .lead { color: rgba(255, 255, 255, 0.86); }
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.badge { position: relative; display: grid; align-content: start; gap: 8px; padding: 28px 28px 0 0; }
.badge + .badge { padding-left: 28px; }
.badge + .badge::before { content: ""; position: absolute; top: 28px; bottom: 0; left: 0; border-left: var(--rule-w) solid var(--on-night-line); }
.badge__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; }
.badge__icon svg { width: 20px; height: 20px; }
.badge dt { font-size: 12.5px; color: var(--on-night-2); }
.badge dd { max-width: 19em; font-size: 16.5px; font-weight: 500; line-height: 1.4; }
.badge__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: var(--on-night-2); text-decoration: none; }
.badge__link svg { width: 13px; height: 13px; transition: transform 0.35s var(--ease); }
.badge__link:hover { color: #fff; }
.badge__link:hover svg { transform: translate(2px, -2px); }
/* Law: the title and the security controls in two columns, then the three
   laws as seals in a row (after Papermark). The seals name the laws; they do
   not claim a certification. */
.law { --trim: var(--trim-h2); }
/* The same columns as the head of the results: the leads of the two
   sections start at the same place. */
.law__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 16px; margin-bottom: clamp(48px, 6vw, 88px); }
.law__top .h2 { max-width: 11em; }
/* The first line of the lead starts at the height of the capitals of the
   title, not at the top of its box: the empty part above the letters is
   0.17 of the size of the title and 0.415 of the size of the lead. */
.law__text { display: grid; justify-items: start; gap: 26px; padding-top: max(0px, calc(var(--h2-size) * 0.17 - var(--lead-size) * 0.415)); }
.laws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.laws__item { position: relative; display: grid; align-content: start; justify-items: start; gap: 6px; padding: 32px 28px 0 0; }
.laws__item + .laws__item { padding-left: 28px; }
.laws__item + .laws__item::before { content: ""; position: absolute; top: 32px; bottom: 0; left: 0; border-left: var(--rule-w) solid var(--rule); }
.seal { width: 88px; height: 88px; margin-bottom: 16px; color: var(--ink); }
.seal__bg { fill: var(--card); }
.seal__edge { fill: none; stroke: currentColor; stroke-opacity: 0.16; }
.seal__ring { fill: currentColor; transform-origin: 40px 40px; transition: transform 0.9s var(--ease); }
.seal__text { fill: currentColor; font-family: var(--font-title); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
/* The German short names (revDSG, DSGVO) are longer: smaller, so that they
   stay inside the ring. */
:lang(de) .seal__text { font-size: 11.5px; letter-spacing: 0; }
.laws__item:hover .seal__ring { transform: rotate(var(--turn)); }
.laws__item h3 { font-size: 16.5px; font-weight: 500; line-height: 1.35; }
.laws__item p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.laws__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.laws__link svg { width: 13px; height: 13px; transition: transform 0.35s var(--ease); }
.laws__link:hover { color: var(--ink); }
.laws__link:hover svg { transform: translate(2px, -2px); }
.reduce .seal__ring { transition: none; }
/* Coding tools */
/* The terminal on the left, the text on the right. The text stays first in
   the page, for screen readers and for the phone layout. */
.tools__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 5vw, 96px); }
.tools__text { display: grid; grid-column: 2; grid-row: 1; justify-items: start; gap: 22px; }
.tools .term { grid-column: 1; grid-row: 1; }
/* The browser extension, before the connector: the words on the left, a
   browser window on the right (the terminal of the next section is on the
   left). In the window the popup of the extension switches capture on, three
   chats wait, then they are sent; again and again while it is on screen. */
.tools--browser + .tools { --trim: var(--trim-h2); }
.tools__grid--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.tools__grid--flip .tools__text { grid-column: 1; }
.tools__grid--flip .browse { grid-column: 2; grid-row: 1; }
.browse { position: relative; overflow: hidden; height: 440px; border-radius: var(--radius-lg); background: #071315; color: #dfeceb; }
.browse__bar { display: flex; align-items: center; gap: 7px; padding: 9px 10px 9px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.browse__bar > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.browse__url { flex: 1; min-width: 0; margin: 0 6px 0 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 12px; color: rgba(223, 236, 235, 0.7); }
.browse__ext { flex: none; width: 18px; height: 18px; color: var(--teal-light); }
.browse__pause { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(223, 236, 235, 0.7); transition: background-color 0.2s; }
.browse__pause:hover { background: rgba(255, 255, 255, 0.08); }
.browse__pause svg { width: 14px; height: 14px; }
.browse__pause .i-play, .browse__pause[aria-pressed="true"] .i-pause { display: none; }
.browse__pause[aria-pressed="true"] .i-play { display: block; }
.reduce .browse__pause { display: none; }
.browse__page { position: absolute; top: 49px; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 12px; width: calc(100% - 352px); padding: 26px 22px 20px; }
.browse__msg { padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); font-size: 13.5px; line-height: 1.45; color: rgba(223, 236, 235, 0.86); }
.browse__msg--you { align-self: flex-end; max-width: 92%; background: rgba(80, 151, 166, 0.22); color: #eef6f5; }
/* The box where the person writes, at the foot of the chat. */
.browse__input { position: relative; flex: none; height: 44px; margin-top: auto; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.browse__input::after { content: ""; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(223, 236, 235, 0.16); }
.browse__popup { position: absolute; top: 60px; right: 16px; width: 320px; }
/* Where the window is too narrow for the chat and the popup side by side:
   only the popup, in the middle. */
@media (max-width: 720px), (min-width: 961px) and (max-width: 1279px) {
  .browse__page { display: none; }
  .browse__popup { left: 50%; right: auto; width: min(320px, calc(100% - 24px)); transform: translateX(-50%); }
}
/* Questions: the title stays on the left, the list has a topic for each row */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(32px, 5vw, 96px); }
.faq__head { position: sticky; top: calc(var(--nav-space) + 32px); align-self: start; display: grid; justify-items: start; }
.faq__head p:last-child { max-width: 20em; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.faq__head a { color: var(--ink); text-underline-offset: 3px; }
.faq__list { border-top: var(--rule-w) solid var(--rule); }
.qa { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; border-bottom: var(--rule-w) solid var(--rule); }
.qa__cat { padding-top: 25px; font-size: 13px; color: var(--ink-2); }
.qa h3 { font: inherit; }
.qa button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 19px 0; font-size: clamp(17px, 1.3vw, 19px); font-weight: 500; letter-spacing: -0.01em; text-align: left; }
.qa button svg { flex: none; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: rgba(17, 27, 29, 0.06); transition: transform 0.45s var(--ease), background-color 0.3s; }
.qa button:hover svg { background: rgba(17, 27, 29, 0.11); }
.qa button[aria-expanded="true"] svg { transform: rotate(45deg); }
.qa__a { grid-column: 2; }
.qa__a p { max-width: 44em; padding: 0 58px 24px 0; color: var(--ink-2); }
.js .qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.js .qa__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s 0.55s; }
.js .qa.is-open .qa__a { grid-template-rows: 1fr; }
.js .qa.is-open .qa__a > div { visibility: visible; transition: none; }
/* Small screens */
@media (max-width: 960px) {
  .works { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .captions { grid-template-columns: minmax(0, 1fr); }
  .captions__set { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .captions__set li { padding: 14px 0; border-left: 0; border-top: var(--rule-w) solid var(--rule); }
  .captions__set li:last-child { padding-bottom: 0; }
  .captions__set li span { margin-bottom: 6px; }
  .states__grid { grid-template-columns: minmax(0, 1fr); }
  .states__side { position: relative; top: auto; }
  .states__list { padding: 0; }
  .figures__grid { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure + .figure { grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; column-gap: 12px; row-gap: 6px; padding: 20px 0; border-left: 0; border-bottom: var(--rule-w) solid var(--rule); }
  .figure + .figure::before { display: none; }
  .figure__text, .figure__src { grid-column: 2; }
  .figure__src { margin-top: 0; }
  .story__card { height: auto; }
  .story__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 28px; padding: 40px clamp(20px, 5vw, 48px) 84px; }
  .story__line { font-size: clamp(26px, 6.6vw, 38px); }
  .chat { justify-self: stretch; max-width: none; height: 460px; }
  .story__controls { left: clamp(20px, 5vw, 48px); bottom: 22px; }
  .steps__row { flex-direction: column; }
  .step__visual { height: 330px; }
  .results__head, .bento, .swiss__top, .law__top, .tools__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .safety { --inner: calc(min(100vw, var(--max)) - 2 * var(--gutter) - 2 * var(--pad)); }
  .tools__text, .tools .term, .tools__grid--flip .browse { grid-column: auto; grid-row: auto; }
  /* In one column these two sections start with their title. */
  .tools, .faq { --trim: var(--trim-h2); }
  /* In one column these parts end with a line of text, not with a rule: the
     empty part of that line under the letters counts in the space. */
  .product { margin-bottom: -4px; }
  .law { margin-bottom: -5px; }
  .swiss__inner { padding-bottom: calc(var(--band) - 3px); }
  .law__text { padding-top: 0; }
  .laws { grid-template-columns: minmax(0, 1fr); }
  .laws__item, .laws__item + .laws__item { grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; padding: 22px 0; border-left: 0; border-bottom: var(--rule-w) solid var(--rule); }
  .laws__item + .laws__item::before { display: none; }
  .laws__item:last-child { padding-bottom: 0; border-bottom: 0; }
  .seal { grid-row: span 3; width: 60px; height: 60px; margin: 0; }
  .badges { grid-template-columns: minmax(0, 1fr); }
  .badge, .badge + .badge { padding: 24px 0; border-left: 0; border-bottom: var(--rule-w) solid var(--on-night-line); }
  .badge + .badge::before { display: none; }
  .badge:last-child { padding-bottom: 0; border-bottom: 0; }
  .faq__head { position: relative; top: auto; }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .qa__cat { padding-top: 18px; }
  .qa button { padding-top: 6px; }
  .qa__a { grid-column: 1; }
}
@media (max-width: 640px) {
  /* Phones: the hero title a little larger, on three lines. */
  .browse { height: 410px; }
  .hero h1 { max-width: 7.2em; font-size: clamp(44px, 12.4vw, 50px); }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__note { flex-basis: 100%; margin: 4px 0 0; }
  .story__grid { padding: 32px 16px 76px; }
  .story__controls { left: 16px; bottom: 18px; }
  .chat { height: 440px; }
  .bubble, .reply, .chat__input { font-size: 14.5px; }
  .agree { --h: 170px; }
  .agree__track i { width: 72%; }
  .agree__plot { column-gap: 8px; }
  .agree__name { font-size: 10.5px; }
  .agree__name svg { display: none; }
  .qa__a p { padding-right: 0; }
  /* The status of a step goes under its name, after the number: next to the
     name it does not hold in every language. */
  .step__top { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; height: auto; min-height: 54px; padding: 10px 16px; }
  .step__status { max-width: 100%; padding-left: 32px; white-space: normal; }
  /* A name, a title or a tag that does not hold on the line goes to the next
     line whole, never cut in two. */
  .chat__head, .week__head { flex-wrap: wrap; row-gap: 6px; white-space: nowrap; }
}
@media (max-width: 640px) and (max-height: 600px) {
  /* The shortest phones: no room for the names under the hero text. */
  .hero .works { display: none; }
}
/* Short screens: a smaller conversation, so that the card holds all of it. */
@media (min-width: 961px) and (max-height: 760px) {
  .story__card { height: clamp(560px, 92vh, 680px); }
  .bubble, .reply, .chat__input { font-size: 14px; }
  .js .chat__item.is-shown { margin-top: 10px; }
  .week { gap: 10px; padding: 14px 16px 16px; }
}
.reduce .statement__text h2 .hw { color: var(--ink); }
.reduce .step { transition: none; }
.reduce .statement__text p .hw { color: var(--ink-soft); }
.reduce .works__rail { animation: none; }
.reduce .works__track { -webkit-mask-image: none; mask-image: none; }
.reduce .works__list:last-child { display: none; }
.reduce .works__list { flex: 1 1 auto; flex-wrap: wrap; row-gap: 6px; }
.reduce .works__rail { width: auto; }
.reduce .states__list li { opacity: 1; }
.reduce .story__card { height: auto; }
.reduce .story__grid { padding-top: 64px; padding-bottom: 64px; }
.reduce .story__lines { gap: 20px; }
.reduce .story__line { grid-area: auto; }
.reduce .story__line .w, .reduce .story__line.is-past .w { opacity: 1; filter: none; transform: none; }
.reduce .story__controls { display: none; }
.reduce .chat { height: auto; }
.reduce .chat__log, .reduce .chat.is-week .chat__log { padding-bottom: 4px; -webkit-mask-image: none; mask-image: none; }
.reduce .week { position: relative; left: auto; right: auto; bottom: auto; margin: 0 10px 10px; }
.reduce .dots i, .reduce .chat__typed::after { animation: none; }