/* Orra website. One style sheet for the pages in every language. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: #d2d2d7;
  --link: #0066cc;
  --button: #0066cc;
  --button-hover: #0058b0;
  --button-text: #ffffff;
  --focus: #0066cc;
  --bar-bg: rgba(255, 255, 255, 0.8);
  --window: #ffffff;
  --window-line: #e8e8ed;
  --capsule: #1d1d1f;
  --live: #28a745;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --max: 980px;
  --radius: 22px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-soft: #161617;
    --surface: #1d1d1f;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --border: #424245;
    --link: #2997ff;
    --button: #0066cc;
    --button-hover: #0077ed;
    --button-text: #ffffff;
    --focus: #2997ff;
    --bar-bg: rgba(22, 22, 23, 0.8);
    --window: #1d1d1f;
    --window-line: #333336;
    --capsule: #000000;
    --live: #30d158;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px #333336;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "Noto Sans CJK SC", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
.statement {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "Noto Sans CJK SC", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The Japanese page names Japanese fonts first, or its kanji would take the Chinese shapes
   of PingFang SC. Chinese text on that page keeps the Chinese fonts. */
html:lang(ja) body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) .statement {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html:lang(ja) :lang(zh) {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "Noto Sans CJK SC", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 22px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
}

.skip:focus {
  top: 12px;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 19px;
}

.brand:hover {
  text-decoration: none;
}

.topbar nav {
  display: flex;
  gap: 22px;
  font-size: 13px;
}

.topbar nav a {
  color: var(--text);
  opacity: 0.85;
}

.topbar nav a:hover {
  opacity: 1;
  text-decoration: none;
}

/* Hero */
.hero {
  text-align: center;
  padding: 72px 0 40px;
}

.app-icon {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
}

.eyebrow {
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 6px;
}

h1 {
  font-size: clamp(44px, 8vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 auto 18px;
}

.lede {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.4;
  color: var(--muted);
  max-width: 34em;
  margin: 0 auto;
}

.cta {
  margin: 32px auto 0;
}

.button {
  display: inline-block;
  background: var(--button);
  color: var(--button-text);
  font-size: 17px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 980px;
  transition: background-color 0.2s var(--ease);
}

.button:hover,
.button:focus-visible {
  background: var(--button-hover);
  color: var(--button-text);
  text-decoration: none;
}

.button:focus-visible {
  border-radius: 980px;
}

.version {
  font-size: 14px;
  color: var(--muted);
  margin: 12px auto 0;
  max-width: 34em;
}

.needs {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* Demos of dictation, cleanup and translation. The markup shows the final
   state, so they read right without script and with reduced motion. site.js
   plays one demo at a time by setting data-active on .demos and data-phase
   on it. */
.demos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 56px auto 0;
}

.demo {
  margin: 0;
  transition: opacity 0.5s var(--ease);
}

.demos[data-active] .demo:not([data-phase]) {
  opacity: 0.45;
}

.demo-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.demo-stage {
  position: relative;
  height: 310px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  overflow: hidden;
  padding: 22px 18px 0;
}

.demo-said {
  height: 60px;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  font-style: italic;
  transition: opacity 0.4s var(--ease);
}

/* Japanese lines in the demos, and the Chinese lines of the English page, wrap only at the
   <wbr> between their phrases, so no line ends with a character or two alone. Safari cannot
   find the phrases itself, as Chrome does for Japanese with word-break: auto-phrase. A
   phrase that is wider than the line still breaks. The Chinese page wraps as before. */
.demo-stage:lang(ja),
.meet-stage:lang(ja),
.demo-stage:lang(en) :lang(zh),
.meet-stage:lang(en) :lang(zh) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Chinese and Japanese have no italic. */
.demo-said:lang(zh),
.demo-said:lang(ja) {
  font-style: normal;
}

.filler {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  transition: opacity 0.4s var(--ease) 0.3s;
}


.demo-window {
  text-align: left;
  background: var(--window);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 400px;
  margin: 0 auto;
  padding: 0 18px 16px;
  min-height: 150px;
  font-size: 15px;
}

.demo-window p {
  margin: 0;
}

.demo-chrome {
  display: flex;
  gap: 7px;
  padding: 12px 0 14px;
}

.demo-chrome i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--window-line);
}

