/* Schematic illustrations use theme tokens, official icons and real brand assets. */
.seo-visual{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;height:168px;overflow:hidden;background:var(--paper-2);color:var(--ink-2);border-bottom:1px solid var(--line);isolation:isolate}
.seo-visual svg{display:block;flex-shrink:0}
.seo-visual span{font:inherit;color:inherit}
.v-lines{display:flex;flex-direction:column;gap:7px;width:100%;margin:12px 0}
.v-lines i{display:block;width:100%;height:4px;background:var(--line-2);border-radius:2px}
.v-lines i:nth-child(2){width:82%}.v-lines i:last-child{width:60%}
.v-paper{position:relative;width:122px;min-height:120px;padding:19px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;transform:rotate(-5deg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.v-paper-heading{width:42%;height:5px;border-radius:2px;background:var(--accent);margin:0 0 17px}
.v-paper>.v-lines+.v-lines{margin-top:17px}
.v-screen{position:relative;width:208px;height:116px;max-width:78%;background:var(--surface);border:1px solid var(--line-2);border-radius:9px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.v-screen-toolbar{display:flex;gap:4px;align-items:center;height:19px;border-bottom:1px solid var(--line);padding:0 9px}
.v-screen-toolbar i{display:block;width:3px;height:3px;border-radius:50%;background:var(--muted)}
.v-screen-body{display:flex;height:95px;overflow:hidden;border-radius:0 0 8px 8px}
.v-screen-sidebar{width:26%;padding:6px 8px;background:var(--paper);border-right:1px solid var(--line)}
.v-screen-content{flex:1;padding:10px 17px}.v-screen-content .v-lines i:first-child{height:16px;background:var(--accent-soft);width:72%}
.v-window-back{position:absolute;width:180px;height:102px;max-width:70%;background:var(--paper);border:1px solid var(--line-2);border-radius:9px;transform:translate(-15px,-10px) rotate(-7deg)}
.v-point{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex-shrink:0;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink-2);transition:transform .3s ease}
.v-point svg{width:26px;height:26px}
.v-point-accent{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.v-screen-badge{position:absolute;right:-12px;bottom:-10px;width:40px;height:40px;border-radius:11px;color:var(--accent)}
.v-screen-badge svg{width:23px;height:23px}
.v-selection{position:absolute;left:43px;right:16px;top:39px;bottom:14px;display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--accent);background:var(--accent-soft);color:var(--accent)}
.v-selection-edit{right:29px;bottom:25px}
.v-camera{position:absolute;right:8px;bottom:8px;width:47px;height:47px;border-radius:50%;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--ink-2);background:var(--paper)}
.v-camera svg{width:28px;height:28px}
.v-audio,.v-path,.v-permissions,.v-handoff,.v-compare,.v-context,.v-brands{display:flex;align-items:center;justify-content:center;gap:16px}
.v-audio-inputs{display:flex;gap:8px}.v-audio-inputs .v-point{width:43px;height:43px;border-radius:12px}
.v-wave{display:flex;align-items:center;gap:5px;height:60px;color:var(--accent)}
.v-wave i{width:3px;border-radius:2px;background:currentColor;opacity:.65;transition:transform .3s ease}
.v-wave i:nth-child(3n){opacity:1}
.v-arrow{width:24px;height:24px;color:var(--muted)}
.v-checklist{display:flex;flex-direction:column;gap:10px}.v-checklist>div{display:flex;align-items:center;gap:8px}
.v-checklist svg{width:18px;height:18px;color:var(--accent)}.v-checklist .v-lines{margin:0}
.v-report-symbol{position:absolute;right:15px;top:12px;color:var(--accent)}.v-report-symbol svg{width:18px;height:18px}
.seo-visual-bug-report .v-paper{width:190px;transform:rotate(-3deg)}
.v-report-fields{display:flex;gap:14px;margin-top:24px}.v-report-fields>div{flex:1}
.v-report-fields span{font:400 8px 'Geist Mono',monospace;color:var(--muted)}
.v-report-fields .v-lines{margin:8px 0}
.v-review{position:relative}.v-review .v-paper{transform:rotate(-4deg)}
.v-review-eye{position:absolute;right:-21px;bottom:6px;color:var(--accent);width:43px;height:43px;border-radius:12px}
.v-play{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:35px;height:35px;border:1px solid var(--line-2);border-radius:50%;background:var(--surface);color:var(--accent)}
.v-play svg{width:18px;height:18px}
.v-timeline{position:absolute;bottom:9px;left:15px;right:15px;height:3px;background:var(--line-2);border-radius:2px}.v-timeline i{display:block;width:38%;height:100%;background:var(--accent)}
.v-redaction{position:absolute;left:73px;right:27px;top:53px;display:flex;flex-direction:column;gap:7px}
.v-redaction i{height:8px;border-radius:2px;background:var(--muted)}.v-redaction i:last-child{width:62%}
.v-ordered{display:flex;flex-direction:column;gap:8px;width:190px;max-width:78%}.v-ordered>div{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px}
.v-ordered span{font:500 11px 'Geist Mono',monospace;color:var(--accent)}.v-ordered .v-lines{margin:0}
.v-compare{gap:13px}.v-compare .v-paper{width:81px;min-height:104px;padding:15px 11px;transform:rotate(-5deg)}.v-compare .v-paper:last-child{transform:rotate(5deg)}
.v-context .v-paper{width:108px;min-height:112px;transform:rotate(4deg)}
.v-comment{position:relative;width:208px;max-width:78%}.v-comment .v-screen{width:100%;max-width:100%}
.v-comment-bubble{position:absolute;right:-14px;top:6px;width:42px;height:42px;border-radius:11px;color:var(--accent)}
.v-brand-logo{display:block;width:48px;height:48px;object-fit:contain;padding:6px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:12px}
.v-handoff{gap:12px}.v-handoff .v-point{width:43px;height:43px;border-radius:12px}
.v-handoff-brands{display:flex;gap:5px}.v-handoff-brands img{width:33px;height:33px;padding:5px;border-radius:9px}
.v-brands{gap:20px}.v-brands img{width:54px;height:54px;padding:8px}
.v-brand-workflow{position:relative;display:flex;align-items:center;gap:20px}.v-brand-workflow>.v-brand-logo{width:64px;height:64px;padding:10px;border-radius:16px}
.v-brand-meaning{display:flex;align-items:center;justify-content:center;width:80px;height:62px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--accent)}.v-brand-meaning svg{width:32px;height:32px}
.v-keyboard{display:flex;align-items:center;gap:12px}.v-keyboard kbd{display:flex;align-items:center;justify-content:center;min-width:48px;height:51px;padding:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-bottom-width:3px;border-radius:10px;font:500 23px 'Geist Mono',monospace}
.seo-cards>.seo-card{padding:0;overflow:hidden}.seo-card-copy{padding:26px 28px 28px}
.seo-steps{gap:20px}.seo-steps>li{display:block;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.seo-step-copy{display:flex;gap:16px;padding:24px}.seo-step-copy .seo-step-no{padding-top:4px}
.seo-flow{gap:24px}.seo-flow>.seo-flow-step{position:relative;min-width:0;padding:0}
.seo-flow-step>.seo-visual{border-radius:13px 13px 0 0}.seo-flow-copy{padding:24px}
.seo-flow-connector{position:absolute;top:73px;right:-25px;width:24px;height:24px;color:var(--muted);z-index:1}
.compare-products>.compare-product{padding:0;overflow:hidden}.compare-product-copy{padding:24px}
.compare-product .v-brand-logo{width:64px;height:64px;padding:10px;border-radius:16px}
.seo-catalog>.seo-card{padding:0;overflow:hidden}.seo-catalog .seo-card-copy{padding:26px}
.seo-catalog .seo-card h2{margin-top:0}.seo-catalog .seo-visual{height:180px}
@media(hover:hover){.seo-card:hover .v-paper,.seo-steps>li:hover .v-paper,.seo-flow-step:hover .v-paper{transform:translateY(-4px) rotate(0)}.seo-card:hover .v-screen,.seo-steps>li:hover .v-screen{transform:translateY(-3px)}.seo-card:hover .v-wave i:nth-child(2n){transform:scaleY(.72)}}
@media(max-width:800px){.seo-flow{gap:20px}.seo-flow-connector{display:none}.seo-card-copy,.seo-step-copy,.seo-flow-copy{padding:24px}.seo-steps{gap:20px}.seo-visual{height:160px}.seo-catalog .seo-visual{height:160px}}
@media(prefers-reduced-motion:reduce){.seo-visual *{transition:none!important;animation:none!important}.seo-card:hover .v-paper,.seo-steps>li:hover .v-paper,.seo-flow-step:hover .v-paper,.seo-card:hover .v-screen,.seo-steps>li:hover .v-screen{transform:none}}

.seo-resource>.seo-visual{height:auto;aspect-ratio:16/9}