/* The incumbent capsule footprint is retained; only opacity/transform animate. */
.home-hero-content-06.loi-capsule-wrap { display: inline-block; position: relative; padding: 0; border: 0; background: none; box-shadow: none; }
.loi-capsule { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 190px; height: 40px; padding: 4px 12px; border: 1px solid #e5e6e8; border-radius: 999px; background: #fff; color: #363a40; box-shadow: 0 3px 12px rgb(20 23 31 / .035); cursor: pointer; font: 500 14px/20px Interdisplay, sans-serif; -webkit-tap-highlight-color: transparent; transition: border-color 160ms, background-color 160ms, transform 140ms ease-out; }
html:lang(zh) .loi-capsule { width: 176px; }
.loi-capsule:hover { border-color: #cacbc8; background: #fcfbf9; }
.loi-capsule:focus { outline: none; }
.loi-capsule:focus-visible { box-shadow: 0 0 0 3px rgb(54 58 64 / .18); }
.loi-capsule:active { transform: scale(.975); }
.loi-capsule::before { content: ''; position: absolute; inset: -4px 0; border-radius: 999px; }
.loi-capsule-agent { flex: none; width: 28px; height: 28px; pointer-events: none; }
.loi-capsule-agent [data-loi-lids] { transform-box: fill-box; transform-origin: center; }
.loi-capsule-label { display: block; width: 100px; text-align: left; white-space: nowrap; letter-spacing: -.15px; opacity: 1; transition: opacity 160ms, transform 160ms; }
html:lang(zh) .loi-capsule-label { width: 84px; }
.loi-capsule-label.is-typing::after { content: ''; display: inline-block; margin-left: 3px; height: .85em; border-right: 1px solid currentColor; }
.loi-capsule-label.is-changing { opacity: 0; transform: translateY(-3px); }
.loi-capsule-gift { display: block; flex: none; width: 20px; height: 20px; opacity: .76; transform-origin: 50% 80%; }
.loi-capsule-gift[hidden] { display: none; }
.loi-capsule-gift.is-waving { animation: loi-gift-wave 580ms ease-in-out 1; }
@keyframes loi-gift-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } }
/* Welcome popover: one numeric focal point, quiet heading, aligned text action. */
.loi-welcome { box-sizing: border-box; position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 32px); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 0; border-radius: 16px; background: #fff; color: #25282d; box-shadow: 0 8px 32px rgb(26 32 42 / .12); font: 400 13px/1.6 Interdisplay, 'PingFang SC', 'Microsoft YaHei', sans-serif; text-align: left; }
.loi-welcome::backdrop { background: transparent; }
.loi-welcome[hidden] { display: none; }
.loi-welcome-top { display: flex; align-items: center; gap: 7px; min-height: 24px; padding-right: 28px; margin-bottom: 14px; }
.loi-welcome-top img { flex: none; width: 22px; height: 22px; }
.loi-welcome h2 { margin: 0; color: #5d626a; font: 500 13px/20px Interdisplay, 'PingFang SC', 'Microsoft YaHei', sans-serif; letter-spacing: 0; }
.loi-welcome-close { display: grid; place-items: center; position: absolute; top: 8px; right: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #7a8088; cursor: pointer; }
.loi-welcome-close:hover { background: #f4f5f6; color: #333940; }
.loi-welcome-close svg { width: 14px; height: 14px; }
.loi-welcome-amount { display: flex; align-items: baseline; gap: 7px; margin: 0 0 6px; font-weight: 400; }
.loi-welcome-amount[hidden] { display: none; }
.loi-welcome-value { color: #25282d; font: 600 36px/1.15 Switzer, Interdisplay, sans-serif; letter-spacing: -.025em; font-variant-numeric: lining-nums; }
.loi-welcome-unit { color: #666c74; font: 400 14px/1.5 Interdisplay, 'PingFang SC', 'Microsoft YaHei', sans-serif; letter-spacing: 0; }
.loi-welcome p { margin: 0; color: #666c74; font-size: 13px; line-height: 1.65; }
.loi-welcome p.loi-welcome-registration { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eceef0; color: #666c74; font-size: 13px; line-height: 24px; }
.loi-welcome .loi-welcome-registration a { display: inline-block; padding-block: 8px; margin-block: -8px; vertical-align: baseline; color: #ad403a; font-size: inherit; font-weight: 500; line-height: inherit; text-decoration: underline; text-decoration-color: #d2a39f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.loi-welcome .loi-welcome-registration a:hover { color: #842f2a; text-decoration-color: currentColor; }
.loi-welcome :is(a,button):focus-visible { outline: 2px solid #747b85; outline-offset: 2px; }
@media (max-width: 359px) { .loi-welcome { padding: 18px; } .loi-welcome-value { font-size: 34px; } }
@media (max-width: 767px) { .loi-capsule { width: 176px; height: 36px; gap: 6px; padding: 3px 10px; font-size: 13px; } html:lang(zh) .loi-capsule { width: 160px; } .loi-capsule-agent { width: 25px; height: 25px; } .loi-capsule-label { width: 92px; } html:lang(zh) .loi-capsule-label { width: 80px; } .loi-capsule-gift { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .loi-capsule:active { transform: none; } .loi-capsule *, .loi-capsule { animation: none !important; transition: none !important; } }

/* Product overview: a single Reader/Loi composition, not a simulated live run. */
.rv-overview.loi-workflow { height: auto; aspect-ratio: auto; }
.loi-workflow { --wf-paper: #fffefa; --wf-soft: #f5f4f0; --wf-line: #e8e6e0; --wf-muted: #72736d; width: 100%; margin: 0; color: #292b28; background: #fcfcfa; border-radius: 20px; overflow: hidden; container-type: inline-size; font: 400 14px/1.5 Interdisplay, 'PingFang SC', sans-serif; text-align: left; }
.loi-workflow * { box-sizing: border-box; }
.loi-workflow :is(h2,h3,p) { margin: 0; }
.wf-bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 22px; border-bottom: 1px solid var(--wf-line); font-size: 11px; color: var(--wf-muted); background: #f8f7f4; }
.wf-dots { display: flex; gap: 5px; }
.wf-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #d6d5ce; }
.wf-layout { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 600px; }
.wf-rail { padding: 24px 12px; background: #f4f3ef; border-right: 1px solid var(--wf-line); }
.wf-wordmark { display: block; width: 102px; height: auto; margin: 0 8px 32px; }
.wf-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 9px 10px; border-radius: 8px; color: #75766f; font-size: 12px; }
.wf-nav.is-current { background: #eae8e1; color: #393a35; }
.wf-nav img { width: 20px; height: 20px; }
.wf-nav svg { width: 16px; height: 16px; }
.wf-project-label { margin: 30px 10px 10px; font-size: 10px; color: #7b7d74; }
.wf-project { padding: 8px 10px; color: #5f6259; font-size: 11px; line-height: 1.6; }
.wf-main { min-width: 0; padding: 30px; }
.wf-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.wf-heading h2 { font: 500 clamp(20px,2.3cqw,30px)/1.3 Switzer, 'PingFang SC', sans-serif; letter-spacing: -.6px; text-wrap: balance; }
.wf-heading p { margin-top: 8px; font-size: 12px; color: var(--wf-muted); }
.wf-heading > img { flex: none; width: 32px; height: 32px; }
.wf-panels { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.94fr); gap: 24px; }
.wf-reader { min-width: 0; overflow: hidden; border: 1px solid var(--wf-line); border-radius: 10px; background: #eeede8; }
.wf-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 39px; padding: 0 12px; background: #faf9f5; border-bottom: 1px solid var(--wf-line); color: #696d63; font-size: 10px; }
.wf-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-page { height: 380px; padding: 12px 12px 0; overflow: hidden; }
.wf-page > img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; box-shadow: 0 1px 5px rgb(20 20 16 / .06); }
.wf-locator { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--wf-line); color: #5c6758; background: #f3f3ec; font-size: 10px; }
.wf-chat { display: flex; flex-direction: column; min-width: 0; }
.wf-chat-head { display: flex; align-items: center; gap: 7px; color: #5e6258; font-size: 12px; }
.wf-chat-head img { width: 24px; height: 24px; }
.wf-chat-head small { margin-left: auto; color: var(--wf-muted); font-size: 10px; }
.wf-question { margin: 18px 0 21px 14px !important; padding: 12px 14px; border: 1px solid #e9e6df; border-radius: 12px 12px 3px 12px; background: #f1efe9; font-size: 13px; line-height: 1.65; }
.wf-answer { padding: 0 3px; font-size: 12px; color: #50564a; line-height: 1.8; }
.wf-answer p { font: inherit; }
.wf-answer p.wf-boundary { font-size: 10px; line-height: 1.6; }
.wf-answer h3 { margin-bottom: 12px; color: #32362e; font-size: 14px; font-weight: 500; }
.wf-answer strong { display: block; margin: 10px 0 3px; color: #454b3d; font-size: 11px; font-weight: 500; }
.wf-evidence { display: inline-flex; align-items: center; gap: 5px; margin: 16px 0; padding: 4px 8px; border: 1px solid #dfdfd0; border-radius: 5px; color: #667250; background: #f4f5ed; font-size: 10px; }
.wf-boundary { color: #7b786c; font-size: 10px; line-height: 1.6; }
.wf-composer { margin-top: auto; padding-top: 22px; }
.wf-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; color: #666a60; font-size: 10px; }
.wf-tools span { padding: 4px 8px; border: 1px solid var(--wf-line); border-radius: 6px; background: #fafaf7; }
.wf-input { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #dddcd5; border-radius: 12px; background: #fffefa; color: #8a8a80; font-size: 11px; }
.wf-input svg { flex: none; width: 22px; height: 22px; color: #666b60; }
.wf-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding: 11px 22px; border-top: 1px solid var(--wf-line); color: #76796d; background: #f8f7f3; font-size: 10px; line-height: 1.6; }
.wf-caption a { color: inherit; font: inherit; text-underline-offset: 3px; pointer-events: auto; }
@media (max-width: 991px) { .wf-layout { grid-template-columns: 110px minmax(0,1fr); } .wf-wordmark { width: 78px; margin-left: 3px; } .wf-rail { padding-inline: 8px; } .wf-main { padding: 22px; } .wf-panels { gap: 16px; } .wf-page { height: 350px; } .wf-nav { padding-inline: 6px; } }
@media (max-width: 767px) { .loi-workflow { border-radius: 12px; } .wf-bar { height: 35px; padding: 0 14px; font-size: 9px; } .wf-layout { display: block; min-height: 0; } .wf-rail { display: none; } .wf-main { padding: 22px 16px 18px; } .wf-heading { margin-bottom: 18px; gap: 8px; } .wf-heading h2 { font-size: 20px; line-height: 1.4; } .wf-heading p { font-size: 11px; margin-top: 6px; } .wf-heading > img { width: 28px; height: 28px; } .wf-panels { grid-template-columns: minmax(0,1fr); gap: 20px; } .wf-reader-bar { height: 32px; font-size: 10px; } .wf-page { height: 230px; padding: 12px 14px 0; } .wf-page > img { width: 100%; } .wf-locator { padding: 8px 12px; font-size: 9px; } .wf-chat-head { font-size: 12px; } .wf-question { font-size: 12px; margin-block: 12px 16px !important; padding: 10px 12px; } .wf-answer { font-size: 12px; line-height: 1.75; } .wf-answer h3 { margin-bottom: 8px; font-size: 13px; } .wf-answer strong { margin-top: 8px; } .wf-evidence { margin-block: 10px; } .wf-composer { padding-top: 16px; } .wf-caption { padding: 11px 14px; font-size: 9px; } }
@media (prefers-color-scheme: dark) { .loi-welcome { color-scheme: light; } }