.ts-scanner{
  position:relative;
  isolation:isolate;
}

/* ── Browser chrome ── */
.ts-chrome{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid rgba(122,164,255,.14);
  background:rgba(0,0,0,.22);
}
.ts-dot{ width:8px; height:8px; border-radius:50%; opacity:.55; }
.ts-dot-r{ background:#ff5f68; } .ts-dot-a{ background:#f2c14e; } .ts-dot-g{ background:#3ff0a2; }
.ts-url{
  flex:1 1 auto; max-width:240px;
  display:flex; align-items:center; gap:7px;
  margin-left:6px; padding:6px 14px; border-radius:999px;
  background:rgba(122,164,255,.10); border:1px solid rgba(122,164,255,.18);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:#9db3d6;
}
.ts-globe{ width:12px; height:12px; flex:0 0 auto; color:#6f8daf; }
.ts-chrome-status{
  margin-left:auto; display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#5c7aa3;
}
.ts-live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 9px rgba(69,215,255,.7); animation:tsBlink 1.4s ease-in-out infinite;
}
@keyframes tsBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ── The mock "page" being scanned ── */
.ts-page{
  position:relative;
  padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:18px;
  background:
    radial-gradient(circle at 85% 0%, rgba(18,104,255,.08), transparent 45%),
    linear-gradient(180deg, rgba(4,10,20,.4), rgba(2,6,14,.55));
}

.ts-mock-nav{ display:flex; align-items:center; gap:10px; }
.ts-mock-logo{ width:20px; height:20px; border-radius:6px; background:linear-gradient(145deg,#2b80ff,#0a3f9e); flex:0 0 auto; }
.ts-mock-pill{ width:44px; height:7px; border-radius:999px; background:rgba(122,164,255,.16); }
.ts-mock-nav .ts-mock-cta{ margin-left:auto; width:64px; height:20px; border-radius:999px; background:linear-gradient(180deg,#2b80ff,#0758f0); }

.ts-mock-hero{
  position:relative; padding:22px 20px 54px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(122,164,255,.12);
  background:linear-gradient(180deg,rgba(8,17,32,.5),rgba(4,10,20,.6));
}
.ts-blob{
  position:absolute; top:-30%; right:-15%; width:75%; height:170%;
  background:
    radial-gradient(circle at 35% 40%, rgba(255,110,196,.30), transparent 55%),
    radial-gradient(circle at 65% 60%, rgba(69,215,255,.26), transparent 55%),
    radial-gradient(circle at 50% 30%, rgba(147,110,255,.24), transparent 60%);
  filter:blur(18px);
  animation:tsBlobDrift 9s ease-in-out infinite alternate;
}
@keyframes tsBlobDrift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-4%,3%) scale(1.06); }
}
.ts-sparkle{ position:absolute; width:24px; height:24px; color:#e4edff; opacity:.95; filter:drop-shadow(0 0 8px rgba(255,255,255,.4)); }
.ts-sparkle svg{ width:100%; height:100%; }
.ts-sparkle-1{ top:12px; left:38%; animation:tsSparkle 2.6s ease-in-out infinite; }
.ts-sparkle-2{ top:30px; left:47%; animation:tsSparkle 2.6s ease-in-out infinite 1.1s; }
@keyframes tsSparkle{ 0%,100%{ transform:translateY(0) scale(1); opacity:.55; } 50%{ transform:translateY(-3px) scale(1.15); opacity:1; } }

.ts-mock-bar{ position:relative; border-radius:999px; background:rgba(122,164,255,.16); }
.ts-bar-xl{ width:62%; height:15px; margin-bottom:38px; }
.ts-bar-lg{ width:48%; height:10px; margin-bottom:8px; }
.ts-bar-md{ width:70%; height:8px; }
.ts-bar-sm{ width:34%; height:8px; margin-bottom:16px; opacity:.7; }
.ts-bar-xs{ width:56px; height:6px; opacity:.6; }
.ts-mock-hero .ts-mock-cta{ display:inline-block; width:96px; height:26px; border-radius:999px; background:linear-gradient(180deg,#2b80ff,#0758f0); box-shadow:0 8px 20px rgba(18,104,255,.3); }

.ts-mock-features{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ts-feature{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:12px; border:1px solid rgba(122,164,255,.1); background:rgba(122,164,255,.03); }
.ts-feature-icon{ width:30px; height:30px; border-radius:50%; background:rgba(122,164,255,.14); border:1px solid rgba(122,164,255,.22); }

.ts-mock-testimonial{
  position:relative; padding:16px 18px; border-radius:12px;
  border:1px solid rgba(122,164,255,.1); background:rgba(122,164,255,.025);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
}
.ts-quote-mark{ font-family:var(--display); font-size:1.6rem; color:rgba(122,164,255,.35); line-height:.6; margin-right:2px; }
.ts-mock-testimonial .ts-bar-lg,.ts-mock-testimonial .ts-bar-md{ flex:1 1 100%; margin:0; }
.ts-mock-avatar{ width:22px; height:22px; border-radius:50%; background:rgba(122,164,255,.18); margin-top:4px; }

.ts-mock-footer{ position:relative; display:flex; gap:18px; padding-top:4px; }
.ts-dead-link{ position:relative; opacity:.35; }
.ts-dead-link::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#ff6b81; }

/* ── The bottom edge of the mock page — reads as "this page ends here" ── */
.ts-page-end{
  margin-top:4px; padding-top:14px;
  border-top:1px solid rgba(122,164,255,.08);
  display:flex; justify-content:center;
}
.ts-bar-copyright{ width:120px; height:5px; opacity:.3; }

/* ── Diagnostic tags ── real, readable text; not decorative ── */
.ts-tag{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:8px;
  background:rgba(4,9,18,.92); border:1px solid rgba(122,164,255,.24);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.02em; white-space:nowrap;
  opacity:0; transform:translateY(4px) scale(.94);
  transition:opacity .4s ease var(--ts-tag-delay,0s),transform .4s cubic-bezier(.2,.8,.2,1) var(--ts-tag-delay,0s);
  pointer-events:none;
}
.ts-scanner.ts-revealed .ts-tag{ opacity:1; transform:none; }
.ts-tag-num{ color:#4e89d8; font-weight:700; }
.ts-tag-name{ color:#dbe6f7; }
.ts-tag-score{ padding:2px 6px; border-radius:5px; font-weight:700; letter-spacing:.04em; }
.ts-tag-score.high{ color:#ff8a97; background:rgba(255,61,93,.14); }
.ts-tag-score.medium{ color:#ffd876; background:rgba(242,193,78,.14); }

.ts-tag-hero{ top:10px; right:10px; }
.ts-tag-sparkle{ top:42px; left:16px; }
.ts-tag-type{ bottom:14px; left:16px; }
.ts-tag-features{ position:static; margin:0 auto; }
.ts-feature-tagged{ display:flex; align-items:center; justify-content:center; min-height:64px; }
.ts-tag-testimonial{ top:-2px; right:10px; }
.ts-tag-footer{ top:-20px; right:0; }

/* ── Scan-line sweep, travels the full mock page height ── */
.ts-sweep{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:4;
  background:linear-gradient(90deg,transparent,#45d7ff,#1268ff,transparent);
  box-shadow:0 0 20px rgba(69,215,255,.65);
  opacity:0; pointer-events:none;
}
.ts-scanner.ts-scanning .ts-sweep{
  animation:tsSweepDown 2.3s cubic-bezier(.3,.7,.3,1) both;
}
@keyframes tsSweepDown{
  0%{ top:64px; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ top:calc(100% - 4px); opacity:0; }
}

@media (max-width:680px){
  .ts-mock-features{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .ts-tag{ font-size:.53rem; padding:4px 7px; }
  .ts-tag-name{ display:none; } /* keep the number + score, drop the label to fit narrow screens */
  .ts-tag-features,.ts-tag-testimonial,.ts-tag-footer{ top:auto; bottom:6px; right:6px; }
}

@media (prefers-reduced-motion:reduce){
  .ts-blob,.ts-sparkle,.ts-live-dot{ animation:none !important; }
  .ts-sweep{ display:none !important; }
  .ts-tag{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ── Score-card "what you'll see" — fills the extra vertical space now
   that the scanner (left column) is taller. Every line describes real,
   verified behavior of the actual free check, nothing invented. ── */
.ts-score-extra{
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(122,164,255,.12);
  text-align:left;
}
.ts-score-extra-title{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  color:#7188a9; margin-bottom:13px;
}
.ts-score-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:0; padding:0; }
.ts-score-list li{ display:flex; align-items:flex-start; gap:9px; font-size:.84rem; color:#c2cee2; line-height:1.4; }
.ts-score-list svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:#3ff0a2; }
.ts-score-note{ margin-top:17px; font-size:.71rem; color:#63769a; line-height:1.55; }