/* Continuation of the incumbent cloud landing page, calibrated against Lemon and Sprecho.
   1100px stage; centered serif section titles; Inter product UI; 96/64px section rhythm. */
.skip-link:not(:focus) { visibility: hidden; }
.continuation { --flow-ink: #171a1c; --flow-muted: #59626a; --flow-paper: #fdfbf7; position: relative; z-index: 4; color: var(--flow-ink); background: var(--flow-paper); }
.continuation * { box-sizing: border-box; }
.continuation [hidden] { display: none !important; }
.continuation button { font: inherit; cursor: pointer; }
.continuation [id] { scroll-margin-top: 36px; }
.continuation ::selection { background: #f5ff27; color: #101010; }
.continuation :focus-visible { outline: 3px solid #255c84; outline-offset: 5px; }
.flow-shell { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.flow-section { padding-block: 96px; }
.flow-heading { max-width: 830px; text-align: center; margin: 0 auto 52px; }
.flow-heading h2 { font: 700 clamp(40px, 3.35vw, 48px)/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.flow-heading h2 > span { position: relative; white-space: nowrap; isolation: isolate; }
.flow-heading h2 > span::after { position: absolute; content: ''; z-index: -1; left: 2px; right: 0; bottom: 1px; height: 4px; border-radius: 65% 20% 65% 25%; background: #f6c427; transform: rotate(-.7deg); }
.flow-heading > p { font-size: 17px; line-height: 1.55; color: var(--flow-muted); margin: 22px auto 0; max-width: 680px; }
.flow-arrow { display: inline-block; position: relative; width: 22px; height: 12px; flex: 0 0 22px; }
.flow-arrow::before { content: ''; position: absolute; top: 6px; left: 0; width: 21px; height: 1px; background: currentColor; }
.flow-arrow::after { content: ''; position: absolute; right: 1px; top: 3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.scene-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.scene-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 500; }
.scene-chip img { width: 18px; height: 18px; }
.scene-example { font-size: 10px; font-weight: 400; color: #637481; }
.window-heading { height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #e3e7e9; color: #62717c; font-size: 10px; }
.window-heading > :last-child { margin-left: auto; }
.window-lights { display: inline-flex; gap: 5px; align-items: center; }
.window-lights i { width: 6px; height: 6px; border-radius: 50%; background: #ff625b; }
.window-lights i:nth-child(2) { background: #f7c13b; }
.window-lights i:nth-child(3) { background: #39c88a; }
.mini-check { display: inline-block; width: 13px; height: 13px; border: 1px solid #579782; border-radius: 50%; position: relative; flex: 0 0 13px; }
.mini-check::after { content: ''; position: absolute; width: 5px; height: 3px; border-left: 1px solid #36765f; border-bottom: 1px solid #36765f; top: 3px; left: 3px; transform: rotate(-45deg); }
.voice-bars { display: inline-flex; align-items: center; justify-content: center; height: 28px; gap: 3px; }
.voice-bars i { display: block; height: 7px; width: 2px; border-radius: 3px; background: currentColor; }
.voice-bars i:nth-child(3n+2) { height: 21px; }
.voice-bars i:nth-child(3n) { height: 13px; }
.voice-bars i:nth-child(4) { height: 28px; }
.flow-captions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; margin-top: 28px; padding: 0 16px; }
.flow-captions h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.flow-captions p { margin: 0; color: var(--flow-muted); font-size: 14px; line-height: 1.6; max-width: 32ch; }
.flow-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -12px auto 22px; }
.flow-tabs button { border: 1px solid #dce3e7; background: #fff; color: #526470; border-radius: 22px; padding: 11px 18px; min-height: 43px; font-size: 12px; font-weight: 500; box-shadow: 0 3px 7px #2b405408; transition: background .2s, color .2s; }
.flow-tabs button:hover { background: #e8f5fd; }
.flow-tabs button[aria-pressed="true"], .flow-tabs button[aria-selected="true"] { background: #10212b; color: #fff; border-color: #10212b; }
.flow-footnote { text-align: center; color: #62717a; font-size: 11px; line-height: 1.6; margin: 20px auto 0; max-width: 700px; }

/* A document becomes a shared vocabulary, then a completed sentence. */
.knowledge-flow { padding-top: 56px; }
.knowledge-scene { position: relative; isolation: isolate; padding: 30px 40px 34px; min-height: 548px; overflow: hidden; border-radius: 28px; background: #cce9f9; }
.knowledge-scene > .scene-backdrop { z-index: -1; }
.knowledge-scene-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #254960; }
.knowledge-path { display: grid; grid-template-columns: 252px 1fr 426px; align-items: center; max-width: 810px; margin: 30px auto 28px; }
.source-document { position: relative; background: #fffefa; padding: 19px 22px 0; border-radius: 5px 5px 12px 12px; box-shadow: 0 16px 38px -15px #25557650; transform: rotate(-5deg); }
.source-document::before { content: ''; position: absolute; inset: 6px -5px -6px 6px; z-index: -1; background: #fbfcfa; border-radius: 5px; transform: rotate(3deg); box-shadow: 0 3px 10px #36638418; }
.document-top { display: flex; align-items: center; gap: 7px; font-size: 9px; color: #506a7b; }
.document-top > :last-child { margin-left: auto; }
.file-symbol { display: inline-block; width: 12px; height: 15px; border: 1px solid #7c929e; border-radius: 1px; }
.source-document h3 { margin: 22px 0 5px; font: 700 22px/1.2 Georgia, serif; color: #25313a; }
.source-document > p { font-size: 9px; color: #506a7b; margin: 0; }
.document-preview { display: grid; gap: 9px; margin: 20px 0; }
.document-preview > i { display: block; width: 100%; height: 3px; background: #e8e8e2; border-radius: 1px; }
.document-preview > i:nth-child(2n) { width: 82%; }
.document-preview > div { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.document-preview mark { background: #fbefad; padding: 2px 4px; color: #34392f; }
.source-document footer { display: flex; align-items: center; gap: 7px; padding: 12px 0; border-top: 1px solid #e7e9e4; font-size: 9px; color: #687772; }
.knowledge-connector { display: flex; align-items: center; justify-content: center; color: #567c98; }
.knowledge-connector > i { width: 23px; height: 1px; border-top: 1px dashed #8eaec6; }
.knowledge-connector .flow-arrow { margin: 0 6px; }
.vocabulary-window { background: #ffffffec; border: 1px solid #fff; border-radius: 15px; box-shadow: 0 18px 40px -18px #28587450; }
.window-check { color: #356b56; font-size: 9px; padding: 3px 7px; border-radius: 12px; background: #edf7f1; }
.vocabulary-caption { padding: 23px 24px 14px; font-size: 12px; font-weight: 500; color: #3d4f5d; }
.team-terms { margin: 0 24px; }
.team-terms > div { display: grid; grid-template-columns: 65px 1fr 16px; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #e2e9ed; font-size: 13px; }
.team-terms dt { font-weight: 600; color: #324c61; }
.team-terms dd { margin: 0; color: #586e7c; }
.vocabulary-window footer { display: flex; align-items: center; gap: 12px; padding: 19px 24px; font-size: 10px; color: #637582; }
.member-dots { display: flex; padding-left: 4px; }
.member-dots b { width: 23px; height: 23px; border: 2px solid #fff; margin-left: -4px; border-radius: 50%; background: #dbe9ee; color: #466779; display: grid; place-items: center; font-size: 6px; font-weight: 500; }
.member-dots b:nth-child(2) { background: #eae8db; color: #665a2e; }
.member-dots b:nth-child(3) { background: #deece3; color: #416a55; }
.knowledge-dictation { position: relative; display: grid; grid-template-columns: .9fr 24px 1.1fr; align-items: center; gap: 22px; max-width: 910px; margin: 0 auto; padding: 18px 22px; border-radius: 14px; background: #ffffffee; box-shadow: 0 12px 28px -20px #243e57; }
.dictation-sentence { display: flex; align-items: center; gap: 15px; }
.dictation-sentence .voice-bars { color: #467798; flex-shrink: 0; }
.dictation-sentence p { color: #576a77; font-size: 13px; line-height: 1.6; margin: 0; }
.dictation-sentence b { font-weight: 600; }
.expanded-sentence { color: #243b4a; margin: 0; font-size: 14px; line-height: 1.65; }
.expanded-sentence mark { background: #f6edab; padding: 1px 2px; border-radius: 3px; color: inherit; }

/* One recognizable app window, with the feature list explaining what changes. */
.personal-flow { background: #f3f7fa; }
.feature-tour { display: grid; grid-template-columns: 350px 1fr; gap: 52px; align-items: center; }
.feature-menu { display: grid; gap: 14px; }
.feature-menu button { padding: 20px; border: 1px solid transparent; background: transparent; color: #4f606c; display: flex; gap: 15px; text-align: left; border-radius: 14px; min-height: 73px; transition: background .2s, box-shadow .2s; }
.feature-menu button[aria-selected="true"] { background: #fff; box-shadow: 0 8px 25px -16px #22465e55; border-color: #e3ebef; color: #142d3e; }
.feature-menu button:hover { background: #ffffffa8; }
.feature-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 30px; color: #466b84; background: #e4eff5; font-size: 13px; }
.feature-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.feature-menu b { display: block; font-size: 15px; font-weight: 500; padding-top: 5px; }
.feature-menu small { display: none; margin-top: 10px; font-size: 13px; line-height: 1.6; max-width: 31ch; }
.feature-menu [aria-selected="true"] small { display: block; }
.feature-preview-wrap { position: relative; padding: 25px 0; }
.feature-preview-wrap::before { position: absolute; content: ''; z-index: 0; left: 3%; right: 0; top: 8%; bottom: 4%; border-radius: 50%; background: #b3d7eb50; filter: blur(40px); }
.feature-preview { position: relative; background: #fff; border-radius: 16px; min-height: 414px; overflow: hidden; box-shadow: 0 20px 45px -23px #2c5c7b45; }
.feature-content { padding: 24px 27px 20px; min-height: 320px; }
.feature-content-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.feature-content-heading h3 { font-size: 15px; line-height: 1.4; font-weight: 500; margin: 0; }
.feature-content-heading > span { background: #edf5f8; border-radius: 4px; padding: 4px 7px; font-size: 9px; white-space: nowrap; color: #537284; }
.dictionary-table > div { display: grid; grid-template-columns: 1fr 1fr 14px; gap: 12px; align-items: center; border-bottom: 1px solid #e9edf0; padding: 13px 0; font-size: 12px; color: #536b7a; }
.dictionary-table > div:first-child { color: #506a7b; font-size: 9px; padding-top: 0; }
.dictionary-table strong { font-weight: 500; color: #284557; }
.feature-result { background: #f4f8fa; margin-top: 23px; padding: 14px 17px; border-radius: 8px; }
.feature-result small { color: #506a7b; font-size: 10px; }
.feature-result p { font-size: 13px; line-height: 1.6; margin: 10px 0 0; }
.feature-result mark { color: #24536d; background: #dfedf5; padding: 1px 3px; border-radius: 3px; }
.feature-status { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 47px; color: #506a7b; font-size: 10px; }
.feature-status .voice-bars { transform: scale(.7); }
.style-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 25px; }
.style-options span { font-size: 11px; border-radius: 5px; padding: 7px 10px; background: #edf3f6; color: #5b7484; }
.style-options span:first-child { background: #17364a; color: #fff; }
.style-mail { border-top: 1px solid #e5ecef; padding-top: 18px; }
.style-mail small { font-size: 10px; color: #506a7b; }
.style-mail p { font-size: 14px; line-height: 1.7; }
.snippet-trigger { display: inline-block; padding: 8px 13px; border-radius: 6px; border: 1px solid #c4d6e1; color: #2e607e; font-size: 13px; margin: 4px 0 18px; }

.prompt-flow { background: #fdfbf7; }
.prompt-scene { position: relative; isolation: isolate; border-radius: 28px; overflow: hidden; background: #c8e8fb; padding: 36px 36px 28px; }
.prompt-scene > img { z-index: -1; object-position: center 70%; filter: saturate(.76) brightness(1.08); }
.prompt-scene-caption { text-align: center; }
.prompt-scene-caption h3 { font: 700 24px/1.25 Georgia, serif; letter-spacing: -.02em; margin: 0; color: #213d52; }
.prompt-scene-caption p { margin: 12px 0 0; font-size: 13px; color: #456982; }
.prompt-scene-grid { display: grid; grid-template-columns: .9fr 38px 1.12fr; gap: 24px; align-items: center; margin: 36px 0 22px; }
.spoken-window { color: #f7fafc; background: #102330; border: 1px solid #284554; border-radius: 17px; box-shadow: 0 19px 32px -20px #203e5980; }
.spoken-window header { display: flex; align-items: center; padding: 16px 20px; gap: 12px; font-size: 10px; color: #c0d2dd; }
.spoken-window header .voice-bars { color: #f5ff27; }
.spoken-window header > :last-child { margin-left: auto; color: #a5bcca; font-size: 9px; }
.spoken-window blockquote { margin: 8px 24px 25px; font-size: 19px; line-height: 1.55; letter-spacing: -.01em; min-height: 166px; }
.spoken-window footer { padding: 16px 24px; border-top: 1px solid #344653; font-size: 10px; color: #b7c9d3; line-height: 1.6; }
.prompt-convert { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f5ff27; color: #182b37; box-shadow: 0 6px 14px #354b5218; }
.prompt-result-window { background: #fffffff5; border-radius: 15px; overflow: hidden; box-shadow: 0 18px 45px -22px #315b7790; }
.prompt-result { padding: 18px 25px 12px; min-height: 268px; }
.prompt-result p { font-size: 13px; line-height: 1.65; margin: 0 0 14px; }
.prompt-result p b { font-weight: 600; }
.prompt-result-window footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #e5eaf0; padding: 13px 18px; color: #506a7b; font-size: 9px; }
.prompt-result-window footer button { border: 1px solid #d2dfe8; background: #f7fafc; border-radius: 6px; min-height: 38px; padding: 9px 11px; color: #2c4f67; font-size: 10px; display: inline-flex; align-items: center; gap: 10px; }
.prompt-result-window footer button:hover { background: #e8f2f9; }
.prompt-result-window footer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.prompt-scene-foot { text-align: center; margin: 18px 0 0; font-size: 11px; color: #466780; }

.work-flow { background: #f2f7fa; }

.privacy-flow { background: #fdfbf7; }
.privacy-scene { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.europe-cloud { padding: 48px 24px 30px; position: relative; display: flex; align-items: center; flex-direction: column; min-height: 374px; border-radius: 26px; overflow: hidden; isolation: isolate; }
.europe-cloud::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/hero-sky-desktop-v9.webp') center 75% / cover; opacity: .58; }
.europe-cloud > img { width: 172px; height: 172px; object-fit: contain; filter: drop-shadow(0 9px 17px #3d6f8818); }
.europe-cloud > span { margin-top: 18px; font-size: 15px; font-weight: 500; color: #2f5269; }
.eu-route { display: flex; align-items: center; gap: 15px; margin-top: 25px; color: #51788f; font-size: 11px; }
.eu-route i { display: block; width: 55px; height: 1px; border-top: 1px dashed #83a4b8; }
.privacy-explained { display: grid; gap: 28px; }
.privacy-explained article { display: flex; align-items: start; gap: 18px; }
.privacy-symbol { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: #eaf3f9; color: #5e849d; flex: 0 0 37px; }
.privacy-symbol svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.privacy-explained h3 { font-size: 16px; line-height: 1.4; font-weight: 500; margin: 0 0 9px; }
.privacy-explained p { margin: 0; font-size: 14px; line-height: 1.65; color: #60717c; }
.flow-text-link { display: flex; justify-content: center; align-items: center; gap: 14px; width: fit-content; margin: 30px auto 0; color: #496777; font-size: 12px; text-underline-offset: 4px; }

.faq-flow { background: #f3f7fa; }
.flow-faq { max-width: 780px; margin-inline: auto; display: grid; gap: 10px; }
.flow-faq details { background: #fff; border: 1px solid #e6ecef; border-radius: 12px; overflow: hidden; }
.flow-faq summary { list-style: none; padding: 21px 54px 21px 23px; cursor: pointer; position: relative; font-size: 14px; font-weight: 500; line-height: 1.5; }
.flow-faq summary::-webkit-details-marker { display: none; }
.flow-faq summary:focus-visible { outline: 3px solid #255c84; outline-offset: -5px; border-radius: 11px; }
.flow-faq summary::after { content: ''; position: absolute; right: 23px; top: 26px; width: 7px; height: 7px; border-right: 1px solid #708998; border-bottom: 1px solid #708998; transform: rotate(45deg); transition: transform .2s; }
.flow-faq details[open] summary::after { transform: rotate(225deg); }
.flow-faq details p { padding: 0 40px 24px 23px; font-size: 14px; line-height: 1.7; color: #5f7482; margin: 0; }

@media (max-width: 1000px) {
  .knowledge-path { grid-template-columns: 220px minmax(32px, 1fr) minmax(0, 380px); }
  .knowledge-scene { padding-inline: 28px; }
  .feature-tour { grid-template-columns: 300px 1fr; gap: 30px; }
  .feature-menu button { padding: 16px; }
  .feature-content-heading { flex-wrap: wrap; }
  .prompt-scene { padding-inline: 26px; }
  .prompt-scene-grid { gap: 15px; grid-template-columns: .9fr 32px 1.1fr; }
  .prompt-convert { width: 32px; height: 32px; }
  .spoken-window blockquote { font-size: 17px; }
  .privacy-scene { gap: 40px; }
}
@media (max-width: 760px) {
  .flow-shell { width: calc(100% - 32px); }
  .flow-section { padding-block: 64px; }
  .knowledge-flow { padding-top: 40px; }
  .flow-heading { margin-bottom: 34px; padding-inline: 3px; }
  .flow-heading h2 { font-size: clamp(32px, 8.8vw, 40px); line-height: 1.1; }
  .flow-heading h2 > span { white-space: normal; }
  .flow-heading h2 > span::after { height: 3px; }
  .flow-heading > p { margin-top: 18px; font-size: 14px; line-height: 1.6; max-width: 42ch; }
  .desktop-break { display: none; }
  .knowledge-scene { padding: 22px 18px; border-radius: 22px; }
  .knowledge-scene > img { object-position: 55% center; }
  .scene-chip { font-size: 10px; gap: 6px; }
  .knowledge-scene-top > .scene-example { display: none; }
  .knowledge-path { grid-template-columns: 1fr; margin: 29px auto 22px; max-width: 410px; }
  .source-document { width: 215px; justify-self: center; padding-inline: 20px; }
  .document-preview { gap: 7px; margin: 14px 0; }
  .source-document h3 { margin-top: 14px; font-size: 21px; }
  .knowledge-connector { height: 45px; transform: rotate(90deg); }
  .knowledge-connector > i { width: 10px; }
  .vocabulary-window { width: 100%; }
  .vocabulary-window .window-heading { padding-inline: 13px; gap: 8px; font-size: 9px; }
  .vocabulary-caption { padding: 18px 16px 8px; font-size: 11px; }
  .team-terms { margin-inline: 16px; }
  .team-terms > div { grid-template-columns: 42px 1fr 14px; gap: 10px; font-size: 11px; }
  .vocabulary-window footer { padding: 15px 16px; gap: 9px; font-size: 9px; }
  .knowledge-dictation { grid-template-columns: 1fr; gap: 13px; padding: 18px; }
  .knowledge-dictation > .flow-arrow { transform: rotate(90deg); justify-self: center; }
  .dictation-sentence { gap: 12px; }
  .dictation-sentence p { font-size: 12px; }
  .expanded-sentence { font-size: 14px; }
  .flow-captions { grid-template-columns: 1fr; gap: 20px; padding: 0 8px; margin-top: 25px; }
  .flow-captions > div { display: grid; grid-template-columns: 137px 1fr; gap: 12px; }
  .flow-captions h3 { font-size: 13px; line-height: 1.5; margin: 0; }
  .flow-captions p { font-size: 12px; line-height: 1.55; }
  .feature-tour { grid-template-columns: 1fr; gap: 22px; }
  .feature-menu { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .feature-menu button { min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 11px 5px; min-height: 82px; border-radius: 11px; }
  .feature-menu b { padding-top: 0; font-size: 10px; }
  .feature-menu small, .feature-menu [aria-selected="true"] small { display: none; }
  .feature-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .feature-preview-wrap { padding: 0; }
  .feature-content { padding: 22px 19px 15px; min-height: 355px; }
  .feature-content-heading { gap: 9px; margin-bottom: 23px; }
  .feature-content-heading h3 { font-size: 14px; }
  .dictionary-table > div { font-size: 11px; }
  .feature-result { padding-inline: 13px; }
  .feature-result p { font-size: 12px; }
  .flow-tabs { margin-top: -6px; margin-bottom: 20px; gap: 7px; }
  .flow-tabs button { font-size: 10px; padding: 10px 12px; min-height: 40px; }
  .prompt-scene { padding: 27px 18px 22px; border-radius: 22px; }
  .prompt-scene-caption h3 { font-size: 23px; }
  .prompt-scene-caption p { font-size: 12px; line-height: 1.5; }
  .prompt-scene-grid { grid-template-columns: 1fr; gap: 18px; margin: 25px 0 20px; }
  .spoken-window header { padding: 13px 18px; }
  .spoken-window blockquote { font-size: 17px; margin: 8px 20px 23px; min-height: 0; }
  .spoken-window footer { font-size: 9px; padding: 13px 20px; }
  .prompt-convert { justify-self: center; transform: rotate(90deg); }
  .prompt-result { padding: 20px; min-height: 0; }
  .prompt-result p { font-size: 12px; }
  .prompt-result-window .window-heading { padding-inline: 14px; gap: 8px; font-size: 9px; }
  .prompt-result-window footer { gap: 8px; padding: 12px; }
  .prompt-result-window footer button { font-size: 9px; padding-inline: 9px; }
  .prompt-scene-foot { font-size: 10px; line-height: 1.6; }
  .flow-footnote { font-size: 10px; max-width: 44ch; }
  .privacy-scene { grid-template-columns: 1fr; gap: 32px; }
  .europe-cloud { min-height: 280px; padding: 28px 20px; }
  .europe-cloud > img { width: 128px; height: 128px; }
  .europe-cloud > span { font-size: 14px; }
  .privacy-explained { gap: 25px; padding-inline: 6px; }
  .privacy-explained article { gap: 14px; }
  .privacy-explained h3 { font-size: 14px; margin-bottom: 7px; }
  .privacy-explained p { font-size: 13px; }
  .flow-text-link { font-size: 11px; gap: 9px; }
  .flow-faq summary { padding: 19px 40px 19px 18px; font-size: 13px; }
  .flow-faq summary::after { right: 18px; top: 24px; }
  .flow-faq details p { padding: 0 23px 22px 18px; font-size: 13px; }
}
@media (max-width: 370px) {
  .flow-heading h2 { font-size: 32px; }
  .flow-captions > div { grid-template-columns: 113px 1fr; }
  .knowledge-scene { padding-inline: 13px; }
  .team-terms > div { font-size: 10px; gap: 7px; grid-template-columns: 33px 1fr 12px; }
  .vocabulary-window footer { flex-wrap: wrap; }
  .scene-chip { font-size: 9px; }
  .prompt-result-window footer { flex-wrap: wrap; }
}
/* Visible everyday scenes: photographs carry the setting, HTML carries the product. */
.people-strip { position: relative; z-index: 3; text-align: center; padding: 0 0 85px; color: #60666a; }
.people-strip > p { font-size: 13px; margin: 0 0 30px; }
.people-names { display: flex; align-items: center; justify-content: space-between; gap: 32px; list-style: none; padding: 0; margin: 0 auto 25px; max-width: 1030px; color: #52616a; }
.people-names li { white-space: nowrap; }
.name-siemens { font-weight: 750; font-size: 24px; letter-spacing: .01em; }
.name-kws { font-weight: 800; font-size: 27px; letter-spacing: -.06em; }
.name-kws small { font-size: 12px; letter-spacing: .01em; }
.name-salesforce { font-size: 23px; font-weight: 550; letter-spacing: -.055em; }
.name-dropbox { font-size: 25px; font-weight: 650; letter-spacing: -.06em; }
.name-tum { font-size: 30px; font-weight: 850; letter-spacing: -.06em; }
.name-leibniz { text-align: left; font-size: 12px; line-height: 1.3; }
.name-leibniz b { font-size: 18px; font-weight: 500; }
.people-strip > small { display: block; font-size: 10px; line-height: 1.6; color: #66717a; }
.how-flow { padding-top: 64px; }
.how-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.how-card { border: 1px solid #e5e9eb; border-radius: 22px; overflow: hidden; background: #fff; }
.how-art { height: 226px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; position: relative; isolation: isolate; }
.how-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/app-clouds-v1.webp') center 80% / cover; }
.how-shortcut::before { filter: hue-rotate(8deg); background-position: 20% 72%; }
.how-speak::before { background-position: 65% 85%; }
.how-done::before { background-position: right bottom; filter: saturate(.6) brightness(1.12); }
.shortcut-keys { display: flex; align-items: center; gap: 15px; transform: rotate(-6deg); }
.shortcut-keys > span { color: #5a6370; font-size: 18px; }
.shortcut-keys kbd { display: flex; align-items: center; justify-content: center; gap: 8px; width: 92px; height: 82px; border-radius: 15px; background: #fffddd; color: #41402f; font: 500 20px/1 Inter,sans-serif; border: 1px solid #f5eed0; border-bottom: 5px solid #d9d4b4; box-shadow: 0 15px 22px -9px #54617a50; }
.shortcut-keys svg { width: 19px; height: 19px; }
.hold-hint { font-size: 11px; color: #435467; margin-top: 7px; }
.how-voice { width: calc(100% - 44px); border-radius: 13px; background: #172632; color: #fff; padding: 17px 20px; box-shadow: 0 14px 23px -12px #263c6980; transform: rotate(2deg); }
.how-voice > div { display: flex; align-items: center; gap: 12px; color: #dde5eb; font-size: 10px; }
.how-voice .voice-bars { color: #f5ff27; height: 22px; transform: scale(.7); transform-origin: left; margin-right: -8px; }
.how-voice p { font-size: 16px; line-height: 1.6; margin: 13px 0 18px; }
.voice-progress { display: block; height: 2px; background: #637781; width: 100%; border-radius: 3px; }
.voice-progress::before { content: ''; display: block; height: 2px; background: #f5ff27; width: 68%; }
.how-message { width: calc(100% - 48px); background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 12px 28px -16px #47628190; transform: rotate(-2deg); }
.how-message header { display: flex; align-items: center; gap: 9px; font-size: 10px; color: #536b6c; }
.how-message p { font-size: 16px; line-height: 1.65; margin: 18px 0 0; }
.text-cursor { display: inline-block; vertical-align: text-bottom; width: 2px; height: 17px; background: #d7b91a; margin-left: 4px; }
.how-copy { position: relative; padding: 25px 23px 29px; }
.step-number { font-size: 11px; color: #657681; font-variant-numeric: tabular-nums; }
.how-copy h3 { font: 600 16px/1.4 Inter,sans-serif; margin: 11px 0 10px; letter-spacing: -.025em; }
.how-copy p { font-size: 13px; line-height: 1.65; margin: 0; color: #5e6b74; }
.how-copy b { font-weight: 500; }
.apps-flow { background: #f1f6fa; }
.apps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.app-card { border-radius: 23px; overflow: hidden; background: #fff; border: 1px solid #e2e9ef; }
.app-art { height: 370px; padding: 23px 20px 0; position: relative; isolation: isolate; overflow: hidden; background: #d5d5f6; }
.app-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('assets/app-clouds-v1.webp') center bottom / cover; mix-blend-mode: luminosity; opacity: .8; }
.app-teams .app-art { background: #b8b7f1; }
.app-slack .app-art { background: #b87caa; }
.app-outlook .app-art { background: #86c4eb; }
.app-badge { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 24px; color: #303359; font-size: 12px; font-weight: 600; min-height: 24px; }
.app-badge-slack { color: #50244a; font-size: 17px; font-weight: 650; letter-spacing: -.04em; }
.app-outlook .app-badge { color: #144a70; }
.app-window { position: relative; background: #fff; border-radius: 11px; box-shadow: 0 18px 35px -20px #243e6660; color: #293342; }
.app-window > header { padding: 15px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e7e8ec; font-size: 11px; }
.app-window > header > span:last-child { margin-left: auto; }
.app-avatar { width: 26px; height: 26px; flex: 0 0 26px; background: #e4e0f4; color: #5b4d85; font-size: 11px; display: grid; place-items: center; border-radius: 7px; font-weight: 500; }
.teams-window { transform: rotate(-2deg); background: #fbfbff; }
.teams-window header { background: #f5f4fe; border-radius: 11px 11px 0 0; }
.teams-window header b { font-size: 11px; font-weight: 600; }
.teams-window header small { display: block; font-size: 9px; color: #666580; margin-top: 3px; }
.teams-window header i { width: 7px; height: 7px; border-radius: 50%; background: #409277; margin-left: auto; }
.incoming-chat { margin: 18px 40px 12px 13px; padding: 10px 12px; border-radius: 0 9px 9px; background: #eeeef5; font-size: 11px; line-height: 1.5; }
.outgoing-chat { margin: 0 13px 18px 34px; padding: 13px; border-radius: 9px 0 9px 9px; background: #e3e1fb; font-size: 12px; line-height: 1.6; }
.app-window footer { display: flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 9px; color: #57566f; border-top: 1px solid #e8e8f1; }
.app-window footer .voice-bars { height: 20px; transform: scale(.6); margin: 0 -6px; color: #62599b; }
.slack-window { transform: translateY(10px) rotate(1.5deg); }
.slack-window > header { background: #4a2448; border: 0; color: #fff; border-radius: 11px 11px 0 0; }
.slack-window > header b { font-size: 11px; font-weight: 600; }
.slack-window > header span { font-size: 9px; color: #e6cde0; }
.slack-message { display: flex; gap: 10px; padding: 21px 14px 20px; }
.slack-message .app-avatar { background: #edf0e4; color: #5b6b43; }
.slack-message > div > b { font-size: 11px; font-weight: 600; }
.slack-message small { color: #70717a; font-size: 8px; font-weight: 400; margin-left: 6px; }
.slack-message p,.slack-message ul { font-size: 11px; line-height: 1.7; margin: 8px 0 0; }
.slack-message ul { padding-left: 14px; }
.outlook-window { transform: rotate(-1deg); }
.outlook-window > header { color: #fff; background: #166aa6; border-bottom: 0; border-radius: 11px 11px 0 0; }
.outlook-window dl { margin: 0; padding: 2px 15px; }
.outlook-window dl > div { display: flex; align-items: center; gap: 12px; font-size: 9px; padding: 10px 0; border-bottom: 1px solid #e5edf2; }
.outlook-window dt { color: #6b7b8a; width: 31px; }
.outlook-window dd { margin: 0; }
.outlook-window > p { font-size: 11px; line-height: 1.55; padding: 12px 15px; margin: 0; }
.outlook-window footer { justify-content: space-between; }
.mail-ready { color: #376484; font-size: 9px; }
.app-card-copy { padding: 24px 23px 28px; }
.app-card-copy h3 { font-size: 16px; letter-spacing: -.025em; line-height: 1.4; margin: 0 0 10px; font-weight: 600; }
.app-card-copy p { font-size: 13px; color: #5e6b74; line-height: 1.65; margin: 0; }
.knowledge-flow { padding-top: 96px; }
.work-flow { background: #f8f9f7; }
.work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 26px; }
.day-card { border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #e1e7e9; }
.day-art { aspect-ratio: 1.48; position: relative; overflow: hidden; }
.day-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.day-note { position: absolute; width: 246px; background: #fffffff7; border: 1px solid #ffffffc9; border-radius: 11px; box-shadow: 0 12px 25px -15px #27384180; overflow: hidden; }
.day-note > header { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; border-bottom: 1px solid #e5e9eb; padding: 12px 14px; color: #466071; }
.day-note > footer { padding: 10px 14px; display: flex; gap: 8px; align-items: center; font-size: 9px; color: #53707c; border-top: 1px solid #e6ecee; }
.day-note .voice-bars { height: 17px; transform: scale(.6); margin-inline: -7px; }
.day-note > p { font-size: 12px; line-height: 1.65; margin: 14px; }
.medical-note { left: 18px; bottom: 18px; transform: rotate(-2deg); }
.note-dot { width: 6px; height: 6px; border-radius: 50%; background: #5d9fbd; }
.medical-note dl { margin: 14px; }
.medical-note dl > div + div { margin-top: 13px; }
.medical-note dt { font-size: 9px; color: #667a88; margin-bottom: 5px; }
.medical-note dd { font-size: 12px; margin: 0; }
.legal-note { right: 18px; bottom: 20px; transform: rotate(2deg); background: #fffdf6; border-radius: 3px 11px 11px 3px; }
.legal-note > header { color: #776346; border-bottom-color: #ebe6d9; }
.legal-note > footer { border-top-color: #ebe6d9; color: #766b57; }
.paper-corner { width: 10px; height: 12px; border: 1px solid #9b8b6d; border-radius: 1px; }
.council-note { left: 18px; bottom: 20px; width: 270px; transform: rotate(-1deg); }
.council-note > header { background: #f1f5ef; color: #4c6250; }
.council-note > header > span { font-size: 8px; font-weight: 400; margin-left: auto; }
.term-pair { display: flex; align-items: center; gap: 9px; margin: 14px 14px 10px; font-size: 10px; }
.term-pair > span:first-child { border-radius: 4px; padding: 5px 6px; background: #e9efdf; color: #526b44; }
.term-pair .flow-arrow { transform: scale(.7); flex-basis: 17px; color: #7b8b71; }
.term-pair b { font-size: 10px; font-weight: 500; }
.council-note mark { background: #eef3e5; color: #405739; }
.office-note { right: 17px; top: 25px; width: 229px; border-radius: 13px 13px 13px 0; transform: rotate(2deg); }
.office-note > header { background: #f0f2fb; padding: 9px 12px; font-size: 9px; color: #585781; }
.office-note > p { color: #3b405b; font-size: 12px; }
.office-note .app-avatar { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
.day-copy { padding: 28px 30px 30px; }
.day-copy > span { font-size: 11px; color: #506a7b; }
.day-copy h3 { font: 700 29px/1.16 Georgia,serif; letter-spacing: -.025em; margin: 12px 0 16px; text-wrap: balance; }
.day-copy p { color: #5d6b73; font-size: 14px; line-height: 1.65; margin: 0; max-width: 48ch; }
.day-copy small { display: block; color: #65737b; font-size: 10px; line-height: 1.6; margin-top: 19px; }
.day-copy a { display: inline-block; font-size: 11px; color: #49667b; margin-top: 19px; text-underline-offset: 4px; text-decoration-color: #b4c1cb; }
.day-copy a span { margin-left: 7px; }
.love-flow { position: relative; isolation: isolate; background: #edf4fa; overflow: hidden; }
.love-flow::before { position: absolute; content: ''; inset: 0; z-index: -1; background: linear-gradient(#edf4faf2,#edf4faad), url('assets/app-clouds-v1.webp') center bottom / cover; }
.love-flow .flow-heading { margin-bottom: 28px; }
.love-draft-note { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; line-height: 1.6; text-align: center; color: #5c6d7c; margin: 0 auto 30px; }
.draft-dot { width: 6px; height: 6px; border-radius: 50%; background: #b69b35; flex: 0 0 6px; }
.love-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 22px; }
.love-card { margin: 0; padding: 25px 26px 20px; background: #fffdf7; border: 1px solid #e7e5dc; border-radius: 17px; box-shadow: 0 20px 30px -26px #3e5a8090; }
.love-doctor { margin-top: 24px; background: #fff; border-color: #e3eaf0; }
.love-ceo { margin-top: 8px; background: #f3f3ff; border-color: #e0dfed; }
.quote-mark { font: 70px/.8 Georgia,serif; display: block; height: 46px; color: #b29237; }
.love-doctor .quote-mark { color: #7197b4; }
.love-ceo .quote-mark { color: #8580b6; }
.love-card blockquote { margin: 0 0 26px; font: 400 21px/1.42 Georgia,serif; color: #303943; letter-spacing: -.012em; }
.love-card figcaption { display: flex; align-items: center; gap: 11px; }
.portrait-placeholder { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: #efecdf; flex: 0 0 39px; color: #8c856d; }
.love-doctor .portrait-placeholder { background: #e9f0f5; color: #7791a4; }
.love-ceo .portrait-placeholder { background: #e8e7f5; color: #8b87ac; }
.portrait-placeholder svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.love-card figcaption b { display: block; font-size: 11px; font-weight: 500; line-height: 1.5; }
.love-card figcaption small { display: block; font-size: 10px; color: #687584; margin-top: 4px; }
.quote-draft { display: block; font-size: 9px; color: #6e7580; margin: 20px 0 0; padding-top: 13px; border-top: 1px solid #dedfe3; }
@media (max-width: 1050px) {
  .people-names { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .people-names li { min-width: 25%; }
  .name-leibniz { text-align: center; }
  .apps-grid,.how-grid { gap: 15px; }
  .shortcut-keys { gap: 10px; }
  .shortcut-keys kbd { width: 69px; height: 65px; font-size: 16px; gap: 5px; border-radius: 12px; }
  .shortcut-keys svg { width: 15px; height: 15px; }
  .app-art { padding-inline: 12px; height: 405px; }
  .how-copy,.app-card-copy { padding-inline: 18px; }
  .how-copy h3,.app-card-copy h3 { font-size: 14px; }
  .day-art { aspect-ratio: 1.2; }
  .day-note { width: 220px; }
  .council-note { width: 220px; }
  .legal-note { width: 195px; }
  .office-note { width: 178px; right: 12px; top: 15px; }
  .office-note > p { font-size: 11px; margin: 10px; }
  .day-copy { padding: 24px; }
  .day-copy h3 { font-size: 26px; }
  .love-card { padding-inline: 20px; }
  .love-card blockquote { font-size: 19px; }
}
@media (max-width: 760px) {
  .people-strip { padding: 0 4px 60px; }
  .people-strip > p { font-size: 12px; margin-bottom: 25px; }
  .people-names { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px 16px; align-items: center; }
  .people-names li { min-width: 0; }
  .name-siemens { font-size: 16px; }
  .name-kws { font-size: 22px; }
  .name-kws small { font-size: 9px; }
  .name-salesforce { font-size: 17px; }
  .name-dropbox { font-size: 20px; }
  .name-tum { font-size: 25px; }
  .name-leibniz { font-size: 8px; }
  .name-leibniz b { font-size: 13px; }
  .people-strip > small { font-size: 9px; max-width: 45ch; margin-inline: auto; }
  .how-flow,.knowledge-flow { padding-top: 64px; }
  .how-grid,.apps-grid,.love-grid { grid-template-columns: 1fr; max-width: 470px; margin-inline: auto; gap: 20px; }
  .how-art { height: 210px; }
  .shortcut-keys { gap: 15px; }
  .shortcut-keys kbd { width: 92px; height: 82px; font-size: 20px; gap: 8px; border-radius: 15px; }
  .shortcut-keys svg { width: 19px; height: 19px; }
  .how-copy { padding: 23px; }
  .how-copy h3,.app-card-copy h3 { font-size: 17px; }
  .how-copy p,.app-card-copy p { font-size: 14px; }
  .how-voice,.how-message { max-width: 290px; }
  .app-art { height: auto; min-height: 360px; padding: 24px 25px 28px; }
  .app-window { max-width: 330px; margin-inline: auto; }
  .app-card-copy { padding: 24px; }
  .work-grid { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin-inline: auto; }
  .day-art { aspect-ratio: 1.25; }
  .day-art > img { object-position: center; }
  .day-note { width: 210px; }
  .medical-note { left: 12px; bottom: 12px; }
  .legal-note { right: 12px; bottom: 12px; width: 210px; }
  .council-note { width: 242px; left: 12px; bottom: 12px; }
  .day-note > header { font-size: 9px; padding: 10px 12px; }
  .day-note > p { font-size: 11px; margin: 11px 12px; }
  .medical-note dl { margin: 11px 12px; }
  .medical-note dd { font-size: 11px; }
  .medical-note dl > div + div { margin-top: 10px; }
  .day-note > footer { font-size: 8px; padding: 8px 12px; }
  .office-note { width: 158px; right: 11px; top: 17px; }
  .office-note > header { font-size: 8px; gap: 6px; }
  .office-note > p { font-size: 10px; line-height: 1.6; }
  .office-note .app-avatar { width: 18px; height: 18px; flex-basis: 18px; font-size: 8px; }
  .office-note > footer { gap: 6px; font-size: 8px; }
  .office-note .voice-bars { display: none; }
  .day-copy { padding: 24px; }
  .day-copy h3 { font-size: 28px; }
  .day-copy p { font-size: 14px; }
  .love-draft-note { align-items: baseline; max-width: 37ch; margin-bottom: 25px; }
  .love-card,.love-doctor,.love-ceo { margin-top: 0; padding: 25px; }
  .love-card blockquote { font-size: 23px; }
  .love-card figcaption b { font-size: 12px; }
}
@media (max-width: 370px) {
  .people-names { gap: 22px 9px; }
  .day-copy { padding-inline: 20px; }
  .day-copy h3 { font-size: 25px; }
  .day-note { transform: none; }
  .medical-note { width: 182px; }
  .medical-note dt { font-size: 8px; }
  .medical-note dd { font-size: 10px; }
  .council-note { width: 226px; }
  .office-note { width: 146px; right: 8px; top: 12px; }
  .office-note > header .app-avatar { display: none; }
  .office-note > p { font-size: 9px; }
  .app-art { padding-inline: 18px; }
}
/* Keep the legal files, desk microphone and laptop visible in the new photograph. */
.day-legal .legal-note { top: 18px; right: 17px; bottom: auto; width: 200px; }
.day-legal .legal-note > header { padding: 10px 12px; font-size: 10px; }
.day-legal .legal-note > p { font-size: 12px; line-height: 1.6; margin: 10px 12px; }
.day-legal .legal-note > footer { padding: 8px 12px; font-size: 9px; }
@media (max-width: 1050px) {
  .day-legal .legal-note { top: 13px; right: 12px; width: 168px; transform: rotate(1deg); }
  .day-legal .legal-note > header { font-size: 9px; padding: 8px 10px; }
  .day-legal .legal-note > p { font-size: 10px; margin: 9px 10px; line-height: 1.6; }
  .day-legal .legal-note > footer { padding: 7px 10px; font-size: 8px; }
}
@media (max-width: 370px) {
  .day-legal .legal-note { width: 149px; right: 9px; top: 10px; transform: none; }
  .day-legal .legal-note > p { font-size: 9px; line-height: 1.5; margin-block: 8px; }
  .day-legal .legal-note > header { font-size: 8px; padding-block: 7px; }
  .day-legal .legal-note > footer { font-size: 7px; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .speed-enhanced [data-speed-reveal] { opacity: 1; transform: none; }
  .continuation *, .continuation *::before, .continuation *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}