/* A code-native illustration; the real index lookup stays separate. */
.index-visual{width:100%;max-width:490px;min-width:0;margin:0;position:relative;text-align:left;isolation:isolate}
.index-visual::before{content:"";position:absolute;inset:12% -6% 4%;z-index:-1;background:radial-gradient(ellipse,#e4eaff 0%,#f5f7ff 48%,transparent 72%);filter:blur(20px);pointer-events:none}
.iv-window{background:#fff;border:1px solid #dce3ef;border-radius:16px;box-shadow:0 22px 55px #1526530a,0 3px 10px #15265303;padding:22px 22px 0;overflow:hidden}
.iv-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.iv-brand{display:flex;align-items:center;gap:9px;min-width:0}.iv-brand img{flex:none;width:29px;height:20px}.iv-brand strong{display:block;font-size:13px;letter-spacing:-.3px;font-weight:600;line-height:1.3;color:#142035}.iv-brand span{display:block;font-size:5.7px;letter-spacing:.12em;line-height:1.7;color:#8490a2;margin-top:4px;white-space:nowrap}
.iv-demo{font-size:8px;color:#72809a;background:#f3f5f9;padding:5px 7px;border:1px solid #e8edf4;border-radius:4px;line-height:1;flex:none}
.iv-search{display:flex;align-items:center;gap:9px;border:1px solid #e0e6f0;border-radius:6px;background:#fafbfe;padding:10px 12px;color:#7b879b;font-size:11px;line-height:1.4;margin-bottom:22px}.iv-search svg{width:16px;height:16px;color:#97a1b1;flex:none}.iv-search-enter{margin-left:auto;color:#9aa5b6}
.iv-columns{display:grid;grid-template-columns:36px 1fr 48px;gap:10px;padding:0 9px 12px 0;color:#8a95a7;font-size:6.5px;font-weight:500;letter-spacing:.1em;line-height:1}.iv-columns>span:last-child{text-align:center}
.iv-table{height:278px;position:relative;--iv-step:54px;--iv-duration:4.6s}
.iv-ranks{position:absolute;inset:0 auto 0 0;width:27px;display:flex;flex-direction:column;gap:4px}.iv-ranks span{height:50px;flex:none;display:grid;place-items:center;font-size:9px;color:#a1aaba;font-variant-numeric:tabular-nums}.iv-ranks span:first-child{color:#354bf4;font-weight:600}
.iv-row{position:absolute;left:36px;right:0;top:0;height:50px;display:flex;align-items:center;gap:11px;border:1px solid #e9edf3;border-radius:7px;background:#fff;padding:8px 10px;box-sizing:border-box;will-change:transform}
.iv-store-icon{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:6px;font-size:10px;font-weight:600;line-height:1;color:#8a95a3;background:#f2f4f7}.iv-icon-outdoor{background:#edf4ed;color:#71917b}.iv-icon-beauty{background:#f6eef1;color:#ac8195}.iv-icon-home{background:#f4f0e9;color:#a28c70}.iv-icon-sport{background:#edf0f6;color:#7d8eaa}.iv-icon-yours{background:#166b47;color:#fff;animation:iv-status-color var(--iv-duration) linear both}.iv-icon-yours svg{width:18px;height:18px}
.iv-store-name{display:block;font-size:11px;font-weight:500;letter-spacing:-.15px;line-height:1.25;color:#6d788b;min-width:0}.iv-grade{margin-left:auto;display:grid;place-items:center;flex:none;width:33px;height:30px;border-radius:5px;font-size:13px;font-weight:600;line-height:1}.iv-grade-a{background:#eaf5ee;color:#4c8262}.iv-grade-b{background:#edf3f1;color:#65847a}.iv-grade-c{background:#f3f1e9;color:#9e8a58}.iv-grade-d{background:#f8eee6;color:#b18c67}
.iv-peer{animation:iv-peer-shift var(--iv-duration) cubic-bezier(.3,0,.2,1) both}.iv-peer-one{--iv-from:0px;--iv-to:54px;transform:translateY(54px)}.iv-peer-two{--iv-from:54px;--iv-to:108px;transform:translateY(108px)}.iv-peer-three{--iv-from:108px;--iv-to:162px;transform:translateY(162px)}.iv-peer-five{transform:translateY(216px)}
.iv-your-store{z-index:3;border-color:#8ac8aa;background:#eaf7f0;box-shadow:0 3px 9px #166b4711;animation:iv-store-lift var(--iv-duration) cubic-bezier(.35,0,.2,1) both,iv-row-color var(--iv-duration) linear both;transform:translateY(0);transform-origin:65% center}.iv-your-store .iv-store-name{color:#26374a;font-weight:600;font-size:11px}.iv-row-note{display:block;font-size:7px;font-weight:400;color:#6e8b7c;line-height:1.4;margin-top:3px;animation:iv-ready-label var(--iv-duration) linear both}.iv-grade-yours{position:relative;background:#166b47;color:white;font-size:14px;width:37px;animation:iv-status-color var(--iv-duration) linear both}.iv-grade-step{position:absolute;inset:0;display:grid;place-items:center;opacity:0;animation-duration:var(--iv-duration);animation-timing-function:linear;animation-fill-mode:both}.iv-step-d{animation-name:iv-grade-d-step}.iv-step-c{animation-name:iv-grade-c-step}.iv-step-b{animation-name:iv-grade-b-step}.iv-step-a{animation-name:iv-grade-a-step}.iv-step-plus{opacity:1;animation-name:iv-grade-plus-step}
.iv-pointer{position:absolute;left:72%;top:187px;width:25px;height:32px;z-index:5;filter:drop-shadow(0 1px 1px #14203524) drop-shadow(0 3px 5px #14203514);transform:translate(25px,-134px);animation:iv-cursor-pick var(--iv-duration) cubic-bezier(.35,0,.2,1) both;pointer-events:none}.iv-click-ring{position:absolute;left:calc(72% - 10px);top:176px;width:26px;height:26px;border:1px solid #354bf4;border-radius:50%;z-index:4;opacity:0;animation:iv-pick-ring var(--iv-duration) linear both;pointer-events:none}
.iv-bottom{display:flex;align-items:center;gap:6px;border-top:1px solid #e9edf4;min-height:38px;color:#8b96a6;font-size:8px;line-height:1.5}.iv-progress-dot{width:4px;height:4px;flex:none;border-radius:50%;background:#86ad9b}.iv-rise{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:10px;color:#354bf4;font-weight:550}.iv-rise-arrow{font-size:13px;color:#8594d7}.iv-rise-start{color:#b64e3c}.iv-rise-end{color:#166b47}
.index-visual>figcaption{font-size:8px;line-height:1.7;color:#94a0af;text-align:center;margin-top:10px}
@keyframes iv-peer-shift{0%,36%{transform:translateY(var(--iv-from))}67%,100%{transform:translateY(var(--iv-to))}}
@keyframes iv-store-lift{0%,27%{transform:translateY(162px) scale(1);box-shadow:0 2px 5px #354bf40b}35%{transform:translateY(155px) scale(1.025);box-shadow:0 12px 22px #354bf422}65%{transform:translateY(-6px) scale(1.025);box-shadow:0 12px 22px #354bf422}76%,100%{transform:translateY(0) scale(1);box-shadow:0 3px 9px #354bf411}}
@keyframes iv-cursor-pick{0%,8%{opacity:0;transform:translate(55px,64px)}22%,28%{opacity:1;transform:translate(0,0)}35%{opacity:1;transform:translate(0,-7px)}65%{opacity:1;transform:translate(0,-168px)}76%{opacity:1;transform:translate(0,-162px)}88%,100%{opacity:1;transform:translate(25px,-134px)}}
@keyframes iv-pick-ring{0%,24%,36%,100%{opacity:0;transform:scale(.6)}27%{opacity:.7;transform:scale(.6)}35%{opacity:0;transform:scale(1.8)}}

@keyframes iv-ready-label{0%,65%{opacity:0}74%,100%{opacity:1}}
@media(max-width:600px){.index-visual{max-width:430px}.iv-window{padding:16px 16px 0;border-radius:12px}.iv-heading{gap:8px;margin-bottom:14px}.iv-brand{gap:7px}.iv-brand strong{font-size:12px}.iv-brand span{font-size:5px}.iv-brand img{width:25px;height:18px}.iv-demo{font-size:7px;padding:5px}.iv-search{font-size:10px;margin-bottom:14px}.iv-columns{grid-template-columns:28px 1fr 38px;font-size:6px;padding-right:8px;gap:8px}.iv-row{left:28px;gap:8px;padding-inline:8px}.iv-ranks{width:20px}.iv-store-icon{width:26px;height:26px}.iv-store-name,.iv-your-store .iv-store-name{font-size:10px}.iv-grade{width:29px;font-size:12px}.iv-grade-yours{width:32px;font-size:13px}.iv-row-note{font-size:6px}.iv-bottom{font-size:7px}.index-visual>figcaption{font-size:7px;margin-top:10px}.iv-pointer{left:70%;width:23px;height:30px}.iv-click-ring{left:calc(70% - 10px)}}
@media(prefers-reduced-motion:reduce){.iv-peer,.iv-your-store,.iv-pointer,.iv-click-ring,.iv-grade-step,.iv-grade-yours,.iv-icon-yours,.iv-row-note,.iv-cursor-arrow,.iv-cursor-hand{animation:none!important}.iv-click-ring{display:none}.iv-row{will-change:auto}}

.hero-illustration{width:100%;max-width:490px;min-width:0}.iv-replay{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px auto 0;border:0;padding:4px 10px;background:transparent;color:#7b88a0;cursor:pointer;font:inherit;font-size:9px}.iv-replay:hover{color:#354bf4}.iv-replay:focus-visible{outline:2px solid #354bf4;outline-offset:3px;border-radius:3px}.iv-replay>span{font-size:15px;line-height:1}@media(prefers-reduced-motion:reduce){.iv-replay{display:none}}

/* Synchronized grabbing gesture and visible D → C → B → A → A+ progression. */
.iv-cursor-arrow{position:absolute;inset:0;width:100%;height:100%;opacity:1;animation:iv-arrow-state var(--iv-duration) linear both}
.iv-cursor-hand{position:absolute;left:-9px;top:-9px;width:32px;height:36px;opacity:0;animation:iv-hand-state var(--iv-duration) linear both}
@keyframes iv-arrow-state{0%,25%{opacity:1}28%,76%{opacity:0}80%,100%{opacity:1}}
@keyframes iv-hand-state{0%,25%{opacity:0}28%,76%{opacity:1}80%,100%{opacity:0}}
@keyframes iv-status-color{0%,30%{background-color:#b64e3c}38%{background-color:#946218}50%{background-color:#5a7624}64%{background-color:#27754c}74%,100%{background-color:#166b47}}
@keyframes iv-row-color{0%,30%{background-color:#fff3ef;border-color:#e8b2a6}38%{background-color:#fff8e9;border-color:#e2c38c}50%{background-color:#f5f9ec;border-color:#bfd399}64%{background-color:#eef8f2;border-color:#a0cfb5}74%,100%{background-color:#eaf7f0;border-color:#8ac8aa}}
@keyframes iv-grade-d-step{0%,31.99%{opacity:1}32%,100%{opacity:0}}
@keyframes iv-grade-c-step{0%,31.99%{opacity:0}32%,43.99%{opacity:1}44%,100%{opacity:0}}
@keyframes iv-grade-b-step{0%,43.99%{opacity:0}44%,55.99%{opacity:1}56%,100%{opacity:0}}
@keyframes iv-grade-a-step{0%,55.99%{opacity:0}56%,69.99%{opacity:1}70%,100%{opacity:0}}
@keyframes iv-grade-plus-step{0%,69.99%{opacity:0}70%,100%{opacity:1}}
@media(max-width:600px){.iv-cursor-hand{width:30px;height:34px;left:-8px;top:-8px}}