/* R02 SEO vs AEO — split lens comparison */
.page-va main>section{overflow-x:clip}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--mut);margin-bottom:18px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}
code{font-family:"JetBrains Mono",monospace;font-size:.84em;padding:2px 6px;border-radius:6px;background:var(--lav);color:var(--p3);word-break:break-all}
.va-2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.va-2>*,.va-3>*{min-width:0}

/* hero */
.va-hero{position:relative;padding:40px 0 70px;background:linear-gradient(90deg,var(--lav2) 0 50%,#16143a 50% 100%);overflow:hidden}
.va-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 25% 80%,rgba(156,103,255,.18),transparent 70%),radial-gradient(500px 320px at 78% 70%,rgba(127,66,244,.35),transparent 70%);pointer-events:none}
.va-hero .c{position:relative}
.va-hero .crumbs{color:var(--mut)}
.va-top{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;margin-bottom:34px}
.va-top>*{min-width:0}
.va-h1{font-size:clamp(34px,4.2vw,58px);line-height:1.05;margin:0}
.va-h1 i{font-style:normal;padding:0 .12em;border-radius:.15em}
.w-seo{background:#fff;box-shadow:inset 0 -0.12em 0 var(--p2)}
.w-aeo{background:var(--ink);color:#fff}
.va-h1 .gr{background:linear-gradient(90deg,var(--p3),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.va-qa{padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#e9e4ff}
.va-qa .mono{color:#c9b8ff}
.va-qa p{margin:8px 0 0;font-size:16px;line-height:1.65}
.va-stage{position:relative;display:grid;grid-template-columns:1fr 300px 1fr;gap:26px;align-items:center;padding-bottom:70px}
.va-stage>*{min-width:0}
.va-lens{position:relative;padding:18px;border-radius:20px;min-height:250px}
.l-seo{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);animation:vaL .8s .6s var(--ease) both}
.l-aeo{background:#221f4f;border:1px solid rgba(255,255,255,.12);color:#fff;animation:vaR .8s .6s var(--ease) both}
.lt{display:block;font:600 11px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--p3);margin-bottom:12px}
.l-aeo .lt{color:#c9b8ff}
.sr{padding:10px 12px;border-radius:12px;margin-bottom:8px;border:1px solid transparent}
.sr i,.sr b,.sr s{display:block;height:7px;border-radius:4px;background:var(--lav);margin-bottom:6px;font-style:normal;text-decoration:none}
.sr i{width:30%}.sr b{width:80%;height:9px;background:#e1d6fb}.sr s{width:95%}
.sr.me{border-color:var(--p2);background:#fbf9ff;animation:vaRise 5s 1.6s var(--ease) infinite}
.sr.me i,.sr.me b{height:auto;background:none;width:auto}
.sr.me i{font:600 11px "JetBrains Mono",monospace;color:#1a7f4b}
.sr.me b{font-size:14px;color:var(--p3)}
.aq{display:inline-block;padding:9px 12px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.1);font-size:13.5px;font-weight:600;margin-bottom:12px}
.al i{display:block;height:7px;border-radius:4px;background:rgba(201,184,255,.3);margin-bottom:7px;transform-origin:left;animation:vaType 5s 1.4s var(--ease) infinite both}
.al i:nth-child(2){width:86%;animation-delay:1.7s}.al i:nth-child(3){width:58%;animation-delay:2s}
.acite{display:flex;gap:6px;margin-top:10px}
.acite span{font:600 10.5px "JetBrains Mono",monospace;padding:4px 8px;border-radius:7px;background:rgba(255,255,255,.1);color:#d8ccff;animation:vaPop 5s 2.4s var(--ease) infinite both}
.acite span:first-child{background:var(--p);color:#fff}
.lstat{position:absolute;right:16px;bottom:14px;text-align:right}
.lstat span{display:block;font-size:11px;color:var(--mut)}.l-aeo .lstat span{color:#b9b0e0}
.lstat strong{font-size:26px;letter-spacing:-.02em}
.va-mid{display:flex;justify-content:center}
.va-eagle{height:390px;width:auto;max-width:100%;object-fit:contain;animation:vaBob 5s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(20,10,60,.35))}
.va-base{position:absolute;left:8%;right:8%;bottom:0;text-align:center}
.va-base .mono{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--p);color:#fff;position:relative;z-index:1}
.vb-line{position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,var(--line),rgba(255,255,255,.2))}
.vb-line i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--p2);box-shadow:0 0 12px var(--p2);animation:vaRun 4s linear infinite}
@keyframes vaL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes vaR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes vaRise{0%,10%{transform:translateY(46px)}25%,90%{transform:translateY(-46px)}100%{transform:translateY(46px)}}
@keyframes vaType{0%{transform:scaleX(0)}20%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.4}}
@keyframes vaPop{0%,5%{opacity:0;transform:scale(.6)}15%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vaBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes vaRun{from{left:0}to{left:calc(100% - 8px)}}
.sr.me{position:relative;z-index:1}

/* summary */
.va-sum{padding-top:70px;padding-bottom:40px}
.va-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.va-k{padding:24px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s}
.va-k:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.va-k h3{font-size:21px;margin:12px 0 6px}.va-k p{margin:0;color:var(--mut);line-height:1.6}
.kx{display:inline-block;padding:4px 10px;border-radius:999px;font:700 11px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.kx.sh,.c-sh.vtag{background:linear-gradient(90deg,var(--p3),var(--p2));color:#fff}.kx.seo{background:var(--lav);color:var(--p3)}.kx.aeo{background:var(--ink);color:#fff}

/* foundation stack */
.va-stack{display:flex;flex-direction:column;gap:8px;max-width:460px}
.vs-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.vs-top span{padding:14px;border-radius:14px;text-align:center;font-weight:800;font-size:18px;opacity:0;transform:translateY(-20px);transition:.7s 1.2s var(--ease)}
.vs-top .c-seo{background:#fff;border:1.5px solid var(--p2);color:var(--p3)}.vs-top .c-aeo{background:var(--ink);color:#fff}
.vl{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);opacity:0;transform:translateY(24px);transition:.6s var(--ease);transition-delay:calc((5 - var(--i))*.12s)}
.vl b{font-size:15px}.vl span{font-size:13px;color:var(--mut);text-align:right}
.vl:last-child{background:var(--p);border-color:var(--p)}.vl:last-child b,.vl:last-child span{color:#fff}
.va-stack.vis .vl,.va-stack.vis .vs-top span{opacity:1;transform:none}
.va-q{margin:22px 0 0;padding:20px 24px;border-left:4px solid var(--p);border-radius:0 16px 16px 0;background:#fff}
.va-q p{margin:0;font-size:18px;line-height:1.55;font-weight:600}
.va-q cite{display:block;margin-top:8px;font-style:normal;font-size:13.5px}
.va-q a,.mxc a,.va-refs a{color:var(--p3);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* misreading */
.va-mx{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.va-mx>*{min-width:0}
.mxc{padding:22px;border-radius:20px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:10px}
.mxc p{margin:0;line-height:1.6;font-size:15.5px}
.mxc.bad{background:#fff5f7;border-color:#f6ccd6}
.mxc.bad .mono{color:#c2385c}
.kw{position:relative;color:#8b3a50;font-weight:600}
.kw:after{content:"";position:absolute;left:0;top:50%;height:2px;width:100%;background:#d6456b;transform:scaleX(0);transform-origin:left;transition:transform .8s .6s var(--ease)}
.mxc.vis .kw:after{transform:scaleX(1)}
.mxc.bad b{color:#8b1d3b;font-size:15px}.mxc small{color:var(--mut);font-size:12.5px}
.mxc.good p{color:var(--ink);font-weight:600}

/* decision table */
.va-dh{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.va-dh h2{margin:0}
.va-fl{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--lav2);border:1px solid var(--line)}
.vf{padding:9px 16px;border:0;border-radius:10px;background:none;font:inherit;font-weight:700;font-size:14px;color:var(--mut);cursor:pointer;transition:.25s}
.vf.on{background:var(--p);color:#fff}
.vt{border-radius:22px;border:1px solid var(--line);overflow:hidden;background:#fff}
.vt-h,.vt-r{display:grid;grid-template-columns:190px 1fr 1fr 1fr}
.vt-h>*,.vt-r>*{min-width:0}
.vt-h span{padding:14px 18px;font-weight:800;font-size:15px}
.vt-h .c-seo{background:var(--lav);color:var(--p3)}.vt-h .c-aeo{background:var(--ink);color:#fff}.vt-h .c-sh{background:linear-gradient(90deg,var(--p3),var(--p2));color:#fff}
.vt-r{border-top:1px solid var(--line)}
.vt-r>div{padding:18px;font-size:14.5px;line-height:1.6;color:#3d3b55;transition:opacity .35s,background .35s}
.vt-k b{display:block;font-size:16px;color:var(--ink)}.vt-k small{color:var(--mut);font-size:12.5px}
.vt-r em{display:none;font-style:normal;font:700 10.5px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.vt-r .c-sh{background:#fbf9ff}
.vt[data-f=seo] .vt-r>div.c-aeo,.vt[data-f=seo] .vt-r>div.c-sh,
.vt[data-f=aeo] .vt-r>div.c-seo,.vt[data-f=aeo] .vt-r>div.c-sh,
.vt[data-f=sh] .vt-r>div.c-seo,.vt[data-f=sh] .vt-r>div.c-aeo{opacity:.22}
.vt[data-f=seo] .vt-r>div.c-seo,.vt[data-f=aeo] .vt-r>div.c-aeo,.vt[data-f=sh] .vt-r>div.c-sh{background:#f3ecff;color:var(--ink)}

/* lab */
.vs-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.vs-b{padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:.25s}
.vs-b:hover{border-color:var(--p2)}.vs-b.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.va-obs{position:relative;padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.ob-page{display:flex;align-items:center;gap:8px;justify-content:center}
.ob-page span{width:26px;height:32px;border-radius:5px;background:var(--p);position:relative}
.ob-page span:after{content:"";position:absolute;left:6px;right:6px;top:9px;height:12px;background:repeating-linear-gradient(#fff 0 2px,transparent 2px 5px);opacity:.8}
.ob-svg{display:block;width:100%;height:auto;margin-top:-6px}
.ob-svg path{fill:none;stroke:var(--line);stroke-width:3;stroke-dasharray:6 7;transition:stroke .4s}
.va-obs[data-l=seo] .p-seo,.va-obs[data-l=aeo] .p-aeo,.va-obs[data-l=sh] .p-sh{stroke:var(--p);stroke-dasharray:8 6;animation:vaDash 1s linear infinite}
@keyframes vaDash{to{stroke-dashoffset:-28}}
.ob-ends{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:-8px;text-align:center}
.ob-ends span{padding:8px 6px;border-radius:10px;background:var(--lav2);font-size:12.5px;font-weight:700;color:var(--mut);transition:.35s}
.va-obs[data-l=seo] .e-seo,.va-obs[data-l=aeo] .e-aeo,.va-obs[data-l=sh] .e-sh{background:var(--p);color:#fff;transform:translateY(-3px)}
.va-obs[data-l=none] .ob-ends span{opacity:.45}
.va-obs[data-l=none] .ob-page{animation:vaShake .5s}
@keyframes vaShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ob-out{margin-top:16px;padding:16px;border-radius:14px;background:var(--lav2);min-height:112px}
.ob-x{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.ob-out.flash{animation:vaFlash .45s var(--ease)}
@keyframes vaFlash{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}

/* quiz */
.va-quiz{position:relative;padding:24px;border-radius:24px;background:var(--ink);color:#fff;min-height:250px}
.vz{display:none}.vz.cur{display:block;animation:vaFlash .4s var(--ease)}
.vz p{font-size:19px;font-weight:700;line-height:1.4;margin:0 0 18px}
.vz p:before{content:attr(data-s);display:block;font:600 11px "JetBrains Mono",monospace;color:#c9b8ff;letter-spacing:.06em;margin-bottom:10px;text-transform:uppercase}
.vz div{display:flex;gap:10px;flex-wrap:wrap}
.vz button,.vz-re{padding:12px 20px;border-radius:12px;border:1.5px solid rgba(255,255,255,.25);background:none;color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.25s}
.vz button:hover,.vz-re:hover{background:var(--p);border-color:var(--p)}
.vz-r{display:none}.vz-r.cur{display:block;animation:vaFlash .4s var(--ease)}
.vz-r .mono{color:#c9b8ff}.vz-r h3{font-size:22px;margin:8px 0}.vz-r p{color:#d8d2f2;line-height:1.6;margin:0 0 16px}
.vz-step{display:block;font:600 11px "JetBrains Mono",monospace;color:#c9b8ff;margin-bottom:10px;letter-spacing:.06em}

/* next */
.va-nx{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.va-nx>*{min-width:0}
.nxc{display:block;padding:26px;border-radius:22px;background:var(--lav2);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.nxc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.nxc h3{font-size:22px;margin:10px 0 8px}.nxc p{margin:0 0 14px;color:var(--mut);line-height:1.6}
.nxa{font-weight:700;color:var(--p3)}
.nxc.dk{background:var(--ink);color:#fff}.nxc.dk p{color:#c9c3e6}.nxc.dk .mono,.nxc.dk .nxa{color:#c9b8ff}
.va-refs{margin-top:30px}.va-refs ol{margin:10px 0 0;padding-left:20px}.va-refs li{margin-bottom:6px;font-size:14.5px}

@media (max-width:1100px){
 .va-hero{background:linear-gradient(180deg,var(--lav2) 0 46%,#16143a 46% 100%)}
 .va-top{grid-template-columns:1fr;gap:22px}
 .va-qa{background:var(--ink)}
 .va-stage{grid-template-columns:1fr 1fr;gap:16px}
 .va-mid{grid-column:1/-1;order:-1}.va-eagle{height:320px}
 .va-2{grid-template-columns:1fr;gap:34px}
 .va-mx{grid-template-columns:1fr}
 .vt-h{display:none}
 .vt-r{grid-template-columns:1fr}
 .vt-r em{display:block}.vt-r .c-seo em{color:var(--p3)}.vt-r .c-aeo em{color:var(--ink)}.vt-r .c-sh em{color:var(--p)}
 .vt-k{background:var(--lav)}
 .vt-r>div{padding:14px 18px}
}
@media (max-width:700px){
 .va-hero{background:linear-gradient(180deg,var(--lav2) 0 55%,#16143a 55% 100%)}
 .va-stage{grid-template-columns:1fr}
 .va-eagle{height:280px}
 .va-3,.va-nx{grid-template-columns:1fr}
 .vl span{display:none}
 .va-dh{align-items:start}
}
@media (prefers-reduced-motion:reduce){
 .l-seo,.l-aeo,.sr.me,.al i,.acite span,.va-eagle,.vb-line i{animation:none}
 .vl,.vs-top span{transition:none}
}
.va-hero .va-qa p{color:#ece7ff}
.kw:after{display:none}
.kw{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:transparent;transition:text-decoration-color .8s .6s}
.mxc.vis .kw{text-decoration-color:#d6456b}