/* /grow animated graphics (28 Oct 2026). Google-UI cards, site tokens, CSS-only motion, static under reduced motion. */
.gv{margin:28px 0 30px;padding:0;text-align:left}
.gv-box{position:relative;background:#fff;border:1px solid var(--rule,#e3e5e8);border-radius:20px;box-shadow:0 1px 3px rgba(60,64,67,.15),0 6px 18px rgba(60,64,67,.08);padding:18px 20px;overflow:hidden;font-size:14px;line-height:1.45;color:var(--ink,#202124)}
.gv-tint{background:linear-gradient(180deg,#f1f6fe 0%,#fff 70%)}
.gv figcaption,.gv-cap{font-size:13px;color:var(--muted,#5f6368);margin-top:9px;line-height:1.45}
.gv-lab{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--head,Arial);color:var(--muted,#5f6368);letter-spacing:.02em;margin-bottom:12px}
.gv-lab i{width:8px;height:8px;border-radius:50%;background:var(--blue,#1a73e8);display:inline-block}
/* 1. search typing + ad */
.gv-bar{display:flex;align-items:center;gap:10px;border:1px solid #dfe1e5;border-radius:24px;padding:10px 16px;font-size:15px;box-shadow:0 1px 6px rgba(32,33,36,.12);background:#fff;min-width:0}
.gv-bar svg{flex:none}
.gv-q{display:inline-block;white-space:nowrap;overflow:hidden;max-width:100%;animation:gvType 10s steps(var(--n,24)) infinite}
.gv-caret{flex:none;width:2px;height:18px;background:var(--blue,#1a73e8);margin-left:-8px;animation:gvBlink 1s steps(1) infinite}
.gv-ad{margin-top:14px;animation:gvAd 10s ease infinite}
.gv-sp{font:700 12px Arial;color:var(--ink,#202124)}
.gv-src{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:13px}
.gv-src b{width:26px;height:26px;border-radius:50%;background:var(--blue-soft,#e8f0fe);color:var(--blue,#1a73e8);font:700 12px/26px Arial;text-align:center;flex:none}
.gv-src small{display:block;font-size:11.5px;color:var(--g-grey,#4d5156)}
.gv-h{margin-top:6px;font-size:18px;line-height:23px;color:var(--g-link,#1a0dab)}
.gv-d{margin-top:4px;font-size:13.5px;color:var(--g-grey,#4d5156)}
.gv-pills{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}.gv-pills span{border:1px solid #dadce0;border-radius:14px;padding:3px 10px;font-size:12.5px;color:var(--g-link,#1a0dab)}
@keyframes gvType{0%,6%{clip-path:inset(0 100% 0 0)}38%,100%{clip-path:inset(0 0 0 0)}}
@keyframes gvBlink{50%{opacity:0}}
@keyframes gvAd{0%,40%{opacity:0;transform:translateY(10px)}48%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
/* 2. wording swap: not allowed -> allowed */
.gv-rows{display:grid;gap:10px}
.gv-row{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:8px}
.gv-no,.gv-yes{border-radius:12px;padding:9px 12px;font-size:13.5px;line-height:1.35}
.gv-no{position:relative;background:#fce8e6;color:#a50e0e}
.gv-no::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:#d93025;transform-origin:left;animation:gvStrike 9s ease infinite;animation-delay:calc(var(--i,0)*.35s)}
.gv-yes{background:#e6f4ea;color:#0d652d;animation:gvPop 9s ease infinite;animation-delay:calc(var(--i,0)*.35s)}
.gv-yes::before{content:"\2713  ";font-weight:700}
.gv-arr{text-align:center;color:var(--muted,#5f6368);font-size:16px}
@keyframes gvStrike{0%,3%{transform:scaleX(0)}10%,100%{transform:scaleX(1)}}
@keyframes gvPop{0%,10%{opacity:0;transform:translateX(-8px)}16%,96%{opacity:1;transform:none}100%{opacity:0}}
/* 3. keyword cloud with negatives */
.gv-kw{display:flex;flex-wrap:wrap;gap:8px}
.gv-k,.gv-n{border-radius:16px;padding:6px 12px;font-size:13px;border:1px solid #dadce0;background:#fff}
.gv-k{color:var(--blue-deep,#185abc);border-color:#c6dafc;background:#f1f6fe;animation:gvIn 9s ease infinite;animation-delay:calc(var(--i,0)*.25s)}
.gv-n{position:relative;color:#a50e0e;border-color:#f6c7c3;background:#fff7f6;animation:gvNeg 9s ease infinite;animation-delay:calc(var(--i,0)*.25s)}
.gv-n::before{content:"\2212 ";font-weight:700}
.gv-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted,#5f6368)}
.gv-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:#c6dafc}
.gv-legend span+span::before{background:#f6c7c3}
@keyframes gvIn{0%,4%{opacity:0;transform:scale(.85)}12%,100%{opacity:1;transform:none}}
@keyframes gvNeg{0%,30%{opacity:1;text-decoration:none}40%,100%{opacity:.45;text-decoration:line-through}}
/* 4. funnel */
.gv-fun{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.gv-st{position:relative;background:#fff;border:1px solid var(--rule,#e3e5e8);border-radius:14px;padding:12px 12px 14px;min-width:0;animation:gvStep 10s ease infinite;animation-delay:calc(var(--i,0)*1.1s)}
.gv-st b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--blue-soft,#e8f0fe);color:var(--blue,#1a73e8);font:700 13px Arial;margin-bottom:8px}
.gv-st strong{display:block;font:500 14px/1.3 var(--head,Arial);color:var(--ink,#202124)}
.gv-st small{display:block;font-size:12.5px;color:var(--muted,#5f6368);margin-top:3px;line-height:1.35;overflow-wrap:anywhere}
.gv-st i{position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:2px;background:var(--gr,#34a853);transform-origin:left;animation:gvBar 10s ease infinite;animation-delay:calc(var(--i,0)*1.1s)}
.gv-st.wa b{background:#e7f8ee;color:var(--wa-dark,#075e54)}.gv-st.ok b{background:#e6f4ea;color:#137333}
@keyframes gvStep{0%,3%{border-color:var(--rule,#e3e5e8);box-shadow:none}10%,90%{border-color:#aecbfa;box-shadow:0 4px 14px rgba(26,115,232,.14)}100%{border-color:var(--rule,#e3e5e8)}}
@keyframes gvBar{0%,3%{transform:scaleX(0)}12%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* 5. WhatsApp chat */
.gv-wa{background:var(--wa-wall,#efeae2);border-radius:20px;overflow:hidden;border:1px solid var(--rule,#e3e5e8);max-width:440px}
.gv-wah{display:flex;align-items:center;gap:10px;background:var(--wa-dark,#075e54);color:#fff;padding:10px 14px;font-size:14px}
.gv-wah b{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--wa-dark,#075e54);font:700 13px/30px Arial;text-align:center;flex:none}
.gv-wah small{display:block;opacity:.8;font-size:11.5px}
.gv-msgs{padding:14px;display:flex;flex-direction:column;gap:8px;min-height:230px}
.gv-m{max-width:84%;border-radius:10px;padding:7px 10px 16px;font-size:13.5px;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.13);animation:gvMsg 12s ease infinite;animation-delay:calc(var(--i,0)*1.5s)}
.gv-m em{position:absolute;right:8px;bottom:3px;font-size:10.5px;color:#667781;font-style:normal}
.gv-m.in{background:#fff;align-self:flex-start}.gv-m.out{background:var(--wa-sent,#d9fdd3);align-self:flex-end}
.gv-dots{align-self:flex-end;background:var(--wa-sent,#d9fdd3);border-radius:10px;padding:8px 12px;display:none}
.gv-tag{display:inline-block;margin:0 14px 12px;background:#fff;border-radius:8px;padding:4px 10px;font-size:12px;color:#137333;font-weight:500}
@keyframes gvMsg{0%,2%{opacity:0;transform:translateY(8px)}6%,94%{opacity:1;transform:none}100%{opacity:0}}
/* 6. rules matrix */
.gv-mx{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:13.5px;display:table!important;margin:0!important}
.gv-mx th{background:none!important;font:500 12px var(--head,Arial)!important;color:var(--muted,#5f6368)!important;text-align:left;padding:0 8px 2px!important;border:0!important}
.gv-mx td{background:var(--mist,#f8f9fa);padding:9px 10px!important;border:0!important;vertical-align:middle}
.gv-mx td:first-child{border-radius:10px 0 0 10px;font-weight:500;color:var(--ink,#202124)}.gv-mx td:last-child{border-radius:0 10px 10px 0}
.gv-c{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:3px 9px;font-size:12.5px;font-weight:500;white-space:nowrap;animation:gvPop2 9s ease infinite;animation-delay:calc(var(--i,0)*.35s)}
.gv-c.y{background:#e6f4ea;color:#137333}.gv-c.n{background:#fce8e6;color:#a50e0e}.gv-c.w{background:#fef7e0;color:#8a5a00}
@keyframes gvPop2{0%,4%{opacity:0;transform:scale(.8)}12%,100%{opacity:1;transform:none}}
/* photo */
.gv-ph{margin:28px 0 30px}
.gv-ph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:20px;background:var(--mist,#f8f9fa)}
@media(max-width:600px){
  .gv-box{padding:14px 14px}
  .gv-row{grid-template-columns:1fr;gap:4px}.gv-arr{transform:rotate(90deg);line-height:1}
  .gv-fun{grid-template-columns:1fr 1fr}
  .gv-h{font-size:16.5px;line-height:21px}
  .gv-mx{font-size:12.5px}.gv-mx td{padding:8px 7px!important}.gv-c{white-space:normal}
}
@media (prefers-reduced-motion: reduce){
  .gv *,.gv *::before,.gv *::after{animation:none!important}
  .gv-q{clip-path:none}
}
.gv-ph figcaption{font-size:13px;color:var(--muted,#5f6368);margin-top:9px;line-height:1.45}
