.reading-track {position:absolute;inset:auto 0 0;height:2px;pointer-events:none}
.reading-track i {display:block;height:100%;background:linear-gradient(90deg,#38685c,#8cb89e);transform:scaleX(var(--read,0));transform-origin:left}
.desktop-nav a.on-screen:after {right:0}
.hero {isolation:isolate;position:relative}
.hero:before {content:'';position:absolute;inset:0 -12vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 80% 58%,#d6e9df 0,transparent 48%),radial-gradient(ellipse at 30% 105%,#e6e9d9 0,transparent 42%)}
.hero-visual {translate:0 var(--stage-shift,0px)}
.hero-grid {border-radius:65px 12px 70px 12px;background-color:#e0eade;box-shadow:inset 0 0 0 1px #c1d3c3}
.hero-window {box-shadow:0 25px 60px #214b4628}
.bot-shortcut {display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:9px 12px;border:1px solid #bdcfc0;background:#ffffffa6;border-radius:24px;font-size:12px;color:#345f54}
.bot-shortcut svg {width:15px;height:15px;display:block}
.hero-footnote {margin-top:14px}
.product-panel {background:linear-gradient(120deg,#edf2e9,#dce8df);box-shadow:0 14px 40px #36523e0b}
.feature-card {overflow:hidden}
.feature-card:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:#82a98f;transform-origin:left;transform:scaleX(0);transition:transform .35s}
.feature-card:hover:after {transform:scaleX(1)}
.feature-icon {transition:transform .3s,background .3s}
.feature-card:hover .feature-icon {transform:translateY(-3px);background:#dceadd}
.data-card {background:radial-gradient(ellipse at 10% 100%,#2a635d,transparent 65%),#153d4c}
.ai-section {background:radial-gradient(ellipse at 87% 37%,#dcebe3,transparent 50%),linear-gradient(125deg,#edf2e9,#f6f7ef)}
.ai-panel {align-items:center;background:#fcfcf6bd;border-radius:18px;box-shadow:0 18px 48px #1b42420c}
.ai-role-copy h3 {max-width:420px}
.demo-chat {min-width:0;border:1px solid #cfded3;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 16px 40px #254a4612}
.chat-top {display:flex;align-items:center;gap:12px;background:linear-gradient(110deg,#163c4b,#285b55);color:white;padding:18px 22px}
.chat-top img {border:1px solid #ffffff33;border-radius:10px}
.chat-top strong,.chat-top small {display:block}
.chat-top strong {font-size:16px;letter-spacing:-.3px}
.chat-top small {color:#c7ddd1;font-size:11px;margin-top:4px}
.chat-top button {margin-left:auto;width:38px;height:38px;background:#ffffff12;color:white;border:1px solid #ffffff30;border-radius:50%;font-size:23px}
.chat-log {height:240px;overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:13px;background:linear-gradient(#f9fbf7,#fff);scrollbar-width:thin}
.bubble {max-width:94%;padding:12px 15px;border-radius:14px 14px 14px 3px;background:#eef3ed;align-self:flex-start;overflow-wrap:anywhere;animation:bubble-in .22s ease-out}
.bubble.visitor {align-self:flex-end;background:#214b4b;color:white;border-radius:14px 14px 3px 14px}
.bubble small {font-size:10px;display:block;opacity:.78;margin-bottom:5px}
.bubble p {font-size:13px;line-height:1.65}
.chat-source {display:block;font-size:10px;color:#46695a;margin-top:8px}
.chat-prompts {display:flex;flex-wrap:wrap;gap:6px;padding:6px 18px 14px}
.chat-prompts button {background:white;color:#345f54;border:1px solid #c9dbcd;border-radius:18px;font-size:11px;padding:8px 11px;line-height:1.4;text-align:left}
.chat-prompts button:hover {background:#eef5ee}
#chat-form {padding:0 18px}
#chat-form label {font-size:11px;color:#526962}
.chat-input {display:flex;align-items:center;margin-top:6px;padding:5px;border-radius:9px;background:#f7faf6;border:1px solid #c1d2c5}
.chat-input:focus-within {outline:2px solid #6a9c80}
.chat-input input {flex:1;min-width:0;font-size:14px;background:none;border:0;outline:0;padding:8px}
.chat-input input::placeholder {font-size:12px}
.chat-input button {width:39px;height:39px;flex:none;color:white;background:#214e49;font-size:22px;border-radius:7px}
.chat-notice {padding:10px 19px 16px;font-size:10px;line-height:1.55;color:#64756d}
.ease-step-number {transition:background .4s,color .4s,box-shadow .4s}
.in-view .ease-step-number {background:#32665b;color:#fff;box-shadow:0 0 0 5px #e8f0e8}
@keyframes bubble-in {from {opacity:0;transform:translateY(4px)} to {opacity:1;transform:none}}
@media(min-width:901px) {.ease-intro {position:sticky;top:135px;align-self:start}.ease-steps article {min-height:190px}}
@media(max-width:640px) {.ai-panel {padding:24px 15px}.chat-top {padding:14px}.chat-log {height:225px;padding:13px}.chat-prompts {padding:6px 12px 12px}#chat-form {padding:0 12px}.chat-notice {padding:9px 12px 15px}.chat-input input {font-size:16px}.hero-visual {translate:none}.hero-grid {border-radius:28px 7px 35px 7px}}
@media(prefers-reduced-motion:reduce) {.hero-visual {translate:none}.bubble {animation:none}.feature-card:hover .feature-icon {transform:none}}

/* Comfortable reading and stable controls across intermediate screen sizes. */
h1, h2, .ai-role-copy h3 {text-wrap:balance}
.section-heading > p, .lead {text-wrap:pretty}
button, a, input {touch-action:manipulation}
.module summary, .faq-list summary {min-height:52px}
.chat-log {scroll-padding:16px}
.bubble {flex-shrink:0}
.chat-prompts button {min-height:40px}
.chat-input button, #chat-reset {min-width:44px;min-height:44px}
.chat-input input {min-height:44px}
.ai-panel {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.demo-chat {width:100%}
.motion-enhanced .section-heading {transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.motion-enhanced .section-heading:not(.motion-arrived) {opacity:0;transform:translateY(22px)}
.motion-enhanced .feature-card {transition:opacity .65s,transform .65s,background .25s}
.motion-enhanced .feature-card:nth-child(3n+2) {transition-delay:.08s}
.motion-enhanced .feature-card:nth-child(3n) {transition-delay:.16s}
.motion-enhanced .feature-card:not(.motion-arrived) {opacity:0;transform:translateY(24px)}
.data-card {transition:box-shadow .6s}
.data-card.visible {box-shadow:0 22px 65px #183c4c18}
@media(min-width:901px) {
 .panel-screen img {transition:transform .7s cubic-bezier(.2,.7,.3,1)}
 .panel-screen button:hover img {transform:scale(1.025)}
 .ease-steps article {transition:opacity .4s}
 .ease-steps article.in-view h3 {color:#35725d}
}
@media(max-width:1000px) {
 .ai-panel {grid-template-columns:1fr;gap:28px}
 .ai-role-copy h3,.ai-role-copy>p:not(.ai-role-note) {max-width:650px}
 .demo-chat {max-width:650px;justify-self:center}
 .chat-log {height:260px}
}
@media(max-width:640px) {
 .section-heading h2,h2 {font-size:clamp(29px,8.5vw,38px);line-height:1.16}
 .catalogue-heading h2 {font-size:30px}
 .hero h1 {font-size:clamp(43px,12vw,64px)}
 .ai-role-tabs,.tabs {scroll-snap-type:x proximity}
 .ai-role-tabs button,.tabs button {scroll-snap-align:center;min-height:44px}
 .ai-panel {padding:22px 14px}
 .ai-role-copy>p:not(.ai-role-note),.check-list li,.module-content li,.feature-card>p {font-size:12px}
 .chat-top {gap:9px}
 .chat-top strong {font-size:15px}
 .chat-top small {font-size:10px}
 .chat-log {height:270px}
 .bubble p {font-size:13px}
 .chat-prompts button {font-size:12px;min-height:44px}
 .chat-input input {font-size:16px}
 .chat-input input::placeholder {font-size:11px}
 .chat-notice {font-size:10px}
 .demo-chat {border-radius:12px}
 .hero-visual {margin-bottom:15px}
 .menu-toggle {min-width:38px;min-height:44px}
}
@media(max-width:360px) {
 .nav-cta {display:none}
 .menu-toggle {margin-left:auto}
 .ai-example-head,.chat-top {gap:7px}
 .chat-top img {width:32px;height:32px}
 .chat-top strong {font-size:14px}
 .chat-prompts {gap:5px}
 .chat-input input::placeholder {font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
 .motion-enhanced .section-heading:not(.motion-arrived),.motion-enhanced .feature-card:not(.motion-arrived) {opacity:1;transform:none}
 .motion-enhanced .feature-card,.motion-enhanced .section-heading,.panel-screen img {transition:none}
}

/* A full-screen product sequence driven by document scrolling. */
.showcase {height:240vh;min-height:1400px;background:#102f3b;color:#f4f8ee;position:relative}
.showcase-sticky {position:sticky;top:94px;height:calc(100vh - 94px);min-height:550px;max-height:950px;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.showcase-halo {position:absolute;width:70vw;height:70vw;right:-15vw;top:-15vw;z-index:-1;border-radius:50%;background:radial-gradient(circle,#78bca84d,transparent 65%);transform:translateY(calc(var(--show-progress,0) * 160px))}
.showcase-sticky:before {content:'';position:absolute;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(#a4c2b6 1px,transparent 1px),linear-gradient(90deg,#a4c2b6 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(90deg,transparent,#000)}
.showcase-inner {width:min(1320px,calc(100% - 100px));margin:auto;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:50px}
.showcase-copy .eyebrow {color:#a3c8b5}
.showcase-copy h2 {font-size:clamp(40px,4.3vw,62px);line-height:1.06;letter-spacing:-2px;margin-top:24px}
.showcase-copy h2 em {color:#b5d4b6}
.showcase-chapter {margin-top:36px;min-height:175px;max-width:370px}
.showcase-chapter>span {font-size:11px;letter-spacing:2px;color:#a6c3b4}
.showcase-chapter h3 {font-size:24px;line-height:1.25;margin-top:16px;letter-spacing:-.5px}
.showcase-chapter p {font-size:13px;color:#b9cdd0;line-height:1.8;margin-top:12px}
.showcase-controls {display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.showcase-controls button {padding:12px 14px;min-height:44px;border-radius:24px;background:#ffffff09;color:#b6ccc6;border:1px solid #ffffff25;font-size:11px}
.showcase-controls button[aria-pressed=true] {color:#153c3f;background:#d3e6c7;border-color:#d3e6c7}
.showcase-hint {font-size:10px;color:#91aba8;margin-top:25px;letter-spacing:1px}
.showcase-hint span {display:inline-block;margin-left:18px;animation:scroll-arrow 1.8s infinite}
.showcase-display {min-width:0;transform:perspective(1400px) rotateY(calc(-12deg + var(--show-progress,0) * 12deg)) rotateX(calc(4deg - var(--show-progress,0) * 4deg)) scale(calc(.91 + var(--show-progress,0) * .09));transform-origin:center}
.showcase-window {background:#edf2ee;border:1px solid #8caaa1;border-radius:12px;overflow:hidden;box-shadow:0 35px 90px #0005,0 0 65px #93ccb51a}
.showcase-bar {height:30px;display:flex;align-items:center;gap:5px;padding:0 12px;color:#789080;font-size:8px}
.showcase-bar i {width:5px;height:5px;border-radius:50%;background:#b9c7b8}
.showcase-bar span {margin:auto}
.showcase-screens {position:relative;aspect-ratio:1363/936;background:#fff}
.scene-screen {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .65s,transform 1s}
.scene-screen.active {opacity:1;transform:scale(1)}
.showcase-display>p {font-size:9px;color:#93b0a7;margin-top:18px;text-align:center}
.showcase-progress {position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff12}
.showcase-progress i {height:100%;display:block;background:#b0d8ba;transform:scaleX(var(--show-progress,0));transform-origin:left}
.hero-copy {animation:hero-enter .85s cubic-bezier(.2,.7,.2,1) both}
.hero-visual {animation:hero-screen 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero h1 em {display:inline-block;animation:hero-em 1.1s .15s both}
@keyframes hero-enter {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hero-screen {from{opacity:0;transform:perspective(1300px) rotateY(-16deg) translateY(70px) scale(.86)}to{opacity:1;transform:none}}
@keyframes hero-em {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes scroll-arrow {0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.chat-explore {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #e5ede4}
.chat-explore button {background:none;font-size:11px;color:#3e6c5c;padding:6px 0}
#chat-coverage {font-size:9px;color:#708578}
#chat-directory[hidden] {display:none}
#chat-directory {padding:15px 18px;background:#f0f5ed;border-top:1px solid #d6e2d0}
#chat-directory label {font-size:11px;display:block;margin-bottom:8px}
#chat-directory input {font-size:16px}
#chat-topic-list {max-height:210px;overflow:auto;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#chat-topic-list button {font-size:11px;background:white;padding:9px 12px;border:1px solid #d7e2d0;border-radius:5px;min-height:40px;text-align:left}
@media(max-width:900px) {
 .showcase-sticky {top:78px;height:calc(100vh - 78px)}
 .showcase-inner {width:calc(100% - 60px);gap:25px;grid-template-columns:.9fr 1.1fr}
 .showcase-copy h2 {font-size:39px}
 .showcase-chapter h3 {font-size:21px}
 .showcase-chapter p {font-size:12px}
}
@media(max-width:640px) {
 .showcase {height:210vh;min-height:1200px}
 .showcase-sticky {top:74px;height:calc(100svh - 74px);min-height:600px;max-height:850px}
 .showcase-inner {width:calc(100% - 40px);display:flex;flex-direction:column;gap:22px;align-items:stretch}
 .showcase-copy h2 {font-size:36px;margin-top:14px}
 .showcase-copy .eyebrow {font-size:8px}
 .showcase-chapter {margin-top:18px;min-height:118px}
 .showcase-chapter h3 {font-size:20px;margin-top:10px}
 .showcase-chapter p {font-size:11px;margin-top:8px}
 .showcase-controls {margin-top:9px;gap:6px}
 .showcase-controls button {padding:9px 13px;font-size:10px}
 .showcase-hint {display:none}
 .showcase-display {transform:none}
 .showcase-display>p {font-size:8px;margin-top:10px}
 .showcase-bar {height:22px;font-size:7px}
 .chat-explore {padding:12px}
}
@media(prefers-reduced-motion:reduce) {
 .showcase {height:auto;min-height:0;padding:65px 0}
 .showcase-sticky {position:relative;top:0;height:auto;min-height:0;max-height:none}
 .showcase-display {transform:none}
 .scene-screen {transition:none;transform:none}
 .showcase-hint {display:none}
 .hero-copy,.hero-visual,.hero h1 em,.showcase-hint span {animation:none}
}
@media(max-width:640px) {
 .showcase-sticky {min-height:0}
 .showcase-inner {gap:16px}
 .showcase-chapter {min-height:110px}
}
@media(max-width:640px) and (max-height:700px) {
 .showcase-copy h2 {font-size:29px;line-height:1.05;margin-top:10px}
 .showcase-chapter {margin-top:12px;min-height:88px}
 .showcase-chapter h3 {font-size:17px;margin-top:7px}
 .showcase-chapter p {font-size:10px;line-height:1.6}
 .showcase-controls button {min-height:38px;padding:7px 10px}
 .showcase-display {max-width:310px;align-self:center}
 .showcase-inner {gap:12px}
}

@media(max-width:640px){.showcase-display{width:100%;max-width:310px}}