.doc-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.demo-target {
  min-height: 1.6em;
}

.mail-subject {
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--window-line);
  margin-bottom: 10px;
}

.mail-subject span {
  font-weight: 400;
  color: var(--muted);
  margin-right: 8px;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--window-line);
  margin-bottom: 12px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--window-line);
  font-size: 12px;
}

.demo-window .bubble {
  display: inline-block;
  background: var(--window-line);
  border-radius: 14px;
  padding: 5px 12px;
  margin-bottom: 12px;
}

.composer {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3px 12px;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--link);
  animation: blink 1.1s steps(1) infinite;
}

.capsule {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  background: var(--capsule);
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.badge {
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  padding: 3px 5px;
  margin-right: 6px;
}

.capsule i {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: #ffffff;
  transform: scaleY(0.2);
}

.capsule i:nth-of-type(2) { animation-delay: -0.3s; }
.capsule i:nth-of-type(3) { animation-delay: -0.6s; }
.capsule i:nth-of-type(4) { animation-delay: -0.15s; }
.capsule i:nth-of-type(5) { animation-delay: -0.75s; }
.capsule i:nth-of-type(6) { animation-delay: -0.45s; }
.capsule i:nth-of-type(7) { animation-delay: -0.2s; }

/* Phases: idle, speak, strike, done. Without data-phase a demo shows its final state. */
.demo[data-phase="idle"] .demo-said {
  opacity: 0;
}

.demo[data-phase="idle"] .filler,
.demo[data-phase="speak"] .filler {
  opacity: 1;
  text-decoration: none;
  transition: none;
}

/* site.js splits the spoken line into spans, each with its index in --i,
   and sets --step, the time between two of them. */
.demo[data-phase="speak"] .demo-said .unit {
  animation: speak 0.2s linear both;
  animation-delay: calc(var(--i) * var(--step));
}

.demo[data-phase="idle"] .pasted,
.demo[data-phase="speak"] .pasted,
.demo[data-phase="strike"] .pasted {
  display: none;
}

.demo[data-phase="done"] .pasted {
  animation: paste 0.3s var(--ease) both;
}

.demo[data-phase="speak"] .capsule {
  opacity: 1;
  transform: translateX(-50%);
}

.demo[data-phase="speak"] .capsule i {
  animation: level 0.9s ease-in-out infinite alternate;
}

@keyframes speak {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes level {
  0% { transform: scaleY(0.2); }
  40% { transform: scaleY(0.9); }
  70% { transform: scaleY(0.45); }
  100% { transform: scaleY(1); }
}

@keyframes paste {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Sections */
.band {
  padding: 100px 0;
}

/* The Preview label beside the heading of Projects, a thin capsule as in Settings. */
.preview-label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.15em;
  padding: 2px 12px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

.soft {
  background: var(--bg-soft);
}

h2 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 48px;
}

h3 {
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 8px;
}

.tile p {
  margin: 0;
  color: var(--muted);
}

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.tile {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 28px;
}

.statement {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  margin: -24px 0 36px;
  color: var(--muted);
}

.prose {
  max-width: 44em;
}

.prose p {
  margin: 0 0 16px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.split h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
}

.split p {
  color: var(--muted);
  margin: 0 0 20px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.links a::after {
  content: " ›";
}

/* Meeting Interpretation: the Live Captions window and a call, drawn in HTML and
   CSS. The markup shows the final frame. With script and motion, the lines come
   in once, when their part scrolls into view. */
.meet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.meet-part > p {
  color: var(--muted);
  margin: 0 0 16px;
}

.meet-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 310px;
  margin-bottom: 28px;
  padding: 22px 18px;
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.meet-stage p {
  margin: 0;
}

/* The caption window is dark in light and in dark mode, as in the app. */
.captions {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px 14px 16px;
  border-radius: 12px;
  background: rgba(40, 40, 44, 0.97);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #ffffff;
  container-type: inline-size;
}

.meet-stage .captions-title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* The top row, as in the app: the display mode on the left, then the language captions
   translate into and Copy, each a menu. It wraps only in a browser without container
   queries, which never turns the modes into the menu below. */
.meet-stage .captions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
  font-size: 11px;
  line-height: 1.4;
}

.captions-modes {
  display: flex;
  margin-right: auto;
  padding: var(--modes-padding, 2px);
  border-radius: 7px;
  background: var(--modes-track, rgba(255, 255, 255, 0.08));
}

.captions-modes span {
  position: relative;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.75);
}

.captions-modes span:not(.on) {
  display: var(--modes-others, block);
}

/* A thin line between two modes that are not chosen. */
.captions-modes span:not(.on) + span:not(.on)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.captions-modes .on {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.captions-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

/* The symbols of the app, drawn for the dark window: two speech bubbles with A and 文,
   two pages, and the arrow of a menu. */
.captions-menu i {
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-translate {
  width: 17px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 1h6A2.5 2.5 0 0 1 12 3.5V7a2.5 2.5 0 0 1-2.5 2.5h-4L3 12V9.4A2.5 2.5 0 0 1 1 7V3.5A2.5 2.5 0 0 1 3.5 1z' stroke='%23dfdfe0' stroke-width='1.2'/%3E%3Cpath d='M3.8 7.2l1.8-4.6 1.8 4.6M4.4 5.7h2.4' stroke='%23dfdfe0' stroke-width='1.1'/%3E%3Cpath d='M10.5 5.5h6A2.5 2.5 0 0 1 19 8v3.5a2.5 2.5 0 0 1-2.1 2.5V16l-2.6-2h-3.8A2.5 2.5 0 0 1 8 11.5V8a2.5 2.5 0 0 1 2.5-2.5z' fill='%23dfdfe0' stroke='%2328282c' stroke-width='1.2'/%3E%3Cpath d='M13.5 7.2v.9M11 8.6h5M11.9 8.6c.6 2 2.2 3.2 3.8 3.9M15.1 8.6c-.6 2-2.2 3.2-3.8 3.9' stroke='%2328282c' stroke-width='1'/%3E%3C/svg%3E");
}

.icon-copy {
  width: 12px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' stroke='%23dfdfe0' stroke-width='1.2'%3E%3Crect x='4.6' y='.6' width='8.8' height='11' rx='2' fill='none'/%3E%3Crect x='.6' y='4.4' width='8.8' height='11' rx='2' fill='%2328282c'/%3E%3C/svg%3E");
}

.icon-chevron {
  width: 7px;
  height: 5px;
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' fill='none' stroke='%23dfdfe0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l3 3 3-3'/%3E%3C/svg%3E");
}

/* In a narrow window the app shows the display mode as a pop up menu with the chosen mode
   and two arrows. The container is .captions, and each language turns to the menu where its
   three modes, its language and Copy no longer fit on one line, with a few pixels to spare
   for other fonts. */
.captions-modes .on::after {
  content: "";
  display: var(--modes-arrows, none);
  width: 6px;
  height: 10px;
  margin-left: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3.5l2-2 2 2M1 6.5l2 2 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
}

@container (max-width: 306px) {
  .captions-bar:lang(es) {
    --modes-others: none;
    --modes-arrows: block;
    --modes-track: none;
    --modes-padding: 0;
  }
}

@container (max-width: 288px) {
  .captions-bar:lang(en) {
    --modes-others: none;
    --modes-arrows: block;
    --modes-track: none;
    --modes-padding: 0;
  }
}

@container (max-width: 230px) {
  .captions-bar:lang(zh),
  .captions-bar:lang(ja) {
    --modes-others: none;
    --modes-arrows: block;
    --modes-track: none;
    --modes-padding: 0;
  }
}

.caption + .caption {
  margin-top: 10px;
}

.meet-stage .caption-original {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.meet-stage .caption-translation {
  font-size: 17px;
  line-height: 1.35;
}

.meet-stage .meet-said {
  margin-bottom: 18px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.call {
  width: 100%;
  min-height: 0;
}

.meet-stage .call-label {
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.meet-stage .call-heard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--window-line);
}

.level {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 1.5em;
}

.level i {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--live);
}

/* Each bar rests at its own height, and the voice animation starts and ends there. */
.level i { transform: scaleY(var(--h, 1)); }
.level i:nth-of-type(1) { --h: 0.45; }
.level i:nth-of-type(2) { --h: 0.9; }
.level i:nth-of-type(3) { --h: 0.6; }
.level i:nth-of-type(4) { --h: 1; }
.level i:nth-of-type(5) { --h: 0.5; }

@keyframes enable {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@keyframes voice {
  0%, 100% { transform: scaleY(var(--h, 1)); }
  35% { transform: scaleY(1); }
  70% { transform: scaleY(0.25); }
}

.meet-stage .call-mic {
  font-size: 13px;
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid var(--window-line);
}

.call-mic span {
  font-weight: 400;
  color: var(--muted);
  margin-right: 4px;
}

.closing {
  text-align: center;
}

.closing h2 {
  margin-bottom: 20px;
}

footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  padding: 20px 0 32px;
}

footer p {
  margin: 0 0 6px;
}

/* Reveal on scroll. Only with script, which adds the js class, and only
   when motion is welcome. Transform and opacity do not move the layout. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .js .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* Meeting Interpretation: each caption, then its translation. Then the spoken
     line, and what the call hears. */
  .js .meet-part.in .caption-original,
  .js .meet-part.in .caption-translation,
  .js .meet-part.in .meet-said,
  .js .meet-part.in .call-label,
  .js .meet-part.in .call-heard {
    animation: paste 0.4s var(--ease) both;
  }

  .js .meet-part.in .caption:nth-of-type(1) .caption-original { animation-delay: 0.6s; }
  .js .meet-part.in .caption:nth-of-type(1) .caption-translation { animation-delay: 1.3s; }
  .js .meet-part.in .caption:nth-of-type(2) .caption-original { animation-delay: 2.3s; }
  .js .meet-part.in .caption:nth-of-type(2) .caption-translation { animation-delay: 3s; }
  .js .meet-part.in .meet-said { animation-delay: 0.6s; }
  /* Copy works once the first sentence is there. */
  .js .meet-part.in .captions-copy {
    animation: enable 0.2s var(--ease) 0.6s both;
  }
  .js .meet-part.in .call-label,
  .js .meet-part.in .call-heard { animation-delay: 2.2s; }

  .js .meet-part.in .level i {
    animation: voice 0.9s ease-in-out 2.2s 4;
  }

  .js .meet-part.in .level i:nth-of-type(2) { animation-delay: 1.9s; }
  .js .meet-part.in .level i:nth-of-type(3) { animation-delay: 1.6s; }
  .js .meet-part.in .level i:nth-of-type(4) { animation-delay: 2.05s; }
  .js .meet-part.in .level i:nth-of-type(5) { animation-delay: 1.75s; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Three demos need about 300 pixels each. Below that they stack. */
@media (max-width: 980px) {
  .demos {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 28px;
  }
}

/* The caption window needs about 300 pixels. Below that the two parts stack. */
@media (max-width: 760px) {
  .meet {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 16px;
  }

  .topbar nav .optional {
    display: none;
  }

  .hero {
    padding: 48px 0 32px;
  }

  .app-icon {
    width: 72px;
    height: 72px;
  }

  .band {
    padding: 64px 0;
  }

  h2 {
    margin-bottom: 32px;
  }

  .tiles,
  .split {
    grid-template-columns: 1fr;
  }

  .demos {
    margin-top: 40px;
    gap: 28px;
  }

  .demo-stage {
    padding: 20px 14px 0;
  }

  .demo-said {
    font-size: 15px;
  }

  .meet-stage {
    min-height: 0;
    padding: 20px 12px;
  }

  .captions {
    padding: 10px 10px 14px;
  }

  .statement {
    margin-top: -16px;
  }
}