/* Home: the way to the use cases from the chat, a short data security card after How we work */
.o-ask .uh-btn { display: table; margin-top: clamp(20px, 2.2vw, 32px); background: #fff; color: #000; font-size: 17px; line-height: 1.3; letter-spacing: 0; font-weight: 500; }
.o-ask .uh-btn:hover { background: #DDDEDE; }
.uh-sec { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(26px, 5vw, 88px); align-items: end; margin: 0 var(--o-x) clamp(48px, 6vw, 96px); padding: clamp(32px, 5vw, 76px) clamp(22px, 4vw, 62px); border-radius: 22px; overflow: hidden; background: #000; color: #fff; isolation: isolate; font-family: "Instrument Sans", sans-serif; }
.uh-sec > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.uh-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(0, 0, 0, .84), rgba(0, 0, 0, .56)); }
.uh-sec h2 { margin: 0; font-family: "Geist", "Instrument Sans", sans-serif; font-weight: 400; font-size: clamp(28px, 3vw, 48px); line-height: 1.08; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.uh-sec .o-btn { margin-top: clamp(20px, 2.2vw, 30px); background: #fff; color: #000; }
.uh-sec .o-btn:hover { background: #DDDEDE; }
.uh-sec ul { margin: 0; padding: 0; list-style: none; font-size: clamp(16px, 1.2vw, 18px); }
.uh-sec li { padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .3); line-height: 1.26; }
.uh-sec li:last-child { padding-bottom: 0; }
@media (max-width: 860px) { .uh-sec { grid-template-columns: 1fr; margin-left: 10px; margin-right: 10px; } }
/* three steps: one step less to scroll */
#story { height: 700vh !important; }
/* First paint (31 Oct, Adam: a frame of a picture before the hero). The scripts stand at the end of the page and place the cards, so until o.js has set --sz a card has no size and no place, and the stage is still black under the black headline */
html.js .o-k-net #story .stage { background: #fff !important; }   /* the render writes its own colour over this, inline and important */
.js .o-nc:not([style*="--sz"]) { visibility: hidden; }
.o-nc-i { background: #EFEFEF; }

/* after its question the agent says what it did meanwhile */
.o-did { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; color: #E6ECE8; }
.o-did b { color: #fff; font-weight: 600; }
.o-did u { color: #fff; text-underline-offset: 3px; }
.js .o-did { opacity: 0; transform: translateY(10px); transition: opacity .7s, transform .7s; }
.js .o-conv.is-on .o-did { opacity: 1; transform: none; transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { .js .o-did { opacity: 1; transform: none; transition: none; } }

/* Reduce Motion: the chat still types and fades, only nothing slides */
@media (prefers-reduced-motion: reduce) {
  .js .o-chat .o-umsg, .js .o-chat .o-av { opacity: 0; transform: none; transition: opacity .45s; }
  .js .o-chat.is-sent .o-umsg, .js .o-chat.is-on .o-av { opacity: 1; }
  .js .o-chat .o-step1, .js .o-chat .o-next, .js .o-chat .o-did { opacity: 0; transform: none; transition: opacity .7s; }
  .js .o-chat.is-on .o-step1, .js .o-chat.is-on .o-next, .js .o-chat.is-on .o-did { opacity: 1; }
  .js .o-chat.is-on .o-next { transition-delay: .55s; }
  .js .o-chat.is-on .o-did { transition-delay: 1.1s; }
  .o-chat .o-rest { color: transparent; }
  .o-chat .o-typed { box-shadow: 1px 0 0 currentColor; }
}