.hero-process-scene { width: min(100% - 3rem, 740px); margin-inline: auto; --hero-loop-duration: 22s; }
.hero-process-story { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: .25rem; }
.hero-process { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.hero-process-story__conversation { position: relative; min-width: 0; padding: 1rem 0; font-size: 14px; line-height: 1.6; }
.hero-process-story__query { position: relative; padding: 1rem 2rem 1rem 1rem; border: 1px solid #b6d0e066; border-radius: 12px; background: #ffffff0d; color: #fff; }
.hero-process-story__eyebrow { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #c6ddef; margin-bottom: .5rem; }
.hero-process-story__question { min-height: 3.2em; margin: 0; font-weight: 500; }
.hero-process-story__send { position: absolute; right: .65rem; bottom: 1rem; color: #f4bb8f; font-size: 20px; }
.hero-process-story__cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.1em; background: #f4bb8f; opacity: 0; }
.hero-process-story__answer-shell { position: relative; margin-top: .75rem; }
.hero-process-story__answer { padding: 1rem; background: #f5f9fc; border: 1px solid #d0e1ed; border-radius: 12px; color: #173a55; box-shadow: 0 8px 24px #071e3226; }
.hero-process-story__ring { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 1; opacity: 0; }
.hero-process-story__ring rect { fill: none; stroke: #f59a51; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px #ed8426aa); }
.hero-process-story__connection { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.hero-process-story__energy { fill: none; stroke: #ffbc75; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 18 100; stroke-dashoffset: 18; filter: drop-shadow(0 0 5px #ff952d); }
.hero-process-story__answer .hero-process-story__eyebrow { color: #496880; }
.hero-process-story__answer p { margin: 0; }
.hero-process-story__source { display: block; border-top: 1px solid #d8e4ec; margin-top: .75rem; padding-top: .5rem; color: #416b58; font-size: 11px; }
.hero-process-story__footer { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 36px; color: #c6ddef; font-size: 11px; }
.hero-process-control { display: none; padding: .5rem; min-height: 36px; border-radius: .375rem; color: #d4e6f3; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.hero-process-control:hover { background: #ffffff12; color: #fff; }
.hero-process-control:focus-visible { outline: 2px solid #efaa73; outline-offset: 2px; }
.hero-process-story__raw, .hero-process-story__energy, .hero-process-story__halo { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-process-scene[data-ready="true"] .hero-process-control { display: block; }
  .hero-process-scene[data-ready="true"] .hero-process-story__raw { animation: hero-loop-collect var(--hero-loop-duration) cubic-bezier(.4, 0, .2, 1) infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__raw--1 { animation-delay: .65s; }
  .hero-process-scene[data-ready="true"] .hero-process-story__raw--2 { animation-delay: 1.3s; }
  .hero-process-scene[data-ready="true"] .hero-process-story__sorted { animation: hero-loop-organize var(--hero-loop-duration) cubic-bezier(.22, 1, .36, 1) infinite both; }
  .hero-process-scene[data-ready="true"] .hero-process-story__sorted--1 { animation-delay: .25s; }
  .hero-process-scene[data-ready="true"] .hero-process-story__sorted--2 { animation-delay: .5s; }
  .hero-process-scene[data-ready="true"] .hero-process-story__halo { animation: hero-loop-halo var(--hero-loop-duration) linear infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__query { animation: hero-loop-query var(--hero-loop-duration) cubic-bezier(.22, 1, .36, 1) infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__question > span:not(.hero-process-story__cursor) { animation: hero-loop-letter var(--hero-loop-duration) linear infinite both; animation-delay: calc(var(--letter) * .065s); }
  .hero-process-scene[data-ready="true"] .hero-process-story__cursor { animation: hero-loop-cursor var(--hero-loop-duration) linear infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__energy { animation: hero-loop-energy var(--hero-loop-duration) linear infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__ring { animation: hero-loop-ring-presence var(--hero-loop-duration) linear infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__ring rect { animation: hero-loop-ring-draw var(--hero-loop-duration) cubic-bezier(.22, 1, .36, 1) infinite; }
  .hero-process-scene[data-ready="true"] .hero-process-story__answer { animation: hero-loop-answer var(--hero-loop-duration) cubic-bezier(.22, 1, .36, 1) infinite; }
  /* Override the more specific letter/ring animation shorthands too. */
  .hero-process-scene[data-ready="true"][data-paused="true"] * { animation-play-state: paused !important; }
}

@keyframes hero-loop-collect {
  0% { opacity: 0; transform: translate(0, 15px); }
  3%, 6% { opacity: 1; transform: translate(0, 0); }
  14% { opacity: 1; transform: translate(94px, -36px); }
  21%, 100% { opacity: 0; transform: translate(171px, 48px); }
}
@keyframes hero-loop-organize {
  0%, 21% { opacity: 0; transform: translateY(92px); }
  30%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes hero-loop-halo { 0%, 18%, 35%, 100% { opacity: 0; } 24%, 29% { opacity: .8; } }
@keyframes hero-loop-query { 0%, 29% { opacity: 0; transform: translateY(6px); } 34%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes hero-loop-letter { 0%, 34% { opacity: 0; } 34.1%, 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes hero-loop-cursor { 0%, 34% { opacity: 0; } 34.1%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes hero-loop-energy {
  0%, 45% { opacity: 0; stroke-dashoffset: 18; }
  46% { opacity: 1; stroke-dashoffset: 18; }
  54% { opacity: 1; stroke-dashoffset: -100; }
  55%, 61% { opacity: 0; stroke-dashoffset: -100; }
  62% { opacity: 0; stroke-dashoffset: 18; }
  63% { opacity: .75; stroke-dashoffset: 18; }
  70% { opacity: .75; stroke-dashoffset: -100; }
  71%, 76% { opacity: 0; stroke-dashoffset: -100; }
  77% { opacity: 0; stroke-dashoffset: 18; }
  78% { opacity: .65; stroke-dashoffset: 18; }
  85% { opacity: .65; stroke-dashoffset: -100; }
  86%, 100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes hero-loop-ring-presence { 0%, 53% { opacity: 0; } 54%, 62%, 71%, 86% { opacity: 1; } 66%, 76%, 91%, 92% { opacity: .45; } 97%, 100% { opacity: 0; } }
@keyframes hero-loop-ring-draw { 0%, 53% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes hero-loop-answer { 0%, 60% { opacity: 0; transform: translateY(4px); } 64%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }

/* Light homepage adaptation of the 441a29e login illustration. */
.hero-process-scene { width: 100%; margin: 0; padding: 12px 18px; min-width: 0; background: radial-gradient(ellipse at 50% 35%, #e6eee8 0%, #faf8f300 70%); }
.hero-process-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-process-story { grid-template-columns: 1fr; gap: 0; }
.hero-process { width: min(100%, 340px); justify-self: center; }
.hero-process-story__conversation { width: 100%; max-width: 440px; justify-self: center; padding: 0; font-size: 15px; }
.hero-process-story__query { background: #f1f3ed; border-color: #a6b9bc; color: #123353; margin-left: 42px; padding: 14px 32px 14px 18px; }
.hero-process-story__question { min-height: 1.6em; }
.hero-process-story__eyebrow { color: #466276; font-size: 10px; }
.hero-process-story__send { color: #a9430a; }
.hero-process-story__answer { background: #fff; border-color: #c0cecc; box-shadow: 0 8px 24px #1233530d; padding: 18px; }
.hero-process-story__answer-shell { margin-right: 24px; }
.hero-process-story__ring rect { stroke: #c76a25; filter: drop-shadow(0 0 3px #e9904b66); }
.hero-process-story__energy { stroke: #d36e20; filter: drop-shadow(0 0 3px #e9904b88); }
.hero-process-story__footer { color: #4f6471; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.hero-process-control { color: #314f62; background: transparent; border: 0; cursor: pointer; font: inherit; min-height: 44px; }
.hero-process-control:hover { background: #e8eee8; color: #123353; }
.home-hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.home-history-photo { display: grid; grid-template-columns: 1.5fr 1fr; margin: 60px 0 0; background: #dce6df; }
.home-history-photo picture { display: block; min-width: 0; }
.home-history-photo img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: 50% 60%; }
.home-history-photo figcaption { padding: 36px; align-self: center; color: #123353; }
.home-history-photo figcaption span { display: block; font-size: 17px; margin-bottom: 12px; }
.home-history-photo figcaption strong { font-size: clamp(25px, 3vw, 38px); line-height: 1.15; }
@media(max-width:900px) { .home-hero-grid { grid-template-columns: 1fr; gap: 30px; } .hero-process-scene { max-width: 600px; justify-self: center; } }
@media(max-width:650px) { .hero-process-scene { padding: 0; } .hero-process { width: min(100%, 300px); } .hero-process-story__conversation { font-size: 14px; } .hero-process-story__query { margin-left: 20px; } .hero-process-story__answer-shell { margin-right: 12px; } .home-history-photo { grid-template-columns: 1fr; margin-top: 36px; } .home-history-photo img { height: 210px; } .home-history-photo figcaption { padding: 26px; } }
.hero-process-story__query { margin-right: 12px; }

.hero-process-story__question > span:nth-child(1) { --letter: 0; }
.hero-process-story__question > span:nth-child(2) { --letter: 1; }
.hero-process-story__question > span:nth-child(3) { --letter: 2; }
.hero-process-story__question > span:nth-child(4) { --letter: 3; }
.hero-process-story__question > span:nth-child(5) { --letter: 4; }
.hero-process-story__question > span:nth-child(6) { --letter: 5; }
.hero-process-story__question > span:nth-child(7) { --letter: 6; }
.hero-process-story__question > span:nth-child(8) { --letter: 7; }
.hero-process-story__question > span:nth-child(9) { --letter: 8; }
.hero-process-story__question > span:nth-child(10) { --letter: 9; }
.hero-process-story__question > span:nth-child(11) { --letter: 10; }
.hero-process-story__question > span:nth-child(12) { --letter: 11; }
.hero-process-story__question > span:nth-child(13) { --letter: 12; }
.hero-process-story__question > span:nth-child(14) { --letter: 13; }
.hero-process-story__question > span:nth-child(15) { --letter: 14; }
.hero-process-story__question > span:nth-child(16) { --letter: 15; }
.hero-process-story__question > span:nth-child(17) { --letter: 16; }
.hero-process-story__question > span:nth-child(18) { --letter: 17; }
.hero-process-story__question > span:nth-child(19) { --letter: 18; }
.hero-process-story__question > span:nth-child(20) { --letter: 19; }
.hero-process-story__question > span:nth-child(21) { --letter: 20; }
.hero-process-story__question > span:nth-child(22) { --letter: 21; }
.hero-process-story__question > span:nth-child(23) { --letter: 22; }
.hero-process-story__question > span:nth-child(24) { --letter: 23; }
.hero-process-story__question > span:nth-child(25) { --letter: 24; }
.hero-process-story__question > span:nth-child(26) { --letter: 25; }
.hero-process-story__question > span:nth-child(27) { --letter: 26; }
.hero-process-story__question > span:nth-child(28) { --letter: 27; }
.hero-process-story__question > span:nth-child(29) { --letter: 28; }
.hero-process-story__question > span:nth-child(30) { --letter: 29; }
/* Give the process more presence on desktop without enlarging mobile. */
@media (min-width: 901px) {
  .hero-process-scene { padding-inline: 0; }
  .hero-process { width: min(100%, 420px); }
  .hero-process-story__conversation { max-width: 500px; font-size: 17px; }
  .hero-process-story__eyebrow { font-size: 11px; }
  .hero-process-story__source { font-size: 12px; }
  .hero-process-story__query { margin-left: 24px; }
}
/* Keep the complete hero conversation comfortably within shorter desktop views. */
@media (min-width: 901px) {
  .hero-process-scene { align-self: start; margin-top: -24px; padding-top: 0; }
  .home-process-tagline { margin-bottom: 12px; }
  .hero-process-story__conversation { font-size: 16px; line-height: 1.5; }
  .hero-process-story__query { padding: 10px 30px 10px 14px; }
  .hero-process-story__answer { padding: 14px; }
  .hero-process-story__eyebrow { font-size: 10px; margin-bottom: 6px; }
  .hero-process-story__source { font-size: 11px; margin-top: 10px; padding-top: 8px; }
  .hero-process-story__footer { margin-top: 8px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .hero-process { width: min(100%, 380px); }
}