/* AI Visibility: one fictional website, three finite explanatory scenes. */
.visibility-section { --visibility-accent:#9bddec; }
.visibility-section h2 { max-width:1000px; }
.visibility-title-accent { display:block; color:#91c9dc; }
.visibility-section .visibility-eyebrow { color:#9bdded; }
.visibility-section .section-lede { max-width:800px; margin-top:24px; }
.visibility-section .section-lede strong { font-weight:500; color:#d6e7ef; }
.visibility-process { margin-top:32px; }
.visibility-process-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; min-height:40px; }
.visibility-process-header>p { margin:0; color:#b7cfdb; font-size:10px; line-height:1.6; letter-spacing:1.7px; text-transform:uppercase; }
.visibility-motion { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; min-height:40px; color:#c0d3df; border:1px solid #91c9dc32; border-radius:8px; background:#91c9dc06; font:inherit; font-size:11px; cursor:pointer; }
.visibility-motion[hidden],.visibility-replay[hidden] { display:none; }
.visibility-motion svg { width:16px; height:16px; }
.visibility-motion:hover { color:#ecfbff; background:#91c9dc13; }
.visibility-motion:disabled,.visibility-replay:disabled { cursor:default; opacity:.65; }
.visibility-motion:focus-visible,.visibility-replay:focus-visible,.visibility-cta:focus-visible { outline:2px solid #adf0ff; outline-offset:4px; }
.visibility-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:28px; list-style:none; padding:0; margin:0; }
.visibility-step { position:relative; min-width:0; padding:22px 20px 20px; border-radius:15px; border:1px solid #91c9dc35; border-top-color:#91c9dc8c; background:linear-gradient(150deg,#162230,#101825); display:flex; flex-direction:column; }
.visibility-step:target { outline:1px solid #9bddec; outline-offset:5px; }
.visibility-step.is-playing { border-color:#91c9dc8c; box-shadow:0 0 26px #6ac8e70c; }
.visibility-step-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:19px; }
.visibility-step h3 { font-size:25px; line-height:1.3; letter-spacing:-.6px; font-weight:450; margin:0; color:#e8f2f7; }
.visibility-step-number { font-size:11px; color:#92b6c7; letter-spacing:1px; }
.visibility-scene { margin:0; min-width:0; }
.visibility-scene-art { height:288px; position:relative; padding:15px; border:1px solid #91c9dc25; border-radius:11px; background:radial-gradient(ellipse at 0 0,#17435225,transparent 65%),#0a131d; color:#d5e3eb; overflow:hidden; }
.visibility-scene-art svg,.visibility-connector svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.v-window-top { display:flex; align-items:center; justify-content:space-between; gap:5px; height:20px; margin-bottom:12px; }
.v-window-top>span { display:flex; align-items:center; gap:6px; color:#a2d9e7; font-size:11px; font-weight:500; white-space:nowrap; }
.v-window-top>small { font-size:7px; letter-spacing:.7px; line-height:1.5; color:#9aafc0; text-align:right; }
.v-uv-mark { width:22px; height:22px; object-fit:contain; }
.v-audit-preview { position:relative; height:100px; overflow:hidden; border-radius:6px; border:1px solid #adcbd642; background:#192938; }
.v-site-image { width:100%; height:100%; overflow:hidden; }
.v-site-image img { display:block; width:100%; height:auto; transform:scale(1.62); transform-origin:50% 0; }
.v-audit-preview::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 60%,#07121a9c); pointer-events:none; }
.v-review-chip { position:absolute; left:9px; bottom:7px; z-index:2; padding:4px 7px; color:#e1edf0; border:1px solid #b6e6ed45; border-radius:4px; background:#0c1f2ae8; font-size:8px; }
.v-scan-beam { position:absolute; inset:0 0 auto; height:40px; z-index:3; border-bottom:1px solid #b3efff; background:linear-gradient(transparent,#99e0f344); opacity:0; }
.v-audit-checks { margin-top:12px; }
.v-check-row { display:flex; justify-content:space-between; align-items:center; gap:5px; min-height:32px; padding:6px 0; border-bottom:1px solid #91c9dc13; font-size:10px; }
.v-check-row>span { display:flex; align-items:center; gap:6px; }
.v-check-row svg { width:12px; height:12px; }
.v-check-pass { font-size:8px; color:#9ecdc1; }
.v-needs-attention { color:#e3c397; border:1px solid #dfb16e40; border-radius:5px; padding:7px; background:#c6933b0b; margin-top:5px; }
.v-check-issue { font-size:8px; color:#f0cb91; }
.v-missing { color:#ecc3cb; border:1px solid #e697a742; border-radius:5px; padding:7px; background:#a7485914; margin-top:5px; }
.v-check-missing { color:#f2b3c0; font-size:8px; }
.v-check-missing svg,.v-check-issue svg { stroke-width:2; }
.visibility-improve-art { background:radial-gradient(ellipse at 0 0,#43472d15,transparent 60%),#0a131d; }
.v-edit-target { display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.v-aster-monogram { display:grid; place-items:center; width:31px; height:34px; flex:none; border-radius:4px; background:#ede7da; color:#393c2f; font-family:Georgia,serif; font-size:23px; }
.v-edit-target strong { display:block; font-size:11px; line-height:1.6; font-weight:500; }
.v-edit-target small { display:block; font-size:8px; color:#9bafbf; line-height:1.6; }
.v-edit-status { margin-left:auto; font-size:8px; color:#b8d9e5; padding:3px 6px; border:1px solid #87c5dd35; border-radius:4px; }
.v-update-field { position:relative; border:1px solid #8cd6de64; background:#93d9e709; border-radius:5px; padding:9px 10px; margin-bottom:8px; overflow:hidden; }
.v-field-label { display:block; color:#96b4c4; font-size:7px; letter-spacing:.7px; margin-bottom:7px; }
.v-field-value { position:relative; font-size:11px; line-height:1.6; min-height:18px; color:#dbeaf0; }
.v-field-after { display:block; }
.v-field-before { position:absolute; top:0; left:0; opacity:0; color:#91a5b4; }
.v-edit-caret { display:none; }
.v-update-row { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:32px; border-bottom:1px solid #91c9dc14; font-size:10px; }
.v-update-row>span { display:flex; align-items:center; gap:5px; }
.v-update-row svg { width:12px; height:12px; }
.v-update-done { color:#a0cdbf; font-size:8px; }
.v-save-confirmation { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 4px; margin-top:12px; color:#b6dfcf; border:1px solid #81c9b440; border-radius:5px; background:#27584726; font-size:9px; line-height:1.5; }
.v-save-confirmation svg { width:13px; height:13px; }
.visibility-verify-art { background:radial-gradient(ellipse at 80% 0,#39305d2b,transparent 65%),#0a131d; }
.v-audit-intro,.v-platform-comparison { position:absolute; inset:47px 15px 15px; }
.v-audit-intro { opacity:0; pointer-events:none; }
.v-platform-comparison { display:flex; flex-direction:column; }
.v-test-question { border:1px solid #a3bcd732; border-radius:7px; padding:9px 10px; background:#26354470; }
.v-test-question small { display:block; font-size:6px; letter-spacing:.65px; line-height:1.5; color:#99b8c9; }
.v-test-question p { margin:5px 0 0; color:#e0eaf1; font-size:11px; line-height:1.5; }
.v-test-mode { margin:8px 0 5px; font-size:8px; line-height:1.5; color:#9cb4c6; }
.v-platform-list { display:grid; gap:5px; }
.v-platform-row { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:32px; border:1px solid #b4cddd20; border-radius:5px; padding:6px 8px; background:#acc7e006; font-size:11px; line-height:1.5; }
.v-platform-status { display:flex; align-items:center; gap:5px; white-space:nowrap; font-size:9px; }
.v-platform-row .v-platform-status svg { width:14px; height:14px; stroke-width:1.7; }
.v-platform-absent .v-platform-status { color:#dba8b7; }
.v-platform-absent .v-platform-status rect { fill:#be677916; stroke:#bc7b8b85; }
.v-platform-found { border-color:#80bf9e40; background:#4a987519; }
.v-platform-found .v-platform-status { color:#a7dfc3; }
.v-platform-found .v-platform-status rect { fill:#70bc9330; stroke:#9bd6b8a6; }
.visibility-verify-art .v-platform-absent .v-platform-status { color:#b7c4d1; }
.visibility-verify-art .v-platform-absent rect { fill:#abc4df0a; stroke:#a8b6c675; }
.v-comparison-context { margin-top:auto; padding-top:7px; color:#a1b6c7; font-size:8px; line-height:1.5; }
.v-comparison-report { margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:7px; color:#a6dcca; }
.v-comparison-report>svg { width:16px; height:16px; border:1px solid #7eb99d59; border-radius:50%; padding:2px; }
.v-comparison-report strong { display:block; font-size:9px; line-height:1.5; font-weight:500; }
.v-comparison-report small { display:block; font-size:7px; line-height:1.6; color:#a3b9c9; }
.visibility-scene figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:35px; color:#94aabd; font-size:9px; line-height:1.5; padding-top:4px; }
.visibility-replay { display:inline-flex; align-items:center; gap:5px; border:0; padding:6px 0 6px 6px; min-height:32px; font:inherit; font-size:10px; color:#b6cbdc; background:none; cursor:pointer; }
.visibility-replay svg { width:13px; height:13px; }
.visibility-replay:hover { color:#fff; }
.visibility-step .visibility-takeaway { margin:9px 0 0; color:#d3e2eb; font-size:13px; line-height:1.7; max-width:100%; }
.visibility-step .visibility-outcome { display:flex; align-items:center; gap:9px; min-height:35px; color:#e0edf4; font-weight:500; }
.v-outcome-count { display:grid; place-items:center; width:29px; height:29px; flex:none; border:1px solid #9bddec45; border-radius:8px; font-size:16px; line-height:1; font-weight:600; color:#b8e6f3; background:#9bddec0d; }
.visibility-outcome-issues .v-outcome-count { color:#f0cb91; border-color:#dfb16e55; background:#dfb16e0c; }
.visibility-outcome-verified .v-outcome-count { color:#b2dfca; border-color:#8ac7a84a; background:#8ac7a80e; }
.v-answer-count { width:66px; height:35px; display:flex; justify-content:center; gap:5px; }
.v-answer-count strong { font-size:21px; font-weight:550; }
.v-answer-count small { font-size:10px; font-weight:400; }
.v-outcome-label { font-size:11px; line-height:1.5; font-weight:400; }
.v-deliverable { min-height:124px; margin-top:14px; padding-top:12px; border-top:1px solid #91c9dc24; }
.v-deliverable h4 { margin:0; color:#deedf4; font-size:13px; line-height:1.5; font-weight:500; letter-spacing:0; }
.v-deliverable p { margin:5px 0 0; color:#b1c4d3; font-size:11px; line-height:1.65; }
.v-report-details { margin-top:5px; border:0; background:none; }
.v-report-details summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; list-style:none; color:#a8dce9; font-size:11px; line-height:1.5; cursor:pointer; }
.v-report-details summary::-webkit-details-marker { display:none; }
.v-report-details summary svg { width:13px; height:13px; flex:none; }
.v-report-details[open] summary svg { transform:rotate(45deg); }
.v-report-details summary:hover { color:#e0f8ff; }
.v-report-details summary:focus-visible { outline:2px solid #adf0ff; outline-offset:3px; border-radius:3px; }
.v-report-details ul { list-style:none; padding:0; margin:2px 0 0; }
.v-report-details li { padding:9px 0; border-top:1px solid #91c9dc18; font-size:11px; line-height:1.6; }
.v-report-details li strong { display:block; color:#d3e5ee; font-weight:500; }
.v-report-details li span { display:block; color:#aabfce; margin-top:3px; }
.visibility-connector { position:absolute; right:-28px; top:240px; width:27px; display:flex; justify-content:center; color:#a3c5d387; }
.visibility-connector svg { width:20px; }
.visibility-example-note { font-size:10px; line-height:1.8; color:#a6bacc; margin:16px 0 0; }
.visibility-next { display:flex; align-items:center; justify-content:space-between; gap:26px; padding:25px 0; border-bottom:1px solid #89c8e026; }
.visibility-next p { margin:0; font-size:13px; line-height:1.8; color:#b7c9d8; }
.visibility-next p strong { display:block; font-size:15px; font-weight:500; color:#e0ecf3; }
.visibility-next p span { display:block; margin-top:3px; }
.button.visibility-cta { display:inline-flex; align-items:center; color:#0a2532; background:#9bddec; border:1px solid #b3eafa; min-height:52px; font-size:13px; padding:14px 22px; gap:24px; flex:none; text-align:center; line-height:1.5; box-shadow:0 4px 25px #5fc8e31c; }
.visibility-cta svg { width:21px; height:21px; flex:none; }
.button.visibility-cta:hover { background:#b4ecf7; }
.visibility-scope { padding-top:13px; }
.visibility-scope p { font-size:11px; line-height:1.8; color:#a6bacc; margin:5px 0 0; }
/* Playback enhances a complete static scene. No endlessly blinking elements. */
.visibility-step.is-playing .v-scan-beam { animation:v-scan 2.1s ease-in-out both; }
.visibility-step.is-playing .v-reveal-1 { animation:v-reveal .6s .5s both; }
.visibility-step.is-playing .v-reveal-2 { animation:v-reveal .6s 1s both; }
.visibility-step.is-playing .v-reveal-3 { animation:v-reveal .6s 1.6s both; }
.visibility-step.is-playing .v-field-before { animation:v-old-copy 1.6s both; }
.visibility-step.is-playing .v-field-after { animation:v-reveal .6s 1s both; }
.visibility-step.is-playing .v-update-1 .v-update-done { animation:v-reveal .5s 1.6s both; }
.visibility-step.is-playing .v-update-2 .v-update-done { animation:v-reveal .5s 2s both; }
.visibility-step.is-playing .v-save-confirmation { animation:v-reveal .5s 2.5s both; }
.visibility-step[data-visibility-scene="audit"].is-playing .v-audit-intro { animation:v-scan-to-checks 2.7s both; }
.visibility-step[data-visibility-scene="audit"].is-playing .v-platform-comparison { animation:v-reveal .45s 2.7s both; }
.visibility-step[data-visibility-scene="audit"].is-playing .v-platform-1 { animation:v-reveal .4s 3.15s both; }
.visibility-step[data-visibility-scene="audit"].is-playing .v-platform-2 { animation:v-reveal .4s 3.65s both; }
.visibility-step[data-visibility-scene="audit"].is-playing .v-platform-3 { animation:v-reveal .4s 4.15s both; }
.visibility-step[data-visibility-scene="verify"].is-playing .v-platform-1 { animation:v-reveal .5s .65s both; }
.visibility-step[data-visibility-scene="verify"].is-playing .v-platform-2 { animation:v-reveal .5s 1.3s both; }
.visibility-step[data-visibility-scene="verify"].is-playing .v-platform-3 { animation:v-reveal .5s 1.95s both; }
.visibility-step.is-playing .v-comparison-report { animation:v-reveal .5s 3.8s both; }
.visibility-step.is-playing .visibility-outcome-issues { animation:v-reveal .45s 4.55s both; }
.visibility-step.is-playing .visibility-outcome-applied { animation:v-reveal .45s 2.7s both; }
.visibility-step.is-playing .visibility-outcome-verified { animation:v-reveal .45s 2.7s both; }
.visibility-process.is-paused .visibility-step *,.visibility-step.is-paused *,.motion-paused .visibility-process * { animation-play-state:paused!important; }
@keyframes v-scan { 0% { opacity:0; transform:translateY(-40px); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translateY(110px); } }
@keyframes v-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes v-old-copy { 0%,48% { opacity:1; } 70%,100% { opacity:0; } }
@keyframes v-scan-to-checks { 0%,88% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-4px); } }
@media (min-width:1001px) and (max-width:1150px) { .visibility-steps { gap:20px; } .visibility-step { padding:18px 12px; } .visibility-scene-art { padding:12px; } .visibility-connector { width:19px; right:-20px; } .v-window-top>small { font-size:6px; } .v-window-top>span { font-size:10px; } .v-test-question { padding:7px 9px; } .v-test-mode { margin:6px 0 4px; } .v-comparison-report { padding-top:6px; } }
@media (max-width:1000px) {
 .visibility-steps { grid-template-columns:minmax(0,1fr); gap:30px; max-width:540px; margin:0 auto; }
 .visibility-step { padding:22px; }
 .visibility-scene-art { height:310px; padding:18px; }
 .v-window-top>span { font-size:12px; }
 .v-window-top>small { font-size:8px; }
 .v-audit-intro,.v-platform-comparison { inset:50px 18px 18px; }
 .v-audit-preview { height:108px; }
 .v-test-question p { font-size:12px; }
 .v-test-question small { font-size:7px; }
 .v-test-mode { font-size:9px; }
 .v-platform-row { min-height:34px; font-size:12px; }
 .v-platform-status { font-size:10px; }
 .v-comparison-context,.v-comparison-report small { font-size:9px; }
 .v-comparison-report strong { font-size:10px; }
 .v-check-row { font-size:11px; min-height:34px; }
 .v-check-pass,.v-check-issue,.v-check-missing { font-size:9px; }
 .v-update-row { min-height:35px; font-size:11px; }
 .v-update-done { font-size:9px; }
 .v-field-value { font-size:12px; }
 .v-edit-target strong { font-size:12px; }
 .v-edit-target small { font-size:9px; }
 .v-save-confirmation { margin-top:16px; font-size:10px; }
 .visibility-connector { top:auto; right:auto; bottom:-29px; left:calc(50% - 10px); height:28px; width:20px; align-items:center; transform:rotate(90deg); }
 .v-deliverable { min-height:0; }
 .v-report-details summary { min-height:44px; }
 .visibility-example-note { max-width:540px; margin-left:auto; margin-right:auto; }
 .visibility-scene figcaption { min-height:44px; font-size:10px; }
 .visibility-replay { min-height:44px; font-size:11px; }
}
@media (max-width:760px) {
 .visibility-section .section-lede { margin-top:20px; }
 .visibility-process { margin-top:25px; }
 .visibility-process-header>p { max-width:150px; font-size:9px; }
 .visibility-motion { font-size:10px; padding:8px; min-height:44px; flex:none; }
 .visibility-next { align-items:flex-start; flex-direction:column; gap:18px; padding:22px 0; }
 .visibility-cta { width:100%; justify-content:space-between; }
}
@media (max-width:420px) {
 .visibility-section h2 { font-size:30px; letter-spacing:-1.2px; }
 .visibility-step { padding:18px 14px; }
 .visibility-scene-art { padding:12px; height:300px; }
 .v-window-top>small { font-size:6px; }
 .v-window-top>span { font-size:10px; }
 .v-check-row { font-size:10px; }
 .v-audit-intro,.v-platform-comparison { inset:44px 12px 12px; }
 .v-test-question p { font-size:11px; }
 .v-test-question small { font-size:6px; }
 .v-test-mode { font-size:8px; }
 .v-platform-row { font-size:11px; }
 .v-platform-status { font-size:9px; }
 .v-field-value { font-size:11px; }
 .v-update-row { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .visibility-step.is-playing * { animation:none!important; } .v-field-before,.v-scan-beam,.v-audit-intro { opacity:0!important; } }
/* Translated questions and result labels retain the same readable type sizes. */
html[lang="es"] .visibility-scene-art { height:320px; }
html[lang="es"] .v-platform-status { white-space:normal; min-width:0; }
html[lang="es"] .v-platform-row>span:first-child { flex:none; }
html[lang="es"] .v-platform-status svg { flex:none; }
html[lang="es"] .visibility-motion { white-space:normal; text-align:left; }
@media(max-width:420px) {
  html[lang="es"] .visibility-scene-art { height:330px; }
  html[lang="es"] .visibility-process-header { align-items:flex-start; }
  html[lang="es"] .visibility-process-header>p { min-width:0; }
  html[lang="es"] .visibility-motion { max-width:145px; }
}