/* Small visual stories for each resource page. */
.section-scene { position: relative; width: 100%; min-width: 0; min-height: 280px; aspect-ratio: 600/340; isolation: isolate; }
.scene-art { position: absolute; inset: 0; }
.scene-halo { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb,var(--violet) 12%,transparent),transparent 70%); }
.scene-caption { position: absolute; bottom: 1%; left: 0; right: 0; text-align: center; color: var(--muted); font-size: .75rem; line-height: 1.5; padding-inline: 12px; }
.section-scene *, .section-scene *::before, .section-scene *::after { animation-play-state: paused !important; }
.section-scene.is-scene-visible *, .section-scene.is-scene-visible *::before, .section-scene.is-scene-visible *::after { animation-play-state: running !important; }
.privacy-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connection-base { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 7; }
.connection-packet { stroke: var(--violet); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 54; animation: data-flow 5s linear infinite; }
.packet-b { stroke: #16a396; animation-duration: 7s; }
@keyframes data-flow { to { stroke-dashoffset: -248; } }
.privacy-node { position: absolute; top: 58%; width: 100px; min-height: 88px; display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); transform: translate(-50%,-50%); }
.privacy-node > .icon { color: var(--violet); width: 26px; height: 26px; margin-bottom: 3px; }
.privacy-node strong { font-size: .8125rem; line-height: 1.3; }
.privacy-node span { color: var(--muted); font-size: .625rem; }
.node-buyer { left: 16%; }
.node-server { left: 50%; }
.node-seller { left: 84%; }
.privacy-guard { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--violet); }
.privacy-guard > .icon { width: 42px; height: 42px; position: relative; z-index: 1; }
.privacy-guard > span { font-size: .6875rem; white-space: nowrap; }
.privacy-guard i { position: absolute; left: calc(50% - 30px); top: -8px; width: 60px; height: 60px; border: 1px solid var(--violet); border-radius: 50%; animation: privacy-wave 4s ease-out infinite; opacity: 0; }
.privacy-guard i:last-child { animation-delay: 2s; }
@keyframes privacy-wave { 0% { transform: scale(.75); opacity: .4; } 85%,100% { transform: scale(1.9); opacity: 0; } }
.terms-sheet { position: absolute; width: 210px; height: 250px; left: 50%; top: 45%; transform: translate(-50%,-50%) rotate(-5deg); border-radius: 12px; border: 1px solid var(--border-strong); background: var(--card); box-shadow: var(--shadow-lg); padding: 26px 22px; overflow: hidden; }
.document-fold { position: absolute; right: -1px; top: -1px; width: 26px; height: 26px; background: linear-gradient(45deg,var(--surface-2) 50%,transparent 51%); }
.document-heading { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 17px; }
.document-line { display: block; height: 4px; width: 90%; border-radius: 4px; background: var(--border-strong); margin: 8px 0; }
.line-long { width: 100%; }
.line-short { width: 60%; margin-bottom: 18px; }
.document-check { display: flex; align-items: center; gap: 8px; font-size: .6875rem; margin: 10px 0; }
.document-check .icon { width: 15px; height: 15px; color: #16a396; animation: agreement-check 7s ease-in-out infinite; }
.check-second .icon { animation-delay: .8s; }
.check-third .icon { animation-delay: 1.6s; }
@keyframes agreement-check { 0%,8% { opacity: .15; transform: scale(.7); } 20%,85% { opacity: 1; transform: scale(1); } 100% { opacity: .15; } }
.document-signature { display: block; width: 60px; border-bottom: 2px solid var(--violet); transform: rotate(-7deg); margin: 21px 0 0 85px; }
.document-scanner { position: absolute; left: 0; right: 0; top: 16%; height: 42px; background: linear-gradient(transparent,color-mix(in srgb,var(--violet) 9%,transparent),transparent); animation: document-scan 7s ease-in-out infinite; }
@keyframes document-scan { 0%,10% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80%,100% { transform: translateY(170px); opacity: 0; } }
.terms-seal { position: absolute; left: 67%; top: 57%; display: grid; place-items: center; width: 67px; height: 67px; border-radius: 50%; background: var(--accent-soft,var(--surface)); border: 1px solid var(--violet); color: var(--violet); box-shadow: var(--shadow); animation: scene-seal 7s ease-in-out infinite; }
.terms-seal .icon { width: 31px; height: 31px; }
@keyframes scene-seal { 0%,60%,100% { transform: rotate(8deg) scale(1); } 72% { transform: rotate(0) scale(1.08); } }
.refund-card { position: absolute; left: 8%; top: 18%; width: 48%; height: 43%; padding: 19px; border-radius: 17px; background: linear-gradient(135deg,#6154bc,#29244e); color: white; box-shadow: 0 20px 36px -24px #15103988; transform: rotate(-8deg); }
.refund-card > span { font-size: .8125rem; font-weight: 600; }
.refund-card > .icon { position: absolute; top: 18px; right: 18px; color: #d6d0ff; }
.refund-card > i, .refund-card > b { display: block; width: 40%; height: 5px; background: #ffffff59; border-radius: 3px; margin-top: 23px; }
.refund-card > b { width: 60%; margin-top: 10px; }
.refund-card small { position: absolute; bottom: 14px; font-size: .625rem; color: #ddd8ff; }
.refund-receipt { position: absolute; left: 56%; top: 10%; width: 29%; height: 52%; padding: 19px 17px; background: var(--card); border: 1px solid var(--border); border-radius: 8px 8px 16px 16px; transform: rotate(7deg); box-shadow: var(--shadow); }
.refund-receipt-title { font-size: .75rem; font-weight: 600; }
.refund-receipt > i { display: block; width: 100%; height: 4px; margin-top: 14px; background: var(--border); border-radius: 4px; }
.refund-receipt > i:nth-of-type(3) { width: 60%; }
.refund-receipt-icon { display: grid; place-items: center; width: 35px; height: 35px; margin: 18px auto 0; background: var(--accent-soft,var(--surface)); border-radius: 50%; color: var(--violet); }
.refund-route { position: absolute; inset: 0; width: 100%; height: 80%; pointer-events: none; }
.refund-stages { position: absolute; left: 12%; right: 12%; bottom: 16%; display: flex; justify-content: space-between; padding-bottom: 15px; font-size: .6875rem; color: var(--muted); border-bottom: 2px solid var(--border); }
.refund-stages i { position: absolute; left: 0; bottom: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); animation: refund-review 8s ease-in-out infinite; }
@keyframes refund-review { 0%,10% { left: 0; } 40%,55% { left: 48%; } 85%,100% { left: 98%; } }
.help-bubble { position: absolute; display: flex; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 19px; box-shadow: var(--shadow); padding: 18px; font-size: .8125rem; line-height: 1.5; }
.bubble-question { left: 5%; right: 18%; top: 14%; background: var(--card); animation: question-arrives 8s ease-in-out infinite; }
.bubble-answer { left: 18%; right: 5%; top: 43%; background: var(--accent-soft,var(--surface)); padding-bottom: 32px; animation: answer-arrives 8s ease-in-out infinite; }
.bubble-avatar { display: grid; place-items: center; flex-shrink: 0; width: 33px; height: 33px; background: var(--surface); border-radius: 50%; color: var(--violet); }
.bubble-avatar .icon { width: 18px; height: 18px; }
.reply-dots { display: flex; gap: 4px; position: absolute; left: 64px; bottom: 14px; }
.reply-dots b { width: 4px; height: 4px; background: var(--violet); border-radius: 50%; animation: typing-reply 1.5s ease-in-out infinite; }
.reply-dots b:nth-child(2) { animation-delay: .15s; }
.reply-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes typing-reply { 0%,65%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes question-arrives { 0%,100% { opacity: .6; transform: translateY(5px); } 12%,85% { opacity: 1; transform: translateY(0); } }
@keyframes answer-arrives { 0%,15%,100% { opacity: .5; transform: translateY(8px); } 30%,85% { opacity: 1; transform: translateY(0); } }
.help-solution { position: absolute; bottom: 16%; left: 22%; right: 10%; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .6875rem; }
.help-solution .icon { color: #16a396; width: 16px; height: 16px; }
.setup-signal { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; }
.setup-signal path { animation: signal-connect 3s ease-in-out infinite; }
.setup-signal path:nth-child(2) { animation-delay: .4s; }
.setup-signal path:nth-child(3) { animation-delay: .8s; }
@keyframes signal-connect { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.scene-tv { position: absolute; left: 17%; right: 17%; top: 34%; bottom: 18%; padding: 13px; border: 7px solid #30313d; border-radius: 15px; background: linear-gradient(125deg,#151c33,#29214f); color: white; box-shadow: 0 18px 35px -22px #20154eaa; }
.scene-tv-top { display: flex; gap: 6px; align-items: center; font-size: .5625rem; }
.scene-tv-top > i { width: 4px; height: 4px; border-radius: 50%; background: #5be8b4; }
.scene-tv-top .icon { width: 13px; height: 13px; margin-left: auto; color: #b7acff; }
.scene-tv-posters { display: flex; gap: 8px; height: 50%; margin-top: 13px; }
.scene-tv-posters i { flex: 1; border-radius: 5px; background: linear-gradient(130deg,#bc72a2,#5e3768); }
.scene-tv-posters i:nth-child(2) { background: linear-gradient(130deg,#80c6c8,#254767); }
.scene-tv-posters i:nth-child(3) { background: linear-gradient(130deg,#edbc72,#946246); }
.scene-tv-timeline { height: 3px; margin-top: 13px; background: #ffffff21; border-radius: 3px; overflow: hidden; }
.scene-tv-timeline i { display: block; height: 100%; width: 30%; background: #a69cf7; animation: stream-progress 12s linear infinite; transform-origin: left; }
@keyframes stream-progress { from { transform: scaleX(.2); } to { transform: scaleX(3.3); } }
.scene-tv-play { position: absolute; left: calc(50% - 18px); top: 45%; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #0a1026a0; border: 1px solid #ffffff40; }
.scene-tv-play .icon { width: 18px; height: 18px; }
.scene-tv-stand { position: absolute; top: 82%; left: 42%; right: 42%; height: 5%; background: #30313d; clip-path: polygon(35% 0,65% 0,100% 100%,0 100%); }
.setup-account { position: absolute; right: 5%; bottom: 20%; display: flex; align-items: center; gap: 6px; padding: 10px 13px; font-size: .625rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); animation: connected-confirm 6s ease-in-out infinite; }
.setup-account .icon { width: 15px; height: 15px; color: #16a396; }
@keyframes connected-confirm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.journal-book { position: absolute; top: 15%; bottom: 17%; left: 15%; right: 15%; display: flex; perspective: 800px; transform: rotate(-5deg); filter: drop-shadow(0 18px 20px #24143e16); }
.journal-left,.journal-right { flex: 1; min-width: 0; padding: 21px 17px; background: var(--card); border: 1px solid var(--border-strong); }
.journal-left { border-radius: 10px 0 0 10px; }
.journal-right { border-radius: 0 10px 10px 0; background: linear-gradient(90deg,var(--surface),var(--card) 18%); }
.journal-label { display: block; color: var(--muted); font-size: .5625rem; margin-bottom: 12px; }
.journal-headline { display: block; font-family: var(--font-head); font-size: clamp(1rem,1.9vw,1.5rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; }
.journal-left > i,.journal-right > i,.journal-turning-page > i { display: block; width: 100%; height: 3px; margin-top: 8px; border-radius: 4px; background: var(--border-strong); }
.journal-left > i:last-child,.journal-right > i:last-child { width: 65%; }
.journal-illustration { display: grid; place-items: center; height: 55%; margin-bottom: 16px; border-radius: 7px; background: linear-gradient(135deg,#9489dd,#574998); color: white; }
.journal-illustration .icon { width: 30px; height: 30px; }
.journal-turning-page { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; padding: 30px 18px; border: 1px solid var(--border); border-radius: 0 10px 10px 0; background: var(--card); transform-origin: left; animation: journal-turn 10s ease-in-out infinite; backface-visibility: hidden; }
.journal-turning-page > i:nth-child(3) { width: 60%; }
@keyframes journal-turn { 0%,12%,100% { transform: rotateY(0); opacity: 1; } 38%,72% { transform: rotateY(-165deg); opacity: .15; } 85% { opacity: 1; } }
.journal-bookmark { position: absolute; left: 30%; top: 12%; width: 13px; height: 42px; background: var(--violet); clip-path: polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); transform: rotate(-5deg); }
.policy-intro-animated,.blog-intro,.help-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; text-align: left; max-width: var(--container); }
.policy-intro-animated h1 { font-size: clamp(2.5rem,4.4vw,4rem); }
.policy-intro-animated h1,.policy-intro-animated p,.help-intro p { margin-inline: 0; }
.help-intro .help-search { margin-left: 0; }
.scene-setup { aspect-ratio: 420/300; }
@media (max-width: 900px) {
 .policy-intro-animated,.blog-intro,.help-intro { gap: 24px; grid-template-columns: 1fr 1fr; }
 .privacy-node { width: 84px; min-height: 77px; padding: 9px 5px; }
 .privacy-node > .icon { width: 21px; height: 21px; }
 .terms-sheet { width: 180px; height: 225px; padding: 22px 18px; }
 .terms-seal { width: 55px; height: 55px; }
 .refund-card { padding: 13px; }
 .refund-card > i { margin-top: 13px; }
 .refund-receipt { padding: 13px; }
 .refund-receipt-icon { margin-top: 10px; }
 .help-bubble { font-size: .6875rem; padding: 12px; gap: 8px; }
 .bubble-answer { padding-bottom: 27px; }
 .reply-dots { left: 50px; }
 .journal-left,.journal-right { padding: 17px 12px; }
 .journal-label { margin-bottom: 8px; }
 .journal-headline { margin-bottom: 9px; }
}
@media (max-width: 760px) {
 .policy-intro-animated,.blog-intro,.help-intro { grid-template-columns: 1fr; }
 .section-scene { max-width: 530px; margin-inline: auto; }
 .terms-sheet { width: 210px; height: 250px; padding: 26px 22px; }
 .journal-headline { font-size: 1.5rem; }
 .help-bubble { padding: 18px; font-size: .8125rem; }
 .bubble-answer { padding-bottom: 32px; }
 .reply-dots { left: 64px; }
 .resource-hero .section-scene { margin-top: 10px; }
}
@media (max-width: 400px) {
 .section-scene { aspect-ratio: 420/310; }
 .privacy-node { width: 82px; }
 .privacy-node span { font-size: .5625rem; }
 .terms-sheet { transform: translate(-50%,-50%) rotate(-5deg) scale(.85); }
 .help-bubble { font-size: .6875rem; padding: 12px; }
 .bubble-answer { padding-bottom: 28px; }
 .reply-dots { left: 52px; }
 .scene-caption { font-size: .625rem; }
 .refund-card small { bottom: 10px; }
 .refund-receipt > i { margin-top: 9px; }
 .refund-receipt-icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
 .section-scene *, .section-scene *::before, .section-scene *::after { animation: none !important; }
 .journal-turning-page { display: none; }
 .privacy-guard i { display: none; }
 .document-check .icon { opacity: 1; }
}