/* SEO AI, Spectrum V3.1: refinements on top of v33.css. Same tokens; light only; no eyebrows.
   The website stays sharp in every step (no veil); only the mark, the note and the camera change. */
.dim{display:none!important}
/* the example: a fictional florist */
.fl .f-welcome{position:relative;display:inline-block;margin:6px 0 14px;font-size:44px;line-height:1;letter-spacing:-.04em;font-weight:800;color:#14233D}
.fl .f-h1{position:relative;margin:6px 0 14px;font-size:32px;line-height:1.06;letter-spacing:-.035em;font-weight:800;color:#14233D;max-width:440px}
.cam .fl .f-welcome{font-size:66px}.cam .fl .f-h1{font-size:46px;max-width:500px}
.fl .s-img{position:relative}
.img-mark{position:absolute;inset:-6px;border-radius:18px;border:2.5px solid #27CBF5;opacity:0;transition:opacity .4s ease;pointer-events:none}
.img-mark::after{content:"New finding";position:absolute;right:10px;top:-14px;font-size:12px;font-weight:800;color:#fff;background:#0A6F94;border-radius:99px;padding:5px 11px}
/* bigger, clearer step selector */
.s3-tabs [role=tab]{padding:14px 24px;font-size:17px}.s3-tabs .n{font-size:12.5px}
/* Explain and Recommend: move closer, keep everything sharp */
.s3-stage[data-s=exp] .cam,.s3-stage[data-s=rec] .cam{transform:translate(-1%,1%) scale(1.1)}
/* Verify: the same page before and after, side by side, then either one in full */
.pg{transition:transform .85s cubic-bezier(.65,0,.35,1),opacity .45s ease,box-shadow .6s ease;border-radius:0;overflow:hidden}
.pg-after{clip-path:none!important}
.s3-stage[data-s=ver] .win{background:#F3F7FD}
.s3-stage[data-s=ver] .pg{border-radius:22px;box-shadow:0 0 0 1px rgba(11,42,102,.08),0 30px 60px -30px rgba(8,80,180,.45)}
.s3-stage[data-s=ver][data-v=side] .pg-before{transform:translate(-25.5%,4%) scale(.47)}
.s3-stage[data-s=ver][data-v=side] .pg-after{transform:translate(25.5%,4%) scale(.47);opacity:1}
.s3-stage[data-s=ver][data-v=before] .pg-after{transform:translate(30%,4%) scale(.47);opacity:0}
.s3-stage[data-s=ver][data-v=after] .pg-before{transform:translate(-30%,4%) scale(.47);opacity:0}
.s3-stage[data-s=ver][data-v=after] .pg-after{transform:none;opacity:1}
.s3-stage[data-s=ver] .pg-after .pm{display:none}
.vl{position:absolute;z-index:6;top:15%;display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--muted);opacity:0;transition:opacity .4s ease;pointer-events:none}
.vl b{font-size:19px;letter-spacing:-.01em;color:var(--ink)}.vl-b{left:2.5%}.vl-a{left:51.5%}.vl-a b{color:#0A7569}
.s3-stage[data-s=ver][data-v=side] .vl{opacity:1;transition-delay:.35s}
.s3-stage[data-s=ver][data-v=before] .vl-b,.s3-stage[data-s=ver][data-v=after] .vl-a{opacity:1;top:auto;bottom:22px;left:24px;background:#fff;border-radius:12px;padding:8px 14px;box-shadow:0 10px 26px -14px rgba(11,42,102,.4)}
.made{position:absolute;z-index:7;left:50%;top:18px;transform:translate(-50%,-6px);margin:0;white-space:nowrap;font-size:14px;font-weight:700;color:#0A7569;background:#fff;border-radius:999px;padding:8px 16px;box-shadow:0 0 0 1px rgba(25,188,169,.35),0 12px 28px -16px rgba(8,80,180,.45);opacity:0;transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.s3-stage[data-s=ver] .made{opacity:1;transform:translate(-50%,0)}
/* Monitor: the same, improved page stays large beside the review history */
.s3-stage[data-s=mon] .cam{transform:translate(3.5%,15%) scale(.54);transform-origin:0 0;border-radius:30px;box-shadow:0 0 0 2px rgba(11,42,102,.08),0 50px 80px -40px rgba(8,80,180,.6)}
.s3-stage[data-s=mon] .pg-before{opacity:0}.s3-stage[data-s=mon] .pg-after{opacity:1}
.s3-stage[data-s=mon] .img-mark{opacity:1;transition-delay:.7s}
.pg-after .pm{opacity:0;transition:opacity .4s ease}.s3-stage[data-s=mon] .pg-after .pm{opacity:1;transition-delay:.7s}
.reviews{right:4%;width:37%;top:14%}
.reviews li b{font-size:22px}.reviews li span{font-size:16px;line-height:1.45}
.s3-stage[data-s=mon] .win{background:#F7FAFE}
/* note extras */
.quote{margin-top:10px;font-size:19px;line-height:1.3;font-weight:700;color:#8F5E00;padding-left:14px;box-shadow:inset 3px 0 0 #FFC65A}
.note3 .tag{margin:0 0 0 6px;vertical-align:1px}
.flow3{margin-top:14px;display:grid;gap:6px;font-size:13.5px;line-height:1.4;color:var(--muted);counter-reset:f}
.flow3 li{position:relative;padding-left:22px}.flow3 li::before{content:"";position:absolute;left:2px;top:5px;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pale);background:#fff}
.flow3 li.on::before,.s3-stage.ok .flow3 li:nth-child(2)::before{background:#087FFF;box-shadow:none}
.s3-stage.ok .flow3 li:nth-child(2){color:var(--ink);font-weight:700}
/* hero: value first, the page before and after stacked */
.frame2{position:relative;padding:40px 0 0 52px}
.frame2 .back{position:absolute;left:0;top:0;width:calc(100% - 52px);border-radius:16px;overflow:hidden;filter:saturate(.75);box-shadow:0 0 0 1px rgba(11,42,102,.08),0 20px 40px -24px rgba(8,80,180,.4)}
.frame2 .front{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 2px 4px rgba(11,42,102,.08),0 50px 90px -40px rgba(8,80,180,.55)}
.frame2 .pm.ok{inset:-8px -10px;border:2px solid #19BCA9;border-radius:8px}
.frame2 .pm.ok i{left:auto;right:-6px;top:-15px;height:24px;font-size:11.5px;padding:0 10px;border-radius:99px;background:#0A7569}
.hero2 .note{padding-top:190px}
@media (max-width:1180px){.frame2{padding:24px 0 0 28px}.frame2 .back{width:calc(100% - 28px)}.hero2 .note{padding-top:0}}
@media (max-width:900px){
  .s3-tabs [role=tab]{padding:11px 16px;font-size:15px}
  .cam .fl .f-welcome{font-size:44px}.cam .fl .f-h1{font-size:32px}
  .s3-stage[data-s=ver][data-v=side] .pg-before{transform:translate(19%,-25.5%) scale(.48)}
  .s3-stage[data-s=ver][data-v=side] .pg-after{transform:translate(19%,25.5%) scale(.48)}
  .s3-stage[data-s=ver][data-v=before] .pg-after{transform:translate(19%,30%) scale(.48)}.s3-stage[data-s=ver][data-v=after] .pg-before{transform:translate(19%,-30%) scale(.48)}
  .vl{flex-direction:column;gap:2px;width:30%;font-size:13px;line-height:1.35}.vl b{font-size:17px}.vl-b{left:16px;top:14%}.vl-a{left:16px;top:62%}
  .s3-stage[data-s=ver][data-v=before] .vl-b,.s3-stage[data-s=ver][data-v=after] .vl-a{width:auto;flex-direction:row;gap:8px;left:12px;bottom:12px}
  .made{display:none}
  .s3-stage[data-s=mon] .cam{opacity:0}
  .reviews{left:18px;right:18px;width:auto;top:36px}
  .frame2 .back{display:none}.frame2{padding:0}
}
@media (prefers-reduced-motion:reduce){.pg,.vl,.made,.img-mark{transition:none!important}}
/* no washed-out frame: the page on top fades in first; the one underneath only fades once it is covered */
.pg-after{transition-delay:0s,.45s,0s}
.s3-stage[data-s=ver] .pg-after,.s3-stage[data-s=mon] .pg-after{transition-delay:0s,0s,0s}
.s3-stage[data-s=mon] .pg-before{transition-delay:0s,.45s,0s}
/* leaving Verify: the "after" page fades where it stands, then moves, so it never drifts across the other page */
.s3-stage[data-from=ver]:not([data-s=ver]):not([data-s=mon]) .pg-after{transition-delay:.5s,0s,0s;transition-duration:.85s,.3s,.6s}